@gemeente-denhaag/radio

A Radio component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gemeente-denhaag/radio
9550.2.3-alpha.2894 days ago2 years agoMinified + gzip package size for @gemeente-denhaag/radio in KB

Readme

Radio button
Radio buttons are a list of options where users should make a single selection.

When to use

Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed. It is not used for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

Form

Can be used in forms on a full page or in modals.

Settings

Used to change from one setting to another in a menu, page, or component.

Selection in lists

Used to choose a singular item within lists.

Alternatives and related components

  • Use checkboxes to display a list of options where users can make multiple choices
  • Use a select when there is a long lists of options to avoid overwhelming users

Anatomy

The radio button consists of:
  1. Label (optional): indicates what should be selected below.
  2. Radio button input: a radio button input that indicates the correct status. By default it is not active.
  3. Radio button label: describes the information you can select or deselect.
  4. Helper text (optional): displays more information about the radio buttons

(Interactive) states

The radio button contains the states normal, hover, disabled, error and focus.

Design properties

Typography

  • Label: TheSans/md/700
  • Radio button label: TheSans/md/400
  • Helper text: TheSans/s/400

Color

  • Label: text color Blue/5
  • Radio button input inactive: border 1,5px inside Grey/4, background-color white
  • Radio button input active: border 1,5px inside Blue/3, background-color white, dot color Blue/3
  • Radio button label: text color Grey/4
  • Helper text: text color Grey/4

Interactive states

  • Hover inactive: radio button input border color Blue/3, radio button label text color Blue/3
  • Hover active: radio button input border color Blue/3, radio button label text color Blue/3, dot color Blue/3
  • Disabled inactive: radio button input border color Grey/2, radio button label text color Grey/2
  • Disabled inactive: radio button input border color Grey/2, radio button label text color Grey/2, dot color Grey/2
  • Error inactive: radio button input border color Red/3, radio button label text color Red/3
  • Error active: radio button input border color Red/3, radio button label text color Red/3, dot color Red/3
  • Hover error inactive: radio button input border color Red/4, radio button label text color Red/4
  • Hover error active: radio button input border color Red/4, radio button label text color Red/4, dot color Red/4
  • Focus: radio button input border color Ocher/5

Structure

  • Radio button: height and width 20px, border 1px
  • Radio button focus: border 2px, dash 5,5
  • Dot: height and width 12px
  • Label: margin-bottom 8px
  • Checkbox label: padding-left 8px
  • Helper text: margin-left 16px, margin-top 4px

Accessibility

Screen readers convey the state of the radio button automatically.
technical accessibility requirements

Labeling

technical requirements, such as: label and labelHidden

Keyboard support

  • Move focus to each radio button using the tab key (or shift + tab when tabbing backwards)
  • Activate or deactivate radio buttons with the space key

Content guidelines

Radio button label

Radio button labels must:
  • Start with a capital letter

  • Not end in punctuation if it’s a single sentence, word, or a fragment

Best practices

Dos

Radio buttons must:
  • Always be used with an associated label component.
  • Have options that should be comprehensive and clearly distinct.
  • Use label tags as click targets.
  • Be used when there are less than 5 options.
  • Be part of a list of radio buttons that:
- Include at least two or more choices. - Include mutually exclusive options—this means that each option must be independent from every other option in the list. For example: Red, green, and yellow are mutually exclusive. Red, green, yellow, red/green are not mutually exclusive. - List options in a rational order that makes logical sense, such from simplest operation to most complex, or least risk to most. - Have a default option selected whenever possible.
  • Preferably not contain more than three words.
  • If they are too long, run over the second line. This is preferable than truncation.
  • If they are too long, they will be aligned left.
  • If they are too long, let the text flow under the checkbox so that the control and label are aligned at the top.

Don’ts

Radio buttons must:
  • Not be used to perform commands.
  • Not be replaced by dropdowns. Drop-down menus will require extra action.
  • Not be used when there are more than 5 options. Use the select instead.

References

https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc https://uxdworld.com/2018/05/06/7-rules-of-using-radio-buttons-vs-drop-down-menus/