Checkbox v0.5.0 · @behivetech

A bare checkbox control (built on Radix's Checkbox) — the Radix checkbox button is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome.

Usage

1import { Checkbox } from '@behivetech/atoms.checkbox';
2import { FormField } from '@behivetech/forms.form-field';
3
4const [checked, setChecked] = useState(false);
5
6<Checkbox checked={checked} onCheckedChange={setChecked} />
7
8<FormField label="Accept terms" htmlFor="terms" required>
9  <Checkbox id="terms" required checked={checked} onCheckedChange={setChecked} />
10</FormField>

Pass invalid (adds the --invalid modifier and sets aria-invalid) to visually mark the checkbox as invalid (pair with FormField's error prop for the message).

Examples

Open all 6 →

Basic Checkbox

1const BasicCheckbox = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <Checkbox
5      checked={checked}
6      onCheckedChange={(val) => setChecked(val === true)}
7    />
8  );
9};
10
11render(<BasicCheckbox />);

Checkbox With Form Field

1const CheckboxWithFormField = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <FormField
5      label="Accept terms and conditions"
6      htmlFor="accept-terms"
7      hint="You can withdraw consent at any time."
8    >
9      <Checkbox
10        id="accept-terms"
11        checked={checked}
12        onCheckedChange={(val) => setChecked(val === true)}
13      />
14    </FormField>
15  );
16};
17
18render(<CheckboxWithFormField />);

Properties

`Checkbox` props

Prop	Type	Default	Description
`asChild`	`boolean`	—	—
`className`	`string`	—	Additional class names to merge with the component root element
`invalid`	`boolean`	`false`	Marks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Usage

Examples

Properties

Checkbox props

`Checkbox` props