On this page
Checkbox
Checkbox component for boolean selection with support for indeterminate state, labels, and multiple sizes.
import { Checkbox } from "@ninna-ui/forms";pnpm add @ninna-ui/forms@latest@ninna-ui/core. CSS setup required.View source Usage
Import and use the Checkbox component in your application.
import { Checkbox } from "@ninna-ui/forms";
export default function Example() { return ( <Checkbox label="Accept terms and conditions" /> );}Basic
Click either the visible box or its label to toggle the native checkbox.
Click the visible box or the label to toggle.
Checked: No
Variants
Checkbox supports outline, soft, and solid variants.
Sizes
Checkbox comes in 3 sizes: sm, md, and lg.
Colors
Checkbox supports multiple color themes.
Label Position
Position the label on either side of the checkbox.
Custom Icon
Use custom icons for the checked state.
Indeterminate
Checkbox with indeterminate state for partial selection.
States
Checkbox in different states: unchecked, checked, indeterminate, and disabled.
With Description
Checkbox with label and description text.
React Hook Form
Checkbox works with React Hook Form using the Controller pattern. Use Field wrapper for error messages.
API Reference
Complete list of props for the Checkbox component.
Checkbox Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size of the checkbox |
color | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | Color theme of the checkbox |
variant | 'outline' | 'soft' | 'solid' | 'outline' | Visual variant of the checkbox |
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | — | Default checked state for uncontrolled usage |
onCheckedChange | (checked: boolean) => void | — | Callback when checked state changes |
label | ReactNode | — | Label text for the checkbox |
description | ReactNode | — | Description text below the label |
labelPosition | 'start' | 'end' | 'end' | Position of the label relative to checkbox |
invalid | boolean | false | Whether the checkbox is in an invalid state |
icon | ReactNode | — | Custom icon for checked state |
indeterminateIcon | ReactNode | — | Custom icon for indeterminate state |
disabled | boolean | false | Whether the checkbox is disabled |
required | boolean | false | Whether the checkbox is required |
Accessibility
- Built on a native
<input type="checkbox">for full browser accessibility - Proper focus states with visible outlines
- Supports keyboard navigation (
Spaceto toggle) - The visible box and text label both activate the native checkbox
- Labels are properly associated with checkboxes via
htmlFor - Indeterminate state uses
aria-checked="mixed"for screen readers