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.

View Source

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.