Choosing a selection control

The problem

A Select with two options hides both behind a click. A row of eleven radio buttons pushes the form off the screen. A switch inside a form that only saves on submit looks like it has already saved. The wrong control makes a simple choice slow, or makes people think something happened when it didn't.

When to use it

Use it for

Any time someone picks from a known set of options: a leave type, a department, a notification setting.
Reviewing a form where the controls were chosen by habit rather than by the number of options.

Not for

Free text, like a name or a reason: use Input or Textarea.
Numbers on a scale, like a budget: use Slider or InputNumber.
Actions, like Archive or Export: use Button or Menu. Selection controls choose values, they don't do things.

Anatomy

One of 2 to 4, applied nowSegmentedControl, for views and ranges such as Week, Month, Quarter.
One of 2 to 6, on submitRadioGroup with RadioField, all options visible. RadioCard when each needs a description.
One of 7 to about 15Select. The options are known and short.
One of many, or searchableCombobox: people, cities, cost centres.
Any number of a fewCheckboxField for each, or CheckboxCard when they need a description.
On or off, applied nowSwitchField. The change takes effect without a Save button.
On or off, on submitCheckboxField, such as “I agree to the leave policy”.

How to build it

Decide whether people pick one option or several. Several means checkboxes or a multi-select Select.
Count the options. Up to about 6, show them all with radios; up to 15, use a Select; more, use a Combobox.
Decide when the choice applies. Immediately means SwitchField or SegmentedControl; on submit means checkboxes and radios.
Order the options by likelihood or a natural order (days of the week), never alphabetically by default.
Preselect the safest or most common option for single choices, unless picking it should be a conscious decision.
Label every option with words. Icons on segments need an aria-label, and a visible label when space allows.

app.tsx

import { RadioField, RadioGroup, Select, SelectOption, SwitchField } from "@nexera-ui/react";

// 3 options, chosen on submit: show them all
<RadioGroup label="Leave type" name="type" defaultValue="annual">
  <RadioField value="annual" label="Annual leave" description="12 days left this year" />
  <RadioField value="sick" label="Sick leave" description="Certificate after 2 days" />
  <RadioField value="unpaid" label="Unpaid leave" />
</RadioGroup>

// 9 options: a Select
<Select label="Department" name="department" value={department} onChange={setDepartment}>
  {DEPARTMENTS.map((d) => (
    <SelectOption key={d.id} id={d.id} label={d.name} />
  ))}
</Select>

// Applies straight away: a switch, no Save button
<SwitchField
  label="Email me about leave requests"
  isSelected={emails}
  onChange={setEmails}
/>

Accessibility

Keyboard support
Key	Action
`Arrow keys`	Move between radios or segments and select the focused one.
`Space`	Toggles a checkbox or switch, or opens a Select.
`Type to search`	Jumps to a matching option in a Select, or filters a Combobox.

A RadioGroup is a single tab stop: Tab enters the group, arrows move inside it.
Switches are announced as “switch, on”, which tells people the change is immediate.
Every group has a visible label or legend, so “Yes” and “No” make sense out of context.
Don't rely on the selected colour alone: Nexera adds a check, a dot or a filled pill.

Do and don't

DoShow 2 to 6 options as radios so people can compare them at a glance.

Don'tHide two options inside a Select.

DoUse a SwitchField only for settings that apply as soon as they change.

Don'tPut a switch in a form that needs Save to take effect.

DoUse a Combobox when the list is long enough that people would rather type.

Don'tMake people scroll a Select of 200 countries.