ComponentsUpdated Sep 9, 2026

Checkbox

Base UI checkbox with the brand fill. Always pair it with a label element so the whole row is the hit target.

Import

Source: packages/ui/src/components/checkbox

tsx

import { Checkbox } from '@highlight/ui'

Basic

Uncontrolled with defaultChecked. Disabled fades the control and its label.

Email me a recap after each meetingShare transcripts with my teamManaged by your organization

tsx

import { Checkbox } from '@highlight/ui'

export default function CheckboxBasic() {
  return (
    <div className="flex flex-col gap-3">
      <label className="flex cursor-pointer items-center gap-2.5 text-sm">
        <Checkbox defaultChecked>
          <Checkbox.Indicator />
        </Checkbox>
        Email me a recap after each meeting
      </label>
      <label className="flex cursor-pointer items-center gap-2.5 text-sm">
        <Checkbox>
          <Checkbox.Indicator />
        </Checkbox>
        Share transcripts with my team
      </label>
      <label className="text-foreground/50 flex items-center gap-2.5 text-sm">
        <Checkbox disabled defaultChecked>
          <Checkbox.Indicator />
        </Checkbox>
        Managed by your organization
      </label>
    </div>
  )
}

Controlled

checked and onCheckedChange, the same shape as Base UI.

SlackLinearNotion

Sync to: Slack

tsx

import { useState } from 'react'
import { Checkbox } from '@highlight/ui'

const OPTIONS = ['Slack', 'Linear', 'Notion'] as const

export default function CheckboxControlled() {
  const [selected, setSelected] = useState<Array<string>>(['Slack'])

  const toggle = (name: string, checked: boolean) => {
    setSelected((current) => (checked ? [...current, name] : current.filter((item) => item !== name)))
  }

  return (
    <div className="flex flex-col gap-3">
      {OPTIONS.map((name) => (
        <label key={name} className="flex cursor-pointer items-center gap-2.5 text-sm">
          <Checkbox checked={selected.includes(name)} onCheckedChange={(checked) => toggle(name, checked)}>
            <Checkbox.Indicator />
          </Checkbox>
          {name}
        </label>
      ))}
      <p className="text-foreground/60 text-xs">Sync to: {selected.length ? selected.join(', ') : 'nothing'}</p>
    </div>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Checkbox.Indicator: The check mark; hidden while unchecked. Pass children to replace the icon.

Notes

All Base UI Checkbox.Root props pass through: name, value, indeterminate, required, readOnly.