Checkbox

Checkboxes allow users to select one or more items from a set, or to turn an option on or off.

Import

import { Checkbox, CheckboxGroup } from '@proyecto-viviana/solid-spectrum';

Basic Usage

A single checkbox for toggling a boolean option.

Accept terms and conditions

Selected: No

<Checkbox isSelected={selected()} onChange={setSelected}>
  Accept terms and conditions
</Checkbox>

Indeterminate State

The indeterminate state indicates a partial selection, commonly used in 'select all' scenarios.

Select all items

<Checkbox isIndeterminate>Select all items</Checkbox>

Disabled State

Disabled checkboxes cannot be interacted with.

Disabled option

Disabled selected

<Checkbox isDisabled>Disabled option</Checkbox>
<Checkbox isDisabled isSelected>Disabled selected</Checkbox>

Checkbox Group

Group multiple checkboxes with a shared label and state management.

Notification preferences

Email notifications

SMS notifications

Push notifications

Selected: notifications

<CheckboxGroup
  label="Notification preferences"
  value={groupValues()}
  onChange={setGroupValues}
>
  <Checkbox value="email">Email notifications</Checkbox>
  <Checkbox value="sms">SMS notifications</Checkbox>
  <Checkbox value="push">Push notifications</Checkbox>
</CheckboxGroup>

Sizes

Checkboxes come in small, medium, and large sizes.

Small

Medium

Large

<Checkbox size="sm">Small</Checkbox>
<Checkbox size="md">Medium</Checkbox>
<Checkbox size="lg">Large</Checkbox>

Checkbox Props

Props

Prop	Type	Default	Description
`isSelected`	boolean	`false`	Whether the checkbox is selected
`defaultSelected`	boolean	`false`	Default selected state (uncontrolled)
`onChange`	(isSelected: boolean) => void	—	Handler called when selection changes
`isIndeterminate`	boolean	`false`	Whether the checkbox is in indeterminate state
`isDisabled`	boolean	`false`	Whether the checkbox is disabled
`isReadOnly`	boolean	`false`	Whether the checkbox is read-only
`value`	string	—	Value for the checkbox when used in a group
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the checkbox
`children`	JSX.Element	—	Label content

CheckboxGroup Props

Props

Prop	Type	Default	Description
`label`	string	—	Group label for accessibility
`value`	string[]	—	Selected values (controlled)
`defaultValue`	string[]	—	Default selected values (uncontrolled)
`onChange`	(values: string[]) => void	—	Handler called when selection changes
`isDisabled`	boolean	`false`	Whether all checkboxes are disabled
`orientation`	'horizontal' \| 'vertical'	`'vertical'`	Layout orientation
`children`	JSX.Element	—	Checkbox components

Accessibility

Uses native <input type="checkbox"> for proper semantics
Supports keyboard toggle via Space key
Indeterminate state communicated via aria-checked="mixed"
Groups use role="group" with aria-labelledby
Focus ring visible only on keyboard navigation