Lenso UI

Foundation component · Forms

Checkbox

Let people select any number of independent options, including an optional mixed state.

Live playground

Checkbox label

Choose Checkbox when

  • Each option can be selected independently of the others.
  • Use the indeterminate state only to summarize a partially selected child group.
  • Use Switch instead when changing the value should take effect immediately.

Labels and state

  • Keep a visible label beside the control; do not rely on surrounding copy.
  • Base UI exposes checked, mixed, disabled, and keyboard-focus states.
  • Explain why an option is unavailable instead of leaving a disabled control unexplained.

Implementation

Root owns checkbox behavior while Indicator and Label keep the visible treatment composable.

import { Checkbox } from "@lenso/ui/checkbox";

<Checkbox.Root defaultChecked>
  <Checkbox.Indicator />
  <Checkbox.Label>Include completed issues</Checkbox.Label>
</Checkbox.Root>;
Lenso UI