Efniv0.1

Components

Checkbox

Toggles a boolean or one item in a multi-select. Always paired with a Label — never with placeholder text.

When to useto toggle a single boolean or pick multiple items from a small, visible list.

Import

import { Checkbox } from "@ravnhq/efni/checkbox"
import { Label } from "@ravnhq/efni/label"

Default

<Checkbox id="notify" />
<Label htmlFor="notify">Notify me on status change</Label>

Disabled

Invalid

<Checkbox aria-invalid />

Accessibility

KeyAction
SpaceToggle the checkbox.
TabMove focus to and from the checkbox.
  • Always couple with a Label htmlFor — click targets and screen-reader labels come from the pair, not from an aria-label.
  • Pass aria-invalid when the value fails validation; paired with FormMessage the error reads out automatically.

Guidelines

Do
  • Group related checkboxes visually and label the group with a heading.
  • Show all options at once when there are five or fewer.
  • Keep labels short and start with a verb or noun the operator recognises.
Don't
  • Don't use a checkbox for immediate side effects — use Switch when the change applies instantly.
  • Don't nest checkboxes for hierarchical filters; use a tree or Combobox with tags.
  • Don't rely on placeholder text — every checkbox needs a visible label.

Props

PropTypeDefaultDescription
checkedbooleanundefinedWhether the checkbox is currently ticked. To render an uncontrolled checkbox, use the defaultChecked prop instead.
defaultCheckedbooleanfalseWhether the checkbox is initially ticked. To render a controlled checkbox, use the checked prop instead.
onCheckedChange((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void)—Event handler called when the checkbox is ticked or unticked.
disabledbooleanfalseWhether the component should ignore user interaction.
…propsCheckboxPrimitive.Root.Props—Everything Checkbox passes to the element it renders.