useCheckbox

Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Unsubscribe

Example

Checkbox.tsx

Checkbox.css

Example

Checkbox.tsx

Checkbox.css

import {Checkbox} from './Checkbox';

<Checkbox>Unsubscribe</Checkbox>

API

<CheckboxField>
  <CheckboxButton>Label</CheckboxButton>
  <Text slot="description" />
  <FieldError />
</CheckboxField>

useToggleState(props: ToggleStateOptions): ToggleState

useCheckbox(
  props: AriaCheckboxProps,
state: ToggleState,
inputRef: RefObject<HTMLInputElement | null>
): CheckboxAria

ToggleState

Properties

Name	Type
`isSelected`	`boolean`
Whether the toggle is selected.
`defaultSelected`	`boolean`
Whether the toggle is selected by default.

Methods

`setSelected(isSelected: boolean): void`
Updates selection state.
`toggle(): void`
Toggle the selection state.

AriaCheckboxProps

Name	Type
`isIndeterminate`	`boolean`
Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
`children`	`ReactNode`
The label for the element.
`defaultSelected`	`boolean`
Whether the element should be selected (uncontrolled).
`isSelected`	`boolean`
Whether the element should be selected (controlled).
`isDisabled`	`boolean`
Whether the input is disabled.
`isReadOnly`	`boolean`
Whether the input can be selected but not changed by the user.

`onChange`	`(isSelected: boolean) => void`
Handler that is called when the element's selection state changes.

CheckboxAria

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label wrapper element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the input element.
`descriptionProps`	`<HTMLElement>`
Props for the checkbox description element, if any.
`errorMessageProps`	`DOMAttributesWithRef<HTMLElement>`
Props for the checkbox error message element, if any.
`isSelected`	`boolean`
Whether the checkbox is selected.
`isPressed`	`boolean`
Whether the checkbox is in a pressed state.
`isDisabled`	`boolean`
Whether the checkbox is disabled.
`isReadOnly`	`boolean`
Whether the checkbox is read only.
`validationDetails`	`ValidityState`
The native validation details for the input.