Edit page

Radio

Radio allows users to select one option from a set.

Basic Usage

To implement the Radio component, you need to import it first:

import { Radio } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Use Radio for just a few options. For larger sets of many options (say 4 and more) consider using the SelectField component. This will help keep your UI clean and uncluttered and prevent your users from being overwhelmed by too many options.

  • Don't use for boolean (true/false) selection or to toggle things on and off. CheckboxField and Toggle are more suitable for such cases.

  • Use short and descriptive labels, ideally nouns rather than seemingly polite phrases like Please select your favourite fruit. Short labels will help your users accomplish their task faster.

  • Only make the Radio's label invisible when there is another visual clue to guide users through filling the input.

  • When a short label is not enough, use help texts to guide users before they enter anything.

  • Use clear, calm error messages when there's a problem with what they entered.

📖 Read more about checkboxes and radios at Nielsen Norman Group.

Invisible Label

While it may be acceptable for login screens with just a few fields or for other simple forms, it's dangerous to hide labels from users in most cases. Keep in mind you should provide another visual clue so users know what to fill into the input.

Horizontal Layout

The default vertical layout is very easy to use and work with. However, there are situations where horizontal layout suits better — and that's why React UI supports this kind of layout as well.

Help Text

You may provide an additional help text to clarify how the input should be filled.

States

Validation States

Validation states visually present the result of validation of the input. You should always provide a validation message for states other than valid so users know what happened and what action they should take or what options they have.

Disabled State

It's possible to disable just some options or the whole set.

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify React synthetic events or you can add whatever HTML attribute you like. All attributes that don't interfere with the API are forwarded to the native HTML <input>. This enables making the component interactive and helps to improve its accessibility.

👉 Refer to the MDN reference for the full list of supported attributes of the radio input type.

API

Prop nameTypeDefaultRequiredDescription
disabledboolfalsefalse

If true, the input will be disabled.

helpTextnodenullfalse

Optional help text.

idstringundefinedfalse

ID of the root HTML element.

Also serves as base for ids of nested elements:

  • <ID>__labelText
  • <ID>__helpText
  • <ID>__validationText

and of individual options (<input>):

  • <ID>__item__<VALUE>
  • <ID>__item__<VALUE>__label
  • <ID>__item__<VALUE>__labelText

If key in the option definition object is set, then option.key is used instead of option.value in place of <VALUE>.

isLabelVisiblebooltruefalse

If false, the label will be visually hidden (but remains accessible by assistive technologies).

labelstringtrue

Label of the group of options.

layout'horizontal' │ 'vertical''vertical'false

Layout of the field.

Ignored if the component is rendered within FormLayout component as the value is inherited in such case.

optionsArray<{ "disabled": "Boolean", "key": "string", "label": "string", "value": "string │ number" }>true

Set of options to be chosen from.

For generating unique IDs the option.value is normally used. For cases when this is not practical or the option.value values are not unique the option.key attribute can be set manually.

requiredboolfalsefalse

If true, the input will be required.

validationState'invalid' │ 'valid' │ 'warning'nullfalse

Alter the field to provide feedback based on validation result.

validationTextnodenullfalse

Validation message to be displayed.

valuestring │ numberundefinedfalse

Value of the input.

Theming

Head to Forms Theming to see shared form theming options. On top of that, the following options are available for Radio.

Custom PropertyDescription
--rui-FormField--check__input--radio__border-radiusInput corner radius
--rui-FormField--check__input--radio--checked__background-imageChecked input background image (inline, URL, …)