Components / inputs

Checkbox

Lets users select one or more options. Checked and Indeterminate (some children selected) are distinct from Unchecked.

import { Checkbox } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Checkbox } from '@basiiik/ui';

<Checkbox label="Remember me" />

• Example values were filled in for the required prop label: replace them with your own.
• Hover is CSS; Focused is :focus-visible on the native input; Disabled uses the disabled attribute. Checked and Indeterminate come from checked and indeterminate.
• Storybook: Inputs/Checkbox.

Props

States. Hover is CSS; Focused is :focus-visible on the native input; Disabled uses the disabled attribute. Checked and Indeterminate come from checked and indeterminate.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Select zero or more options
• Agree to terms

Do not use it when

• Exactly one option (use Radio)
• Immediate on/off setting (use Switch)

Rules for agents

• Group related checkboxes in <fieldset> with a <legend>
• Use indeterminate only on a 'select all' checkbox whose items are partly selected
• The mark (checkmark, dot, thumb) reads color.icon.on-brand, not color.text.on-brand: graphics need 3:1, text 4.5:1, so on some brand colours the mark stays white while button text turns dark
• A box that must be ticked (terms, consent) uses error="message" when the form is submitted without it; error={true} only marks it. Do not build the red text by hand

Avoid

• A checkbox for a choice where only one option can be picked (use Radio)
• A checkbox for a setting that applies instantly (use Switch)
• Negative labels that make 'checked' mean 'no'
• Pre-checking consent or marketing boxes
• Links or buttons inside the label (they compete with the toggle)

Writing the content

• Describe the 'on' state as a positive statement: 'Email me updates', not 'Don't email me'
• Keep labels short
• Use sentence case and no trailing punctuation

Keyboard

• Space toggles

Accessibility

• Use the native indeterminate property for the Indeterminate state (aria-checked="mixed" for custom)
• Group related boxes in <fieldset><legend>

Colour tokens it reads

Related

• Radio
• Switch

inputs 24 Figma variants Try it in the live demo