Checkbox

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download checkbox -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Checkbox } from "@/components/ui/checkbox";
import * as React from "react";
export default function CheckboxExample() {
  const [checked, setChecked] = React.useState(false);
  const [indeterminate, setIndeterminate] = React.useState(
    false,
  );
  return (
    <Checkbox
      disabled={false}
      checked={checked}
      indeterminate={indeterminate}
      onCheckedChange={(next) => {
        setChecked(next === true);
        setIndeterminate(false);
      }}
      aria-label="Preview checkbox"
    />
  );
}

Examples

Default

<Checkbox disabled={false} />

Disabled

<Checkbox disabled />

Checked

<Checkbox checked />

Checked Disabled

<Checkbox disabled checked />

Indeterminate

<Checkbox indeterminate />

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.