Checkbox | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

No preview action taken.

Usage

Select independent options. The mixed state shows a dash SVG. Read-only and disabled states look distinct.

Don't use it for one choice among mutually exclusive options. Use RadioGroup instead. Don't distinguish states by color alone. Let the Indicator icon show the state too.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

ChoiceLabel(control, description?) → Checkbox.Root + Indicator(default SVG) + text

Keyboard and accessibility

Tab focuses the checkbox. Space toggles it. Base UI's hidden input handles label clicks, form submission, and reset.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Checkbox, ChoiceLabel } from '@surflane/ui'

<ChoiceLabel
  control={
    <Checkbox.Root name='cleanup' defaultChecked>
      <Checkbox.Indicator />
    </Checkbox.Root>
  }
  description='Removes accounts unused for 30 days.'
>
  Clean up temporary accounts
</ChoiceLabel>

Key API

Checkbox — common wrapper props
Prop	Contract	Default
`Root.checked / defaultChecked`	controlled / uncontrolled boolean	— / false
`Root.indeterminate / readOnly / disabled`	mixed or unavailable state	false
`Root.name / value / uncheckedValue`	native form values	—
`Root.size`	small \| default \| large	surrounding size
`ChoiceLabel control / description`	the control; text below the label, read as its description	—

The table lists the common wrapper's main props. See the package type declarations for the full types.