UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best Practices
  • Radio Lists
  • Size
  • Validation

Was this helpful?

  1. Components

Radio button

PreviousProgress barNextScroll bar

Last updated 4 years ago

Was this helpful?

Usage

Radio component allows users to select just one item from the group of available options. There should be at least two or more choices for user to choose from when using this component.

Radio buttons should be accompanied by a text label, unless they control the list item or table row. Clicking the text label also selects or deselects the radio button option. Radio buttons should always work in connection with each other: selecting one radio button should change the selection status of another radio button in the same group. Radio button options can be stacked vertically or horizontally (same as checkbox), according to the amount of data that needs to be shown.

Best Practices

  • Text label should always start with a capital letter. At the end of each line, there should be no semicolons, periods or commas.

  • The options presented with radio buttons should be mutually exclusive; each option must be independent from every other option in the list

Radio Lists

Radio buttons can be grouped together by using a text label that describes the radio button group. Radio buttons can be nested inside the list, where all options are mutually exclusive. Selecting any radio button (parent or child nesting) will change the selection status of all other radio button options in the list.

Size

Radio, as checkbox, comes in one size only, as it is a UI element with relatively small width and height. To ensure better accessibility, the text label accompanying the radio should also be interactive and influence the state of the radio.

States

  • Radio statuses follow the same state styling principles as the checkbox component

  • Enabled border/background is Grey L50, and disabled border/background L70

  • Checked background colour is Sky Blue Base

  • Checked and mixed state hover state background colour is Deep Purple Base

  • Validation states are same as for the buttons

Validation

If radio button validation is in place, the required field is indicated by using the red colour of the radio and the text label - the danger state. In case the group of radio buttons need to be validated, it is also coloured in red.