title: "Checkbox" slug: "/packages/checkbox" category: "control" componentNames:

• "Checkbox"

Checkbox

The Checkbox component that follows the WAI-ARIA Checkbox Pattern.

import Checkbox from "@ds-kit/checkbox"

Basic Example (Uncontrolled)

A basic example of an uncontrolled Checkbox component can look like this:

<>
  <Checkbox value="blue" text="blue" />
  <Checkbox value="red" text="red" />
</>

Controlled Checkbox

<>
  <Checkbox
    checked={true}
    value="red"
    onChange={() => alert("click red")}
    text="red"
  />
  <Checkbox
    checked={false}
    value="blue"
    onChange={() => alert("click blue")}
    text="blue"
  />
</>