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