RadioReady

Radio buttons are graphical user interface elements that allow user to choose only one option from a predefined set of mutually exclusive options.

Open in new window

View RTL

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1"></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1" checked></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio checked label="Checked" disabled></nord-radio>
    <nord-radio label="Unchecked" disabled></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1" hide-label></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset required label="Required">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1"></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1">
      <div slot="hint">
        Hint is an accessible way to provide <strong>additional information</strong> that might help the user
      </div>
    </nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio name="test" value="1">
      <label slot="label">Label <span style="color: var(--n-color-status-success)">with color</span></label>
    </nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio
      label="Option 1"
      name="test"
      value="1"
      hint="Hint is an accessible way to provide additional information that might help the user"
    ></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

<nord-fieldset label="Radios">
  <nord-stack direction="vertical">
    <nord-radio label="Option 1" name="test" value="1" error="This field is required"></nord-radio>
    <nord-radio label="Option 2" name="test" value="2"></nord-radio>
  </nord-stack>
</nord-fieldset>

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	Controls whether the checkbox is checked or not.	`boolean`	`false`
`label`	`label`	Label for the input.	`string`	`""`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	`undefined`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the input.	`string \| undefined`	`undefined`
`error`	`error`	Optional error to be shown with the input. Alternatively use the error slot.	`string \| undefined`	`undefined`
`required`	`required`	Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.	`boolean`	`false`
`hideRequired`	`hide-required`	Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.	`boolean`	`false`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the form component.	`string`	`""`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	`undefined`

Events

Event	Description	Type
`input`	Fired as the user types into the input.	`NordEvent`
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`

Slots

Slot name	Description
`label`	Use when a label requires more than plain text.
`hint`	Optional slot that holds hint text for the input.
`error`	Optional slot that holds error text for the input.

Methods

Method name	Parameters	Description
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Use a radio component when users can only select one option from a list.
Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.
Radio buttons are grouped by their name attribute. Therefore, it is crucial that the same name is used for a group of radios.
Give each radio within a group a unique value.
Radios must be used in combination with a fieldset component.
In most cases, a stack component should be used to layout a group of radio buttons.

Don’t #

Don’t place interactive content (buttons, links etc) inside the label.
Don’t use when a user can select more than one option. In this case, use a checkbox instead.
Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.
When you have more than 10 options to choose from. Consider using a select instead.

Content guidelines #

Radio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:

User settings

Option 1

When writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks

My Tasks

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

Blue

Blue.

Do not use commas or semicolons at the end of each line

Patient

Patient;

Additional considerations #

Hint text can be used to offer further information or explanation for an option.
Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include "None of the above" or "I do not know" if they are valid options.
In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.