Checkbox

A 20px box that turns an option on or off, alone or in a list where any number can be picked. It comes as the control, a label row, or a whole selectable card, in neutral or brand, flat or with a shadow.

Email me product updates(Optional)

import { Checkbox, CheckboxWithLabel } from '@orvain/react';
 
<CheckboxWithLabel
  label="Accept terms"
  description="You can change this later in settings."
  checked={checked}
  onCheckedChange={setChecked}
/>
 
// Bare control: name it with aria-label
<Checkbox indeterminate aria-label="Select all" />
<Checkbox invalid aria-label="Accept terms" />

Add an unchecked neutral Orvain Checkbox, no shadow.

Orvain MCPIncluded with the library

When to use#

For independent options where any combination is valid: notify me by email, by SMS, by push.
For a single agreement that must be checked to continue: I accept the terms.
As a card when each option needs an avatar, a logo or a description to be compared.
Above a list as select-all, in the Unspecified appearance when only some rows are checked.

When not to use

Use a Radio group to choose one option from several.
Use a Switch for a setting that takes effect immediately.

Anatomy#

1Box

A 16px square with a 4px radius inside a 20px frame; the click target is 24px.

2Mark

A tick when Active, a dash when Unspecified, drawn with a 0.8 stroke.

3Label row

Label, (Sub-label), a badge, and an optional description and link, 8px from the box. The box can sit on the right.

4Card

The row in a bordered card with an optional 48px avatar or 40px logo, the box on the right; square or curved corners.

States#

Resting / Active / Unspecified

Unchecked, checked, and mixed.

Hover

The box darkens one step.

Focused

The focus ring, on keyboard focus only.

Disabled

Muted box and label, inert.

Brand? and Shadow

Brand fills in #005cf8 instead of near-black; Shadow lifts the box with a soft drop.

Card: Hover, Active, Read Only

A light wash, a checked card, and a card whose value shows but cannot change.

Source#

Preview – final code pending

The Checkbox is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

checkboxes forms