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.


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.


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?

Interactive demo



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

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.


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.