Checkbox
Allow users to make selections and toggle options effortlessly with rothko ui's Checkbox component. Present a list of choices and enable multiple selection, ensuring a clear and intuitive user interface for forms, settings, and more.
Import
- Global
- Single
import { Checkbox } from '@rothko-ui/react';
Usage
- Example
- Code
Label
Disabled
- Example
- Code
Disabled
Disabled + Checked
With Kind
- Example
- Code
Primary
Secondary
Success
Warning
Danger
Info
Props
| Name | Type | Default | Description |
|---|---|---|---|
Name checked | Type boolean | Default | Description Specifies whether the checkbox is checked. |
Name className | Type string | Default | Description CSS class name(s). |
Name disabled | Type boolean | Default | Description Specifies whether the checkbox is disabled. |
Name error | Type boolean | Default | Description Specifies whether there is an error with the checkbox. |
Name errorText | Type string | Default "Invalid" | Description The error text to be displayed when there is an error. |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The checkbox's semantic style. |
Name onChange | Type (v: boolean) => void | Default | Description The callback function called when the checkbox value changes. |
Name required | Type boolean | Default | Description Specifies whether the checkbox is required. |
Name style | Type CSSProperties | Default | Description The inline style for the checkbox. |
Name styles | Type Object<StyleableComponents, CSSProperties> | Default | Description Additional inline styles for the checkbox components. |