On this page
ChoiceInputField
The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text.
On this page
Deprecation
Use FormControl instead.
Examples
Checkbox
Radio
Disabled field
With a caption
With a LeadingVisual
Props
ChoiceInputField
The container that handles the layout and passes the relevant IDs and ARIA attributes it's children.
ChoiceInputField.Label and ChoiceInputField.Input are required children.
| Name | Type | Default | Description |
|---|---|---|---|
| children Required | ChoiceInputField.Label | ChoiceInputField.Caption | ChoiceInputField.LeadingVisual | Checkbox | Radio | ||
| disabled | boolean | false | Whether the field is ready for user input |
| id | string | a generated string | The unique identifier for this field. Used to associate the label, validation text, and caption text |
ChoiceInputField.Label
A ChoiceInputField.Label must be passed, but it may be visually hidden.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The title that describes the choice input |
ChoiceInputField.Caption
If this field needs additional context, a ChoiceInputField.Caption may be used to render hint text.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content (usually just text) that is rendered to give contextual info about the field |
ChoiceInputField.LeadingVisual
If the selectable option would be easier to understand with a visual, the ChoiceInputField.LeadingVisual component may be used.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The visual to render before the choice input's label |
Status
Alpha
- 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.
Beta
- 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.
Stable
- 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.