Table of Contents

Radio

Radio buttons let users choose a single option among two or more mutually exclusive options.

Table of Contents

How to use it
Configuration
API

Used for this

For choices or options that can’t occur at the same time
To indicate that two or more options are mutually exclusive

Not for this

If the user can choose more than one option at once, use a Checkbox instead
To select from a long list of options, use Combobox instead

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

Name9.0.0-next.26•View source•View on npm
Installnpm install @zendeskgarden/react-forms
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Radio, Field, Fieldset } from '@zendeskgarden/react-forms'

API

The Radio component follows this structure:

<Field>  <Radio>    <Field.Label />    <Field.Hint />  </Radio>  <Message /></Field>

Field

A Field provides accessibility attributes to its child Radio field by associating it with the corresponding Field.Label and Field.Hint.

Field.Hint

Extends HTMLAttributes<HTMLDivElement>

Nest the Hint within the Radio component.

Field.Label

Extends LabelHTMLAttributes<HTMLLabelElement>

Nest the Label within the Radio component.

Prop name	Type	Default	Description
hidden	boolean		Hides the label visually without hiding it from screen readers
isRegular	boolean		Applies regular (non-bold) font weight

Field.Message

Extends HTMLAttributes<HTMLDivElement>

The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.

Prop name	Type	Default	Description
validation	'success' \| 'warning' \| 'error'		Applies validation state styling
validationLabel	string		Defines the aria-label for the validation icon

Fieldset

Extends FieldsetHTMLAttributes<HTMLFieldSetElement>

The Fieldset component provides styles for grouping child form inputs. Wrap related Field components and a Legend together within a Fieldset component. See validation example usage.

Prop name	Type	Default	Description
isCompact	boolean		Applies compact styling

Fieldset.Legend

Extends HTMLAttributes<HTMLLegendElement>

Nest a Legend within a Fieldset component.

Radio

Extends InputHTMLAttributes<HTMLInputElement>

Nest a Radio within a Field component.

Prop name	Type	Default	Description
isCompact	boolean		Applies compact styling