Checkbox
A checkbox allows users to select one or more items from a set. Supports checked, unchecked, and indeterminate states.
Installation
The Checkbox component is part of the design system. Import it from the UI package.
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxBase } from "@/components/ui/checkbox-base"
import { CheckboxGroup } from "@/components/ui/checkbox-group"Usage
Use Checkbox with checked and onCheckedChange for controlled state. Copy the example below to get started.
Checkbox Base
The checkbox base component provides all visual states and variants. Use this when you need full control over styling.
Basic States
<CheckboxBase checked={false} size="sm" type="Checkbox" state="Default" />
<CheckboxBase checked={true} size="sm" type="Checkbox" state="Default" />
<CheckboxBase checked={true} indeterminate={true} size="sm" type="Checkbox" state="Default" />All Variants
Checkbox Variants
All checkbox variants with different states, sizes, and types. These match the Figma design system.
With Text Label
With Supporting Text
Checkbox Group
A checkbox group component that combines a label, supporting text, and checkbox in a single interactive container.
Basic Usage
Checkbox Label
Content will go here
<CheckboxGroup
label="Checkbox Label"
supportingText="Content will go here"
checked={checked}
onCheckedChange={setChecked}
/>All States
Checkbox Label
Content will go here
Checkbox Label
Content will go here
Checkbox Label
Content will go here
Checkbox Label
Content will go here
Checkbox Label
Content will go here
// Default (unselected)
<CheckboxGroup label="Checkbox Label" supportingText="Content will go here" />
// Hover (unselected)
<CheckboxGroup label="Checkbox Label" supportingText="Content will go here" state="Hover" />
// Focused (unselected)
<CheckboxGroup label="Checkbox Label" supportingText="Content will go here" state="Focused" />
// Selected
<CheckboxGroup label="Checkbox Label" supportingText="Content will go here" checked />
// Disabled
<CheckboxGroup label="Checkbox Label" supportingText="Content will go here" disabled />Examples
Sizes
<Checkbox size="sm" label="Small checkbox" />
<Checkbox size="md" label="Medium checkbox" />States
<Checkbox label="Default" />
<Checkbox label="Checked" checked />
<Checkbox label="Indeterminate" checked indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox label="Checked Disabled" checked disabled />With Supporting Text
<Checkbox
label="Remember me"
supportingText="Save my login details for next time."
showSupportingText={true}
/>Radio Buttons
<Checkbox type="Radio" label="Option 1" name="radio-group" />
<Checkbox type="Radio" label="Option 2" name="radio-group" />
<Checkbox type="Radio" label="Option 3" name="radio-group" />Controlled
const [checked, setChecked] = useState(false)
<Checkbox
label="Controlled checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>API Reference
The Checkbox component displays a selectable control. It supports checked, onCheckedChange, size, state, and supporting text. See the interface below for full prop details.
interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
size?: "sm" | "md"
type?: "Checkbox" | "Radio"
indeterminate?: boolean
label?: string
supportingText?: string
showSupportingText?: boolean
}
interface CheckboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
checked?: boolean
indeterminate?: boolean
size?: "sm" | "md"
type?: "Checkbox" | "Radio" | "Checkbox outline"
state?: "Default" | "Hover" | "Focused" | "Disabled"
}
interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
label: string
supportingText?: string
checked?: boolean
disabled?: boolean
state?: "Default" | "Hover" | "Focused" | "Disabled"
size?: "sm" | "md"
onCheckedChange?: (checked: boolean) => void
}