Components
Checkbox

Checkbox

The Checkbox is a widely used input component for toggling between checked and unchecked states. It supports basic, controlled, and indeterminate states.

UsageTypes

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

CheckboxProps

checked

CheckedState

If `true`, the checkbox will be checked.

defaultChecked

CheckedState

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

If `true`, the checkbox will be disabled

form

string

The id of the form that the checkbox belongs to.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string hiddenInput: string control: string label: string }>

The ids of the elements in the checkbox. Useful for composition.

invalid

boolean

If `true`, the checkbox is marked as invalid.

name

string

The name of the input field in a checkbox. Useful for form submission.

onCheckedChange

(details: CheckedChangeDetails) => void

The callback invoked when the checked state of the `Checkbox` changes.

required

boolean

If `true`, the checkbox input is marked as required,

value

string

The value of checkbox input. Useful for form submission.

CheckboxContext

checkedState

CheckedState

The checked state of the checkbox

controlProps

Dict<any>

hiddenInputProps

Dict<any>

isChecked

boolean

Whether the checkbox is checked

isIndeterminate

boolean

Whether the checkbox is indeterminate

labelProps

Dict<any>

rootProps

Dict<any>

setChecked

(checked: CheckedState) => void

Function to set the checked state of the checkbox

toggleChecked

() => void

Function to toggle the checked state of the checkbox

isDisabled

boolean

Whether the checkbox is disabled

isFocused

boolean

Whether the checkbox is focused