The Radio component allows us to choose a single option within a selection list.
$ yarn add @nimbus-ds/radio
# or
$ npm install @nimbus-ds/radioThe component is composed of a bullet or selection button with their respective states, in addition to a label that displays the content referring to the option.
We use this component when we need the user to enter information in a form, checking a single option within a list of up to 7 items.
This variant has less visual prominence, so it can be used in vertical selection lists, such as in settings or registration forms.
This variant has more visual prominence, so it can be used in horizontal lists as criteria within a data filter.
The component has 3 states, which can be used according to the context and need of the application.
- Rest - is used to represent an unselected option
- Checked - is used to represent a selected option
- Disabled - is used to represent that an option is disabled, this state can be combined with the previous 2
The component must always be accompanied by a label that clearly describes the option represented, always starting with the first capital letter, and sentences must never end in a semicolon. The options must be sorted using a specific logical criteria (alphabetic, numerical, temporal, etc.).
To facilitate navigation for people with some kind of visual or cognitive limitation, this component has a tag (Aria Label) to inform the current status of the Radio.
- Selection of items in lists where the choice is mandatory
- Select a single setting from a list of options
- Select - Can be used to select a single option from a list of more than 7 items
- Toggle - Can be used to toggle binary options on and off
- Checkbox - Can be used to select multiple options from a list
View docs here.
