Skip to content
Atomus

Checkbox, Radio & Toggle

Selection controls in two sizes.

Checkbox, Radio & ToggleLive · light and dark follow the theme switch

Usage

Section titled “Usage”
import { Checkbox, Radio, Toggle } from '@stanvision/atomus-react';


<Checkbox label="Email me updates" defaultChecked />
<Radio name="plan" label="Pro" description="Unlimited projects" />
<Toggle label="Dark mode" size="md" />

Checkbox

Section titled “Checkbox”

Pick any number of options, or confirm one setting that applies on submit.

Provide

Section titled “Provide”
  • label, description (Figma: Label, Description), size sm (16 box) · md (20 box).
  • checked/defaultChecked, onChange; indeterminate for a partial “select all”.

Don’t

Section titled “Don’t”
  • Don’t use a checkbox for a setting that applies instantly — use Toggle.

Radio

Section titled “Radio”

Pick exactly one of 2–5 options. Wrap the group in role="radiogroup" with a label.

Provide

Section titled “Provide”
  • The same name on each radio, a label, optional description, size sm · md.

Don’t

Section titled “Don’t”
  • Don’t use radios for more than five options — use a Select.

Toggle

Section titled “Toggle”

A switch for a setting that takes effect immediately.

Provide

Section titled “Provide”
  • label, description, checked/onChange.
  • size sm (36×20) · md (44×24); shape pill · square (Figma: Shape).

Don’t

Section titled “Don’t”
  • Don’t use inside a form that needs a Save button — use Checkbox.

In Figma

Section titled “In Figma”

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.