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 |