Homecomponentsinput

Checkbox

An input that toggles between on and off states.

Use Checkbox for selecting multiple values from several options.

Click me

Open in Playroom

Disabled

Use disabled property to disable the checkbox.

Disabled checked

Disabled unchecked

Disabled indeterminate

Open in Playroom

Indeterminate

Use checked='indeterminate' property to visualize state between not checked and checked.

Indeterminate state

Open in Playroom

Pass a boolean array as checked property. If items include both true and false values the Checkbox will have an indeterminate state. Otherwise it'll be just checked/unchecked.

Selected options

Option 1

Option 2

Option 3

Open in Playroom

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.

Open in Playroom

API

name

Required

Name for the checkbox input.

string

checked

Required

Sets the state of the checkbox. `indeterminate` shows a horizontal line in the checkbox. Use onChange to update its value.

CheckboxValue

children

Required

The content of the checkbox.

ReactNode

ID for the checkbox input.

string

value

Value for the checkbox input.

string

required

Indicates that the checkbox is invalid unless checked.

true

false

disabled

Prevents the user from interacting with the checkbox.

true

false

onChange

Called when the checkbox's value is changed by the user.

((value: boolean | "indeterminate") => void)

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLButtonElement>

data

An object with the data keys and values.

DataAttributeMap

ref

Ref<HTMLButtonElement>

key

Key | null

Table of Contents