FORMS · FORM ELEMENTS

Checkboxes & Radios

Native inputs with a custom skin. Groups, mixed states, trees, cards, chips and bulk selection — all working.
THEME
DENSITY
01

Playground

Type, size, state, label — the control and its a11y tree update live
PREVIEWLive · false
Tab away without checking to see the error
ACCESSIBILITY TREE
rolecheckbox
name"I agree to the Terms of Service" · from <label>
checkedfalse
description"Required to create the workspace"
statesrequired
Settings
TYPE
SIZE
LABEL
STATE
CODE
<Checkbox label="I agree to the Terms of Service" description="Required to create the workspace" checked={false} required/>
02

Variants

10 patterns, all working
Basicssingle checkbox · radio group
Workspace size
Links inside a label open the link — they don’t toggle the box.
Label + descriptiontwo-line options
Indeterminateparent shows a partial selection
Permission tree3 levels · state bubbles up
PRESET
3 of 8 permissions · Viewer preset
Checkbox cardsadd-ons · live total
Base $12 + 1 add-on$18/ seat / month
Radio cardsplan picker
Toggle chipsfilters · still checkboxes to AT
Showing 310 files · Images, PDFs
With a limitpick up to 3
Focus areas2 of 3
Pick the ones you want on your public profile.
Radio + Otherfield appears when chosen
How did you hear about Avava?
Layoutsinline · stacked · columns
LAYOUT
Working days
5 working days · Mon, Tue, Wed, Thu, Fri
03

States

5 values × 6 states, per size
SIZE
Box 18 px · hit area 44 px with the label
DEFAULTHOVERFOCUSERRORDISABLEDREAD-ONLYCheckbox · offCheckbox · onCheckbox · mixedRadio · offRadio · on
Box16 / 18 / 22 px · radius 5 (7 at L) · 1.5 px border at 42% ink
CheckedCyan fill, dark 2.3 px check drawn in 260 ms
MixedCyan fill, 52% dash — parent of a partial group
FocusKeyboard only: 4 px cyan ring at 34%
ErrorCoral border + 10% coral fill on unchecked boxes
Disabled / read-only45% opacity · read-only keeps the value, dashed border
04

Behavior

Keyboard, group errors, instant vs deferred, animation
KeyboardSpace toggles · arrows move radios
Default view
Show on cards
TabInto a group — lands on the checked radio↑ ↓ ← →Radios: move and select in one stepSpaceCheckbox: toggle · Radio: selectShift + TabBack to the previous group
EVENT LOGTab into the groups and use the keyboard.
Group validationfieldset + legend · one message
Deliverables
Choose what this brief covers
The error sits on the group, not on each box.
Instant vs deferredsettings save now · forms on Apply
INSTANT · CALENDAR
DEFERRED · EXPORT
Applied: Comments
Check animationstroke draws in · respects reduced motion
STYLE
SYSTEM
check: stroke-dashoffset .26s cubic-bezier(.65,0,.35,1) .03s
05

In Avava

Notification matrix, bulk file selection, onboarding
Notification matrixrows · columns · all — with mixed states
7 of 18 notifications on
Files · bulk selectselect all · Shift+click range · action bar
NAMETYPESIZEOWNERMODIFIED
PDFLume_dielines_v4.pdfPDF12.4 MBJon ReyesOct 17
JPGNova_hero_01.jpgImage4.8 MBAlex ReyesOct 16
JPGNova_hero_02.jpgImage5.1 MBAlex ReyesOct 16
PDFAtelier_guidelines.pdfPDF18.2 MBOlivia LaneOct 15
MP4Kiln_teaser.mp4Video86.0 MBIda SvenssonOct 13
INDDSable_lookbook.inddInDesign42.7 MBJon ReyesOct 12
OTFForma_Specimen.otfFont600 KBZoe DahlOct 10
AIHalo_signage.aiIllustrator9.3 MBAlex ReyesOct 9
Click one box, then Shift+click another to select the range between them.
Onboarding checklistprogress · strike-through · done state
2 / 6
Checkbox, radio or switch?pick by behaviour, not looks
Checkbox
On/off, or several from a listApplied when the form is saved
Radio
Exactly one of 2–5 visible optionsNeeds a default or a required error
Switch
A setting that takes effect immediatelyNever inside a form with a Save button
Toggle chip
Filters in a toolbarLooks like a chip, behaves like a checkbox
06

Rules & a11y

Anatomy, screen readers, hit area
Anatomylegend · box · label · description · message
Notify me1
2Mentions3When someone @mentions you4
Pick at least one channel5
1Legend — names the group; fieldset ties it to every option
2Box — 18 px, 1.5 px border — the input itself is invisible on top
3Label — clickable, starts with the noun: “Mentions”, not “Enable mentions”
4Description — optional, linked with aria-describedby
5Group message — one error for the whole group, under the last option
Screen readersnative inputs do most of the work
✓<input type="checkbox"> under the skinKeyboard, form submit and screen readers work for free
✓<label> wraps box + textClicking the words toggles; one accessible name
✓<fieldset> + <legend>Groups are announced: “Notify me, radio group, 3 items”
✓input.indeterminate = trueRead as “mixed” — set by JS, there is no HTML attribute
✓aria-describedby="…-desc"Descriptions and errors are read after the label
✓:focus-visible ringShown for keyboard only, never for mouse clicks
Hit areathe whole row is the target
Box only · 18 pxTOO SMALL
Label + box · 44 px rowGOOD
Wrap the input and its text in one <label>. Clicking the words toggles the box, and the row is easy to hit on touch.
DO✓Wrap the box and its text in one label — the whole row is the target✓Use radios when there are 2–5 options and one must be picked✓Show a mixed state on a parent with partial children✓Put one error on the group, not on every box✓Offer Undo for instant settings and bulk deletes
DON’T✕Use a checkbox for a setting that applies instantly — that’s a switch✕Pre-check consent or marketing boxes✕Write negative labels like “Don’t send emails”✕Disable an option without saying why✕Hide the native input with display:none — it breaks keyboard and forms