Use radios when a user needs to select one option from a list
- Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here
Use FormControl to render a standard radio input field. This component is only meant to be used in the case that you're building a custom radio that is not yet supported by Primer (For example: the color mode selection in Appearance settings)
If you do use this component to build a custom radio, it should always be accompanied by a corresponding
<label> to improve support for assistive technologies.
Please use a Checkbox if the user needs to select more than one option in a list
name prop to group together related
Radio components in a list.
If you're not building something custom, you should use the RadioGroup component to render a group of radio inputs.
A unique value that is never shown to the user
Required for grouping multiple radios
Modifies true/false value of the native radio
Selects the radio by default in uncontrolled mode
(event: React.ChangeEvent) => void
A callback function that is triggered when the input state has been changed
Modifies the native disabled state of the native checkbox
The underlying element to render — either a HTML element name or a React component.
- Component props and basic example usage of the component are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component does not introduce any performance regressions.
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.