Checkboxes give users binary choices when presented with multiple options in a series.

This component is made on top of Radix UIs Checkbox Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import the component.

import { Checkbox } from "@rafty/ui";

<Checkbox />;

Usage

Checkbox component is used in forms when a user needs to select multiple values from several options.

<Checkbox
  id="1"
  name="checkbox"
>
  Checkbox
</Checkbox>

Default Selected

Pass defaultSelected prop to set default check the checkbox.

<Checkbox
  defaultChecked
  id="2"
>
  Checkbox
</Checkbox>

Disabled

Pass isDisabled prop to disable checkbox.

This property can also be passed in child/ sub component

<Checkbox
  id="3"
  isDisabled
>
  Checkbox
</Checkbox>

Checked

<Checkbox
  checked
  id="4"
>
  Checkbox
</Checkbox>

Required

This property can also be passed in child/ sub component

<Checkbox
  id="5"
  isRequired
>
  Checkbox
</Checkbox>

size

There are 3 size options in checkbox: sm, md (default) & lg.

<div className="space-y-3">
  <Checkbox
    id="6"
    size="sm"
  >
    Checkbox
  </Checkbox>
  <Checkbox
    id="7"
    size="md"
  >
    Checkbox
  </Checkbox>
  <Checkbox
    id="8"
    size="lg"
  >
    Checkbox
  </Checkbox>
</div>