Skip to main content
Checkbox component preview (light)
  • Location: sabo/src/components/ui/checkbox.tsx

​
When to use

  • Boolean fields where submission is explicit (terms, filters).
  • For immediate on/off actions consider a Switch.

​
Usage

sabo/src/components/ui/checkbox.tsx
import { Checkbox } from "@/components/ui/checkbox";

export function Example() {
  return (
    <label className="flex items-center gap-2">
      <Checkbox aria-label="Accept" />
      <span>I agree to the terms</span>
    </label>
  );
}

​
Key props

​
defaultChecked
boolean
Initial checked state. Use checked for controlled forms.
​
className
string
Override size or colors (e.g., size-5, text-primary).
This component forwards all props from Radix Checkbox primitives (Root/Indicator). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/checkbox

​
Styling tip

  • Change checkmark size by targeting [data-slot=checkbox-indicator] svg.
  • Keep small hit targets paired with a label to increase click area.

​
Accessibility

  • Always include a visible label adjacent to the control.