Checkbox

Checkbox is an input field representing a binary choice. Checkbox Group is a group of related binary choices.

<Checkbox label='I accept the terms and conditions' />

<CheckboxGroup
  label='Export data'
  theme='vertical'
  onValueChanged={({ detail: { value } }) => console.log(value)}
>
  <Checkbox value='0' label='Order ID' />
  <Checkbox value='1' label='Product name' />
  <Checkbox value='2' label='Customer' />
  <Checkbox value='3' label='Status' />
</CheckboxGroup>

Common input field features

Checkbox includes all shared input field features.

See shared input field features

States

Disabled

Disable a field to mark it as currently unavailable. Disabled state is used for fields that aren’t editable and don’t need to be readable. Disabled elements can’t be focused and may be inaccessible to assistive technologies like screen readers.

Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes, and to make users aware of its existence even when currently unavailable.

<Checkbox label='I accept the terms and conditions' disabled />

Note	Read-only state Checkbox doesn’t support read-only state.

Indeterminate

The indeterminate state can be used for a parent checkbox to show that there is a mix of checked and unchecked child items in a list, and to change the state of all child items at once.

const [users, setUsers] = useState<string[]>([]);
const [selectedIds, setSelectedIds] = useState<string[]>([]);

useEffect(() => setUsers(['Aria Bailey', 'Aaliyah Butler', 'Eleanor Price']), []);

return (
  <VerticalLayout theme='spacing'>
    <Checkbox
      id='notifyUsers'
      label='Notify users'
      checked={selectedIds.length === users.length}
      indeterminate={selectedIds.length > 0 && selectedIds.length < users.length}
      onCheckedChanged={({ detail: { value } }) => setSelectedIds(value ? users.map((_, index) => "" + index) : [])}
    />
    <CheckboxGroup
      label='Users to notify'
      theme='vertical'
      value={selectedIds}
      onValueChanged={({ detail: { value } }) => setSelectedIds(value)}
    >
      {users.map((value, index) => <Checkbox key={index} value={"" + index} label={value} />)}
    </CheckboxGroup>
  </VerticalLayout>
);

Orientation

The component’s default orientation is horizontal but vertical orientation is recommended whenever possible as it’s easier for the user to scan a vertical list of options.

Docs