Checkbox

A single checkbox, its children are the label. To pick several values from a list, use a CheckboxGroup.

Show in navigation

Checkbox.tsx

import {Checkbox} from 'alinea/components'

export function CheckboxExample() {
  return <Checkbox defaultChecked>Show in navigation</Checkbox>
}

States

Set checked to "indeterminate" when some, but not all, of the items it controls are checked. A description and an error show below the label.

CheckboxStates.tsx

import {Checkbox} from 'alinea/components'

export function CheckboxStatesExample() {
  return (
    <div style={{display: 'grid', gap: 16, width: 280}}>
      <Checkbox>Featured product</Checkbox>
      <Checkbox defaultChecked>In stock</Checkbox>
      <Checkbox checked="indeterminate">All variants</Checkbox>
      <Checkbox disabled>Gift wrapping</Checkbox>
      <Checkbox description="Hide this page from search engines">
        No index
      </Checkbox>
      <Checkbox required error="Accept the terms to publish">
        I accept the terms
      </Checkbox>
    </div>
  )
}

Props

PropTypeDefaultDescription

checkedboolean | 'indeterminate'Default –

defaultCheckedbooleanDefault –

onCheckedChange(checked: boolean) => voidDefault –

disabledbooleanDefault –

requiredbooleanDefault –

readOnlybooleanDefault –

namestringDefault –

valuestringDefault –Submitted value, and the value inside a CheckboxGroup

autoFocusbooleanDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

refRef<HTMLLabelElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

Clicking the label toggles the checkbox, Space toggles it from the keyboard. The indeterminate state is announced as mixed.