Fitune Design System · Layer 1 — Atom

Checkbox

Binary selection control with indeterminate state. Two sizes · 13 states · derived from Input visual language.

States — md (default size)

Default

Option label

Hover

Option label

Focus visible

Option label

Checked

Option label

Checked + hover

Option label

Indeterminate

Option label

Indeterminate + hover

Option label

Disabled — unchecked

Option label

Disabled — checked

Option label

Disabled — indeterminate

Option label

Error

Option label This field is required.

Error + focus visible

Option label This field is required.

Sizes — sm · md

sm — 16 × 16

Option label Helper text for context Option label Helper text for context Option label Helper text for context

md — 20 × 20 (default)

Option label Helper text for context Option label Helper text for context Option label Helper text for context

Anatomy — label · helper · error · no label

Subscribe to newsletter Send me marketing emails You can unsubscribe at any time from your account settings. Accept terms and conditions You must accept the terms to continue.

Indeterminate — parent reflects child state

Select all

Option A Option B Option C

Dark mode — same classes, Mode layer resolves

Default

Option label

Checked

Option label

Indeterminate

Option label

Disabled — checked

Option label

Disabled — unchecked

Option label

Error

Option label This field is required.