Checkbox

A customizable checkbox component that supports three states: checked, unchecked, and indeterminate. It can be used in forms or as a standalone control.

function CheckboxExample() {
  const [{ shouldShownIndeterminate, checked }, setIndeterminateState] =
    useState({
      shouldShownIndeterminate: true,
      checked: false,
    });

  const handleChange = (event) => {
    setIndeterminateState({
      shouldShownIndeterminate: false,
      checked: event.target.checked,
    });
  };

  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <Checkbox size="extra-small" />
      <Checkbox size="small" />
      <Checkbox size="medium" />
      <Checkbox
        checked={!shouldShownIndeterminate && checked}
        indeterminate={shouldShownIndeterminate}
        onChange={handleChange}
      />
      <Checkbox disabled />
      <Checkbox disabled checked />
      <Checkbox disabled indeterminate />
    </div>
  );
}

Props

checked

Typeboolean

Whether the checkbox is checked

indeterminate

Typeboolean

Whether the checkbox is in an indeterminate state

size

TypeSelectorSize

Default'medium'

The size of the checkbox

CSS Variables

Color

--ax-public-checkbox-bg

--ax-public-checkbox-border-color

--ax-public-checkbox-checked-bg

--ax-public-checkbox-disabled-bg

--ax-public-checkbox-disabled-border-color

--ax-public-checkbox-disabled-icon-color

--ax-public-checkbox-focus-border-color

--ax-public-checkbox-icon-color

Radius

--ax-public-checkbox-border-radius-extra-small

--ax-public-checkbox-border-radius-medium

--ax-public-checkbox-border-radius-small

Size

--ax-public-checkbox-border-width

--ax-public-checkbox-icon-size-extra-small

--ax-public-checkbox-icon-size-medium

--ax-public-checkbox-icon-size-small

--ax-public-checkbox-size-extra-small

--ax-public-checkbox-size-medium

--ax-public-checkbox-size-small

Shadow

--ax-public-checkbox-focus-border-shadow