form · Normal DOM only

Checkbox

Boolean (or tri-state) toggle for a single value. Radix-backed — keyboard and a11y handled.

Use a Checkbox for any independent on / off value. For mutually exclusive choices use Radio. For groups where the parent should reflect partial selection — set checked="indeterminate" on the parent.

Inside a Twenty front-component, prefer the bridge import
This Checkbox is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Checkbox } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Checkbox } from '@8maverik8/twenty-design';

Examples

States

tsx
<Checkbox id="a" />
<Checkbox id="b" defaultChecked />
<Checkbox id="c" checked="indeterminate" />
<Checkbox id="d" disabled defaultChecked />
<Checkbox id="e" accent="orange" defaultChecked />

Variants

size
smdefault14 px box — dense lists, table row select.
lg20 px box — settings forms, mobile.
accent
bluedefaultDefault fill — most uses.
orangeUse sparingly for "starred" / favourite / pinned style flags.

Guidelines

✓
Always render a visible Label next to the Checkbox.An unlabelled checkbox is impossible to interpret without context.
✓
Use checked="indeterminate" to express partial group selection.Three-state checkboxes are standard in tables with bulk selection.
✕
Use a Checkbox for an instant action like "Save".Checkboxes imply state that persists until submit — actions belong on a Button.