FORMS · FORM ELEMENTS

Custom Options

Choices as cards — plans, delivery, payment, people, colours, scales. One native input per card, so keyboard and forms just work.
THEME
DENSITY
01

Playground

Selection, layout, indicator, columns, state — live
PREVIEWLive · nothing selected
Plan
ACCESSIBILITY TREE
roleradiogroup → radio × 3
name"Plan" · from <legend>
option name"Pro" · aria-labelledby title
description"For small studios"
checkednone
Settings
SELECTION
LAYOUT
INDICATOR
COLUMNS
STATE
CODE
<OptionCards type="radio" legend="Plan" layout="basic" indicator="right" columns={3} options={plans} value=""/>
02

Variants

11 card patterns, all working
Basictitle · description · value
Storage
Iconmulti · icon plate lights up
What does your studio do?
2 selected
Imagetemplate picker · preview slot
Start from
Pricingbilling switch re-prices every card
BILLING
Plan
Billed once a year. Switch any time.
Deliverydate · price · fastest badge
Delivery for printed samples
Payment methodsaved cards · add new
Pay with
Peoplemulti · avatar stack · count
2 of 6 invited
Invite to “Lume packaging”
Swatch & densitycolour and spacing pickers
Accent colour
Table density
PreviewNew projectGlacier · Cozy
Scale · NPS0–10 · follow-up adapts
How likely are you to recommend Avava to a friend?
0 · Not likely10 · Very likely
Row listmobile-style rows
Switch workspace
Nested configthe chosen card reveals its settings
Invoice reminders
Send after
First email 3 days after due, then weekly · owner in CC
03

States

4 values × 6 states
DEFAULTHOVERFOCUSERRORDISABLEDREAD-ONLYRadio · offRadio · onCheckbox · offCheckbox · on
Card16 px radius · 1.5 px border at 14% · 2% fill · 14 px padding
SelectedCyan border + 1 px inset ring = 2.5 px edge, 8% cyan fill, indicator filled
FocusKeyboard only: 4 px ring at 32% around the whole card
ErrorCoral border and indicator on unselected cards, one message for the group
Disabled45% opacity, title explains why
Read-onlyDashed border, value kept and submitted
04

Behavior

Keyboard, limits, gating, sticky summary
Keyboardarrows inside radios · Space for multi
Export format
Include
TabInto the group — lands on the checked card← → ↑ ↓Radio cards: move and selectSpaceCheckbox cards: toggle the focused oneShift + TabBack to the previous group
EVENT LOGTab into a group and use the keyboard.
Pick up to 2the rest lock and say why
Add-ons1 of 2
Continue gatingaria-disabled + reason, not a dead button
Project type
Pick a project type to continue
Sticky summaryselection follows you while you scroll
Studio add-ons
Selected: 0 · +$0 / seat / mo
05

In Avava

Onboarding wizard and plan upgrade
Set up your studioonboarding wizard · 3 steps + summary
1 · Studio type
2 · Team size
3 · Modules
4 · Review
What kind of studio are you?
Choose a studio type to continue
Upgrade planplan · period · payment · totals
Plan
Billing period
Payment method
Subtotal · 12 months$1,548
Yearly discount−$258
Tax (8%)$103.20
Total today$1,393.20
Charged today · cancel anytime from Billing
06

Rules & a11y

When to use cards, anatomy, screen readers
Cards or a list?cards cost space — earn it
2–6 options with real differences
CardsPlans, delivery, templates
Options need a picture or icon
Cards with mediaTemplates, services, colours
7+ options or plain text
Radio / checkbox listCountries, permissions
A price or date per option
Cards with a value columnShipping, add-ons
Mobile, long labels
Row cards, 1 columnWorkspaces, payment
Anatomyindicator · title · description · value · badge
TeamPOPULAR5Up to 10 seats3$49412
1Indicator — radio dot or checkbox — never rely on the border alone
2Card edge — the whole card is the label and the hit area
3Description — one line, linked with aria-describedby
4Value — price or date, right-aligned with tabular figures
5Badge — one per group at most — POPULAR, FASTEST
Screen readersone input per card, nothing clever
✓<label> wraps the whole cardOne click target; the native input covers it invisibly
✓<fieldset> + <legend>The group question is read before the options
✓aria-labelledby = titleThe name stays short — description and price are read after
✓name="plan" on every radioArrow keys move between cards for free
✓title on disabled cardsExplains why — also add the reason to the description
✓aria-disabled on ContinueStays focusable and shows the reason, unlike disabled
DO✓Use cards when options differ in price, date or picture✓Keep a visible indicator — radio dot or checkbox✓Put the price in the same place on every card✓Pre-select the sensible default for radio cards✓Show what changed in a sticky summary for long lists
DON’T✕Nest buttons or links inside the clickable card✕Use more than one badge per group✕Show selection by colour alone✕Disable Continue without telling why✕Mix radio and checkbox cards in one group