Radio Buttons

Radio buttons allow users to see all available choices at once and select just one option.

☝️ Research insight: During dunning cycle testing, users were concerned about accidentally clicking "next" and confirming a large payment. We can help users avoid this mistake by not preselecting radio buttons.


Avoid pre-selecting radio buttons related to important processes (e.g. financial transactions) to reduce mistakes.




Radio Alignment

Set whether the content is aligned to the vertical start or the center, relative to the radio button. Defaults to start.



Centered alignment looks good for images.

Error messages

You can include error messages as well - they will display when the status is invalid.

Item descriptions

You can add description text to items:


To render the label text as a heading, you can use the prop labelIsHeading

Optional field

In some cases, you may want to render the RadioButtons component as an optional field in your form. To display it as an optional field, you can use the prop optional

Strongly typed values and options

You can use generics with JSX to type what the radio options should be.

Click "edit example code" to check the syntax (You'll notice that Docz can't highlight it properly yet, but believe us, it works).

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.