UI Component Lab 日本語

← All components

Input

Radio

A group of round buttons where exactly one option can be chosen.

Delivery

Also known as

How to recognize it

Small circles next to labels, stacked or in a row. The chosen one has a filled dot in the middle.

Behavior

  • Choosing an option clears the previous choice in the same group.
  • Once one is chosen, the group cannot go back to having none chosen.
  • Tab moves into the group as one stop; arrow keys move between the options and choose them at the same time.

Keyboard

KeyAction
TabMoves into the group (to the chosen option) and out of it.
↓ / →Chooses the next option, wrapping to the first.
↑ / ←Chooses the previous option, wrapping to the last.
SpaceChooses the focused option.

Usage notes

  • A selected radio button cannot be cleared, so add a choice such as "None of these" to optional questions.
  • Put the circle to the left of its label.
  • Checkbox: Radio buttons allow exactly one choice; checkboxes allow any number.
  • Select: Radio buttons show every option at once; a select hides them in a list to save space.
  • Listbox: Radio buttons show every option with its own label; a listbox scrolls and is one tab stop.

Sources