Radio
Radio buttons let users choose a single option among two or more mutually exclusive options.
- For choices or options that can't occur at the same time
- To indicate that two or more options are mutually exclusive
How to use it
Default
A Radio’s label is part of its touch target.
Disabled
A disabled Radio prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
Hidden label
Radio labels can be hidden.
Hint text
Hint text adds additional context to a Radio label.
Regular weight label
Radio labels are bold by default, but can be regular weight too.
Validation
Success, warning, and danger validation messages are shown using the Message component.
Configuration
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, Fieldset, Hint, Label, Message, Radio } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
Fieldset
Extends FieldsetHTMLAttributes<HTMLFieldSetElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | – | Applies compact styling |
Fieldset.Legend
Extends HTMLAttributes<HTMLLegendElement>
Hint
Extends HTMLAttributes<HTMLDivElement>
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Message
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | VALIDATION | – | Applies validation state styling |
Radio
Extends InputHTMLAttributes<HTMLInputElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | – | Applies compact styling |