Checkboxes
Checkboxes are interactive selection controls that allow users to choose one or multiple options from a list. They provide clear visual feedback for multi-select scenarios and are commonly used in forms, filters, preference settings, and long-option lists. Checkboxes support multiple layout types and sizes to ensure flexibility across different interface densities and content structures.
Component Types
The Checkbox component is available in three types, allowing it to adapt to various UI contexts.
1. Only Checkbox
A standalone square checkbox without any accompanying text. Ideal for compact layouts, tables, lists, or custom UI patterns. Primarily controlled by surrounding content or external labels.
2. Checkbox with Title
A checkbox paired with a short text label (title). Used for standard form fields and option lists. Ensures clarity and accessibility by explicitly naming the option.
3. Checkbox with Title and Description
A checkbox paired with both a title and a supporting description. Suitable for settings pages, permission controls, and complex options. The description provides additional context about the selected feature. Improves decision clarity for longer or more detailed content.
Sizes
Checkboxes come in two sizes to match different UI densities.
Medium (M)
Default size for forms, lists, and most interface elements. Compact visual footprint suitable for dense layouts. Minimum vertical size: 40px.
Large (L)
Used in setting cards, onboarding flows, preference screens, or where clarity is prioritized. Provides more comfortable tap targets on touch devices. More space for title + description layout. Minimum vertical size: 40px.
States
Checkboxes support three visual and interactive states.
1. Default
Represents the unchecked, idle state. Square box with an empty center. Ready for interaction. Label text (if present) uses default neutral color.
2. Hovered
Shown when the user hovers or focuses on the checkbox. Border color changes to indicate interactivity. Indicates that the element is interactive and about to be selected.
Hover over the checkboxes below to see the hover state.
3. Selected
Indicates that the option has been chosen. The box displays a filled state with accent color. Label and description remain unchanged.
4. Disabled
Checkbox is disabled and cannot be interacted with. Visual opacity is reduced to indicate the disabled state.
Usage Examples
Examples of how checkboxes can be used in different contexts.
Form Selection
Select your preferences
Settings Page
Privacy Settings
Filter Options
Filter by category
Code Examples
How to use the Checkbox component in your code.
Icon Only
<Checkbox size="md" iconOnly />With Title
<Checkbox size="md" label="Title text goes here" />With Title and Description
<Checkbox
size="md"
label="Title text goes here"
description="Secondary text line goes here"
/>Controlled Checkbox
const [checked, setChecked] = useState(false);
<Checkbox
size="md"
label="Title text goes here"
checked={checked}
onCheckedChange={setChecked}
/>Disabled Checkbox
<Checkbox
size="md"
label="Title text goes here"
disabled
/>