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.

Configurations

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

Variants

Vertical

Horizontal

Radio Alignment

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

Start

Center

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:

Heading

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).