Documentation Index
Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt
Use this file to discover all available pages before exploring further.
Package: @zendeskgarden/react-forms
import { Field, Radio, Fieldset } from '@zendeskgarden/react-forms';
When to use it
- For choices that cannot occur at the same time.
- To make a mutually exclusive selection between two or more options.
If the user can choose more than one option at once, use Checkbox instead. For a long list of options, use Combobox instead. Basic usage
All Radio buttons in a group share the same name prop so the browser treats them as mutually exclusive. Manage selected state with controlled checked and onChange props.
import React, { useState } from 'react';
import { Field, Radio } from '@zendeskgarden/react-forms';
const Example = () => {
const [radioValue, setRadioValue] = useState('annual');
return (
<div role="group" aria-label="Choose a plant lifecycle">
<Field>
<Radio
name="lifecycle"
value="annual"
checked={radioValue === 'annual'}
onChange={event => setRadioValue(event.target.value)}
>
<Field.Label>Annual</Field.Label>
</Radio>
</Field>
<Field>
<Radio
name="lifecycle"
value="perennial"
checked={radioValue === 'perennial'}
onChange={event => setRadioValue(event.target.value)}
>
<Field.Label>Perennial</Field.Label>
</Radio>
</Field>
</div>
);
};
export default Example;
Hint text
Use Field.Hint inside Radio to add context below the label.
import React, { useState } from 'react';
import { Field, Radio } from '@zendeskgarden/react-forms';
const Example = () => {
const [value, setValue] = useState('annual');
return (
<div role="group" aria-label="Choose a plant lifecycle">
<Field>
<Radio
name="lifecycle-hint"
value="annual"
checked={value === 'annual'}
onChange={e => setValue(e.target.value)}
>
<Field.Label>Annual</Field.Label>
<Field.Hint>Completes its life cycle in one growing season</Field.Hint>
</Radio>
</Field>
<Field>
<Radio
name="lifecycle-hint"
value="perennial"
checked={value === 'perennial'}
onChange={e => setValue(e.target.value)}
>
<Field.Label>Perennial</Field.Label>
<Field.Hint>Returns each year from the same root system</Field.Hint>
</Radio>
</Field>
</div>
);
};
export default Example;
Validation
Use Fieldset and Fieldset.Legend to group the options, and Field.Message to display a validation message for the group.
import React, { useState } from 'react';
import { Fieldset, Field, Radio } from '@zendeskgarden/react-forms';
const lifecycle: Record<string, { validation: 'success' | 'warning' | 'error'; message: string }> = {
annual: { validation: 'success', message: 'Growing all the time' },
perennial: { validation: 'warning', message: 'Growing regularly' },
biennial: { validation: 'error', message: 'Growing slowly' }
};
const Example = () => {
const [radioValue, setRadioValue] = useState('annual');
return (
<Fieldset>
<Fieldset.Legend>Choose a growth type</Fieldset.Legend>
<Field>
<Radio
name="validation-example"
value="annual"
checked={radioValue === 'annual'}
onChange={e => setRadioValue(e.target.value)}
>
<Field.Label isRegular>Annual</Field.Label>
</Radio>
</Field>
<Field>
<Radio
name="validation-example"
value="perennial"
checked={radioValue === 'perennial'}
onChange={e => setRadioValue(e.target.value)}
>
<Field.Label isRegular>Perennial</Field.Label>
</Radio>
</Field>
<Field>
<Radio
name="validation-example"
value="biennial"
checked={radioValue === 'biennial'}
onChange={e => setRadioValue(e.target.value)}
>
<Field.Label isRegular>Biennial</Field.Label>
</Radio>
<Field.Message validation={lifecycle[radioValue].validation}>
{lifecycle[radioValue].message}
</Field.Message>
</Field>
</Fieldset>
);
};
export default Example;
Component structure
<Fieldset>
<Fieldset.Legend />
<Field>
<Radio name="group-name" value="option-a">
<Field.Label />
<Field.Hint />
</Radio>
</Field>
<Field>
<Radio name="group-name" value="option-b">
<Field.Label />
</Radio>
<Field.Message />
</Field>
</Fieldset>
API reference
Wraps a Radio and its label, hint, and message. Associates child elements for accessibility.
Field.Label
Renders a <label> associated with the Radio. Nest inside Radio.
Renders label text at regular font weight instead of bold (default).
Visually hides the label while keeping it accessible to screen readers.
Field.Hint
Renders supplementary hint text. Nest inside Radio.
Field.Message
Renders a validation message. Nest inside Field.
body.validation
'success' | 'warning' | 'error'
Determines the icon and color of the message.
Fieldset
Provides styles for grouping related Field + Radio components.
Fieldset.Legend
Renders a <legend> inside a Fieldset to label the group.
A styled <input type="radio">. Nest inside Field. Place Field.Label and Field.Hint as children.
Groups radio buttons together. All radios sharing a name are mutually exclusive.
The value submitted when this radio is selected.
Controls the selected state (controlled usage).
Sets the initial selected state (uncontrolled usage).
Prevents user interaction and removes the element from the tab order.
body.onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Called when this radio is selected.