NordSecurity.Design

Radio

Overview

Radio buttons allow users to make a single selection from a set of options.

When to use

  • To present multiple options where only one can be selected.
  • When selection doesn’t take immediate effect and requires form submission.

When not to use

  • For binary settings with instant application. Use a toggle instead.
  • When the user can select more than one option from a list. Use a checkbox instead.
  • It is not recommended to use a radio button when you have more than 6 options to choose from. Consider using select instead.

Anatomy

  1. Radio
  2. RadioInput
  3. Label

Variants & States

States

Radio button states are default, hover, disabled, and hasError. Radio button selection states are checked=true and checked=false. The focus state is globally defined, and no special adjustment is made to this component. Radio buttons can be configured to display checked, unchecked, or disabled.

radioGroup

Radio buttons are always displayed as a part of a radioGroup component with two or more options. The vertical spacing between radio buttons is spacing-3.

Internationalization

For RTL (right-to-left), the layout of the radio button is mirrored.

Properties

Name Type Values Description
checked Boolean true
false		 Specifies whether the radio should be checked by default
disabled Boolean true
false		 Sets the radio to appear disabled, preventing user interaction
required Boolean true
false		 Specifies if the radio is required
value String Text that represents the value of the radio when it’s checked
id String Defines a unique identifier for the radio

Usage Guidelines

DoUse radio buttons to select only one option from a list.
Don’tUse radio buttons to select multiple items.
DoUse radio button when you need a clear answer that requires form submission.
Don’tDon't use radio buttons for on/off settings that work right away. Use a toggle for that.
DoKeep radio button labels short for easy scanning.
Don’tUse lengthy text labels that make it hard for a user to scan choce optios.

Content Guidelines

We use radio buttons for selecting one option from a small set. When additional context is needed, we group options under an introduction text or question.

Voice and tone

We keep the tone neutral, helpful, and user-focused, addressing the user as “you.”

Label

  • We aim for 1-3 words.
  • We do not truncate radio button label text with an ellipsis.
  • We use plain language.
  • We keep all options in a parallel structure.
  • We use sentence case.
  • We do not use end punctuation.
DoWhen would you like to use the feature? With VPN only / Always
Don’tWhen would you like to use the feature? Use the feature only when the VPN connection is active. / Always

Accessibility

We give screen readers enough information. They should announce the radio button’s label, role, and selected state. When available, the position within the group may also be announced.

DoChoose when Scam Protection is active. Only with VPN. Selected. Radio button. 1 of 2.
Don’tOption 1. Only with VPN