ChoiceInputField
The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text.
- Deprecated
- Not reviewed for accessibility
Use FormControl instead.
<ChoiceInputField>
<ChoiceInputField.Label>Option one</ChoiceInputField.Label>
<Checkbox />
</ChoiceInputField>
<fieldset style={{margin: 0, padding: 0, border: 0}}>
<ChoiceInputField>
<ChoiceInputField.Label>Option one</ChoiceInputField.Label>
<Radio name="radioExample" value="one" />
</ChoiceInputField>
<ChoiceInputField>
<ChoiceInputField.Label>Option two</ChoiceInputField.Label>
<Radio name="radioExample" value="two" />
</ChoiceInputField>
</fieldset>
<ChoiceInputField disabled>
<ChoiceInputField.Label>Option one</ChoiceInputField.Label>
<Checkbox />
</ChoiceInputField>
<ChoiceInputField>
<ChoiceInputField.Label>Option One</ChoiceInputField.Label>
<Checkbox />
<ChoiceInputField.Caption>Hint: the first and only option</ChoiceInputField.Caption>
</ChoiceInputField>
<>
<ChoiceInputField>
<ChoiceInputField.Label>Option one</ChoiceInputField.Label>
<ChoiceInputField.LeadingVisual>
<MarkGithubIcon />
</ChoiceInputField.LeadingVisual>
<Checkbox />
</ChoiceInputField>
<ChoiceInputField>
<ChoiceInputField.Label>Option two</ChoiceInputField.Label>
<ChoiceInputField.LeadingVisual>
<MarkGithubIcon />
</ChoiceInputField.LeadingVisual>
<Checkbox />
<ChoiceInputField.Caption>This one has a caption</ChoiceInputField.Caption>
</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 |
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 |
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 |
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 |
- 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.