CheckboxField — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

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

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

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

Usage

import { CheckboxField } from "@/components/ui/checkbox-field";
import { Label } from "@/components/ui/label";
<CheckboxField position="prefix" disabled={false} className="">
  <Label className="text-neutral-subtle">Urgent</Label>
</CheckboxField>;

Examples

Default

import { CheckboxField } from "@/components/ui/checkbox-field";
import { Label } from "@/components/ui/label";
<CheckboxField position="prefix" disabled={false} className="">
  <Label className="text-neutral-subtle">Urgent</Label>
</CheckboxField>;

Suffix

import { CheckboxField } from "@/components/ui/checkbox-field";
import { Label } from "@/components/ui/label";
<CheckboxField position="suffix" disabled={false} className="">
  <Label className="text-neutral-subtle">Urgent</Label>
</CheckboxField>;

API reference

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

Prop	Type	Default
`checked`	`boolean`	`—`
`disabled`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean) => void`	`—`
`position`	`"prefix" \| "suffix"`	`"prefix"`

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