Skip to content
Mesh
5.2.3

Radio Group

Radio group is a container for radio inputs and is used where two or more radio inputs are required. A radio group can accomodate two styles of radio inputs — a radio icon or radio button.

Installation

bash
npm install @nib-components/radio-group

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx
import RadioGroup from '@nib-components/radio-group';

Interactive demo

Radio icon style

Rate us
jsx

Button style

Rate us
jsx

Props

As the <RadioGroup/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

All props passed directly to <RadioGroup/> will be applied to the underlying <input> as attributes.

PropTypeDefaultDescription
options (required)objectThe group options. A key-value pair object of the radio value-label
valuestring or numberThe selected value.
componentstring or React componentRadioThe component used to render a radio.

Considerations

Radio inputs are used when there are a number of options available and the user may select only one option at any time. Selecting one radio input deselects the others.

When a user is able to select multiple options at once use Checkbox.

Order radio options from most likely to least likely to be selected.

When there are 6 or more options consider using a Select.