Checkbox
Accessible checkbox with checked, unchecked, and indeterminate states.
Live Demo
You can change this in your account settings.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | componentPages.checkbox_prop_label |
description | string | — | componentPages.checkbox_prop_description |
checked | boolean | 'indeterminate' | — | componentPages.checkbox_prop_checked |
onCheckedChange | (checked: boolean | 'indeterminate') => void | — | componentPages.checkbox_prop_onCheckedChange |
disabled | boolean | false | componentPages.checkbox_prop_disabled |
id | string | — | componentPages.checkbox_prop_id |
Usage
import { Checkbox } from '@ghiberti85/ui'
// Basic
<Checkbox id="terms" label="Accept terms and conditions" />
// With description
<Checkbox
id="marketing"
label="Marketing emails"
description="Receive updates about new features."
/>
// Indeterminate
<Checkbox id="all" label="Select all" checked="indeterminate" />
// Controlled
<Checkbox
id="notif"
label="Enable notifications"
checked={checked}
onCheckedChange={setChecked}
/>
// Disabled
<Checkbox id="opt" label="Unavailable option" disabled />