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.
Set whether the content is aligned to the vertical start or the center, relative to the radio button. Defaults to
Centered alignment looks good for images.
You can include error messages as well - they will display when the
You can add description text to items:
To render the label text as a heading, you can use the prop
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
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).