Checkbox

You might be looking for:

• Switch

  A single on or off setting.

• Radio Group

  Pick exactly one from a visible set.

Playground

<div className="flex items-center gap-2"> <Checkbox id="terms" /> <Label htmlFor="terms">Accept terms and conditions</Label></div>

Usage

import { Checkbox } from "@sophic/portal-ui/components/ui/checkbox";

<Checkbox checked={checked} onCheckedChange={setChecked} />

In app forms, Checkbox is used inside the Field family with react-hook-form; the demo here is standalone.

Props

Checkbox has no props of its own — it accepts every Radix Checkbox.Root prop (checked, defaultChecked, onCheckedChange, disabled, required, ...).

Tokens

Checkbox reads --checkbox-* for size, radius, border, fill, and the check. Fallbacks keep apps without those tokens on the previous look.

Changelog

• 3 October 2026 — Dark checked fill is Soil on a lifted card; the brand-green control stays light-only. Full notes
• 3 October 2026 — Same --control-size and inset ring as Radio; Field rows align to the label line. Full notes
• 19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 19 August 2026 — “You might be looking for” map to Switch and Radio Group. Full notes
• 22 July 2026 — Matches radio footprint (20px); mark and hover polish. Full notes