Checkbox

Checkbox is for a yes/no value that is saved with a form, or for selecting rows. It is built on Ark UI’s Checkbox, so it works with the keyboard and with native form submission.

import { Checkbox } from '@beyul/sulmu-ui'

Source · Figma

Examples

States

import { Checkbox, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={4} align="center" wrap>
      <Checkbox>Unchecked</Checkbox>
      <Checkbox defaultChecked>Checked</Checkbox>
      <Checkbox checked="indeterminate">Indeterminate</Checkbox>
      <Checkbox disabled>Disabled</Checkbox>
      <Checkbox disabled defaultChecked>
        Disabled checked
      </Checkbox>
    </Flex>
  )
}

Controlled

onCheckedChange receives { checked }, where checked is true, false or "indeterminate".

Remember me

You will be signed out when the browser closes.

import { Checkbox, Stack, Text } from '@beyul/sulmu-ui'
import { useState } from 'react'

export default function Example() {
  const [checked, setChecked] = useState(false)
  return (
    <Stack gap={2}>
      <Checkbox checked={checked} onCheckedChange={(d) => setChecked(d.checked === true)}>
        Remember me
      </Checkbox>
      <Text textStyle="caption" tone="subtle">
        {checked ? 'You will stay signed in.' : 'You will be signed out when the browser closes.'}
      </Text>
    </Stack>
  )
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Label text. Without it, pass `aria-label`.
`defaultChecked`	`CheckedState`	-	The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.
`value`	`string`	-	The value of checkbox input. Useful for form submission.
`name`	`string`	-	The name of the input field in a checkbox. Useful for form submission.
`disabled`	`boolean`	-	Whether the checkbox is disabled
`invalid`	`boolean`	-	Whether the checkbox is invalid
`checked`	`CheckedState`	-	The controlled checked state of the checkbox
`onCheckedChange`	`((details: CheckedChangeDetails) => void)`	-	The callback invoked when the checked state changes.

The remaining props of Ark UI’s Checkbox.Root are accepted too.

Accessibility and usage

The root element is a <label>, so clicking the text toggles the box. The ref points to it.
Without children there is no visible label: pass aria-label.
Set name (and optionally value) to submit the checkbox with a native form.
For a setting that takes effect immediately, use Switch.