Skip to content
Mesh
9.0.1

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.

Usage

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

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

What's your favourite colour?
jsx

Interactive demo

jsx

Props

The surrounding <FormControl /> component will pass down the id and name attributes to the <input>, and set the corresponding for attribute on the <label>.

PropTypeDefaultDescription
id (required)stringThe input id.
name (required)stringThe input name.
value (required)stringThe input value.
label (required)stringThe input label.
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.
formModestringDefined by the themeCan be one of "white" or "light".

In addition to these props, all other props passed to <Textbox /> 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.