Shim

Checkbox

Mark one or multiple options as selected.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Install
pnpm dlx @kkga/shim add checkbox
import { Checkbox } from "@/shim-ui/checkbox";

export default () => <Checkbox>Agree</Checkbox>;

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add checkbox

Group

Use the CheckboxGroup component to group checkboxes together with an accessible label. The label prop is required to provide an accessible name for the group.

Options
Group description
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";

export default () => (
  <CheckboxGroup
    defaultValue={["a"]}
    description="Group description"
    label="Options"
  >
    <Checkbox value="a">Option A</Checkbox>
    <Checkbox value="b">Option B</Checkbox>
    <Checkbox value="c">Option C</Checkbox>
  </CheckboxGroup>
);

States

Use the isSelected, isDisabled, and isIndeterminate props to set the state of the checkbox.

Group disabled
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";

export default () => (
  <>
    <div>
      <Checkbox isIndeterminate>Indeterminate</Checkbox>
      <Checkbox isDisabled>Disabled</Checkbox>
      <Checkbox isDisabled isSelected>
        Selected disabled
      </Checkbox>
    </div>

    <CheckboxGroup isDisabled label="Group disabled">
      <Checkbox>Option A</Checkbox>
      <Checkbox>Option B</Checkbox>
    </CheckboxGroup>
  </>
);

Size

Use the size prop to set the size of the group or individual checkboxes.

Size 1
Size 2
Size 3
Size 4
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";

export default () => (
  <>
    <CheckboxGroup label="Size 1" size={1}>
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
    </CheckboxGroup>

    <CheckboxGroup label="Size 2" size={2}>
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
    </CheckboxGroup>

    <CheckboxGroup label="Size 3" size={3}>
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
    </CheckboxGroup>

    <CheckboxGroup label="Size 4" size={4}>
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
    </CheckboxGroup>
  </>
);

Variant

Use the variant prop to set the variant of the group or individual checkboxes.

Classic
Soft
Outline
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";

export default () => (
  <>
    <CheckboxGroup defaultValue={["sidebar"]} label="Classic" variant="classic">
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
      <Checkbox isDisabled value="toolbar">
        Toolbar
      </Checkbox>
    </CheckboxGroup>

    <CheckboxGroup defaultValue={["sidebar"]} label="Soft" variant="soft">
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
      <Checkbox isDisabled value="toolbar">
        Toolbar
      </Checkbox>
    </CheckboxGroup>

    <CheckboxGroup defaultValue={["sidebar"]} label="Outline" variant="outline">
      <Checkbox value="sidebar">Sidebar</Checkbox>
      <Checkbox value="panel">Panel</Checkbox>
      <Checkbox isDisabled value="toolbar">
        Toolbar
      </Checkbox>
    </CheckboxGroup>
  </>
);

Checkbox description

Use the description prop to provide additional context for the checkbox.

Views
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";

export default () => (
  <>
    <CheckboxGroup label="Views">
      <Checkbox description="This is a sidebar" value="sidebar">
        Sidebar
      </Checkbox>
      <Checkbox description="This is a panel" value="panel">
        Panel
      </Checkbox>
      <Checkbox description="This is a toolbar" value="toolbar">
        Toolbar
      </Checkbox>
    </CheckboxGroup>
  </>
);