Radio (Radio button group)

A radio button group contains multiple options in a list or form, but allows only one option to be selected among them.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. a definite answer is required in an input with multiple options on form pages.

Don't use when

  1. It need to be used when there is no default selected state.
  2. you only need to allow users to select a multiple option from a list. In this case, consider using a checkbox group.
  3. if you need enable/disable setting or functionality, consider using the toggle switch.
  4. Do not use a radio button when it is selected to change the content and context that follows it. Instead, use a content switcher.

Structure

radio-structure
  1. Radio Button Group label
  2. Radio
  3. Radio button label
  4. Helper text (optional)

Properties

Align

Horizontal

Horizontal alignment is used in form or modal pages when users can select only one option or may trigger another input when necessary. It should be used together with a maximum of 3 radio buttons at the same time.

Vertical

Vertical alignment is used when three or more radio buttons need to be grouped together on setup, onboarding, or form pages.

States

Enabled

The default state is when value is mostly checked, also the radio is unchecked.

Focus

On focused state (while on the tab key), pressing enter will switch between states (selected/unselected). While on focus state (or tab key) the the radio background takes a blue standard ring.

Disabled

When a radio button is disabled, the chosen option cannot be selected or deselected.

Attributes

Input label (boolean)

A radio button group should be used with a label when it is intended to be used as a form input element on forms or modals.

Helper text (boolean)

Helper text can be used when a message needs to be conveyed to the entire radio button group or just each radio button. Try to convey the message in the helper text on each radio button in one sentence, while keeping it concise.

 

Behavior

The first radio button in a radio button group always comes selected by default.

A radio button group listed on the form page must be listed logically. For example, the input that requires the user to choose should be listed first, or the option that is less likely to be used should be listed last.

If you need an unselected state for a radio button that includes only two options, name one of the options as 'Hiçbiri' or use a checkbox according to the context.

If the first listed radio button is disabled and no selection is made, the radio button following it will be selected by default. Alternatively, all radio buttons can be disabled at the same time.

Transition

When the radio is checked (pressed), only the circular area will smoothly transition with a duration of 200ms ease .