Radio

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

Use the radio component to customize how you present radio buttons. For example, options listed in a table.

In most situations where you want to present a list of radio options, you'll use a radio group.

Anatomy diagram of the radio button. A caption follows this image.

The radio button can appear in two states: a selected state (a filled circle), or unselected (an empty circle).

Include error messages for required or invalid radio fields (for example, Please select an option)
Never preselect a high-risk option, especially if the radio is related to payment, privacy or security. Use the lowest-risk, lowest-change option as the default to ensure that users don’t accidentally opt in when submitting forms.
Don’t use a disabled radio button if it needs to remain in the tab order. Instead, use validation so that screen reader users can perceive the radio button and hear an error message explaining why that option cannot currently be selected.

List options in a logical order:
- most likely to least likely to be selected
- simplest to most complex operation
- least to most risk
Make one radio group option the default. Select the safest, most secure, and private option first. If safety and security aren’t factors, select the most likely or convenient option.
If you need an unselected state, add a radio group with a "None" option.
If you can't have a list of all possible options, add an "Other" option.

Avoid:

Alphabetical orders. This can’t be localized, as it is language-specific.
Numeric choices that overlap (for example, Select age: 0-20, 20-40 — it's unclear which option to select if your age is 20).
Numeric choices that skip a number (for example, Select age: Below 20, Above 20 — there is no option to select if your age is 20).
Long lists of options. If you have a large number of options to choose from, use the select component.

Labels should be concise and provide context.

For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).

We use this feedback to improve our documentation.