Boxes for checking and unchecking single values in forms.
isChecked prop determines when this controlled component is checked.
This an example of how to use many
Radio components at once.
Here are a few points to note:
idis then passed as the second argument to
isCheckedperforms a comparison to see if the
idmatches the value of
isDisabled prop visually and functionally disabled the radio button. It also visually disables the related label.
hasError prop can be used to visually represent an error.
This prop only changes the radio button’s color. It should be used alongside an error message that helps users advance through the form.
It’s possible to provide complex UIs to the
children prop. Clicking on the content will select the related radio button.
This example puts the label content within
children. It’s also possible to not provide
undefined and use a custom
label instead. In that case, you must use
Radio input by default is vertically center-aligned with
children prop spans over multiple lines and you want it to align at the top, it is possible to provide
radioVerticalAlign prop as
Radio buttons that have the same name attribute are in the same radio button group. Only one radio in a group can be selected at a time. All of the radio buttons in the group must share a value that is unique to the page. This is required for keyboard navigation.
Function that runs when a new radio button is selected. It receives the new boolean value
and the provided
id as such:
(isChecked: boolean, id?: string) => void
Disable the input and the label.
Text or elements that appear within the label. If
children is not provided, the developer
must use the
id prop to associate it with a custom
id is added to the radio button as an HTML attribute and passed to the
Boolean that determines if the radio is checked.
required HTML attribute.
Makes the radio and text color red.
Determine that padding that gets applied to the label. This can be used
to increase the label’s click target. The value supplied should be a
string with a unit such as
A selector hook into the React component for use in automated testing environments. It is
applied internally to the
<input /> element.
Determines how the radio button input will be vertically aligned relative to
This prop can be one of the following 2 types: