Design Tokens for Mesh have just been released!
Skip to content

Radio Button

A radio button is used in select scenarios where a conventially styled radio button does not suit the required interaction. Radio buttons should be wrapped in a radio group container.

Installation

bash
npm install @nib-components/radio-button

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling. Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

jsx
import RadioButton from '@nib-components/radio-button';

You are more likely to use this component in conjunction with FormControl and RadioGroup:

jsx

Interactive demo

jsx

Props

PropTypeDefaultDescription
id (required)stringThe input id.
name (required)stringThe input name.
value (required)stringThe input value.
label (required)stringThe input label.
subtitlestringThe radio input subtitle.
boldLabelbooleanfalseWhether the label is bold. If subtitle is provided, the default value changes to true.
selectedbooleanfalseWhether the input is selected.
disabledbooleanfalseWhether the input is disabled.
inlinebooleantrueWhether the input is displayed inline above the sm breakpoint. Set to false to remain stacked for all screens.
formMode (deprecated)stringDefined by the themeCan be one of "white" or "light". Mode support has been shifted to the ModeProvider component instead of here.

In addition to these props, all other props passed to <RadioButton /> will be applied to the underlying <input> as attributes.

Considerations

A radio button is best used as part of an interface and should not be used within a form for gathering user data.

Preselect a default option unless it's important to not influence the users selection.

Don't use a single radio button as once the selection is made the user cannot unselect.