RadioButton

Use radio buttons when you have a few options that a user can choose from. Never use radio buttons if the user can select more than one option from a list (consider using a Checkbox instead).

You can provide the label as either a string or as a react component. If a string is provided as the label, it will be wrapped with the Text component.

Properties

NameTypeDefault
label

string | React element

Sets a label for the radio button
error

boolean

Sets styles to indicate an error
disabled

boolean

Sets the state of the checkbox disabled
textVerticalAlign

"top" | "center"

Adjusts the vertical alignment of the radio button
"center"

The RadioButton supports margin styled-system props.

Examples



Combinations

disabled

error

error

disabled