Checkbox

A control that toggles between two options, checked or unchecked.

Usage

import { Checkbox, useCheckbox } from "@skyltmax/ds9"

Examples

Basic

Option 1

Code

Checked

Option 1

Code

Indeterminate

Option 1

Code

Disabled

Disabled Checked

Disabled Indeterminate

Code

Label

Checkbox

Click me

Code

No Label

Code

Overflowing Text

The checkbox will remain aligned to the first line of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Code

Full Width

Expands the clickable area to full width.

Areas to the right of this text will be clickable.

Code

useCheckbox

The useCheckbox hook can be used to easily manage the state of a checkbox.

Option 1

Code

Autocomplete Editor