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, Select } from '@zendeskgarden/react-forms';
When to use it
- To select from a list on mobile devices, where native pickers provide the best experience.
- To make a selection in performance-constrained environments.
For richer dropdown experiences in Zendesk products — including search, filtering, and multi-select — use Combobox instead. Basic usage
Select wraps a native <select> element. Pass <option> elements as children.
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Houseplant</Field.Label>
<Select>
<option>Fern</option>
<option>Snake plant</option>
<option>Rubber tree</option>
</Select>
</Field>
);
export default Example;
Hint text
Use Field.Hint to provide additional context alongside the label.
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Houseplant</Field.Label>
<Field.Hint>Choose the plant you want to care for</Field.Hint>
<Select>
<option>Fern</option>
<option>Snake plant</option>
<option>Rubber tree</option>
</Select>
</Field>
);
export default Example;
Compact size
Use isCompact to render a smaller Select, useful in dense layouts.
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Houseplant</Field.Label>
<Select isCompact>
<option>Fern</option>
<option>Snake plant</option>
<option>Rubber tree</option>
</Select>
</Field>
);
export default Example;
Disabled state
A disabled Select prevents user interaction.
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Houseplant</Field.Label>
<Select disabled>
<option>Fern</option>
</Select>
</Field>
);
export default Example;
Validation states
Pass the validation prop to both Select and Field.Message.
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Select validation="success">
<option>Cactus</option>
</Select>
<Field.Message validation="success">A cactus is a beautiful plant</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Select validation="warning">
<option>Cactus</option>
</Select>
<Field.Message validation="warning">A cactus has thorns</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Select } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Select validation="error">
<option>Cactus</option>
</Select>
<Field.Message validation="error">A cactus belongs in the desert</Field.Message>
</Field>
);
export default Example;
Component structure
<Field>
<Field.Label />
<Field.Hint />
<Select>
<option />
<option />
</Select>
<Field.Message />
</Field>
API reference
Wraps the Select and its label, hint, and message. Associates child elements for accessibility.
Field.Label
Renders a <label> associated with the Select.
Visually hides the label while keeping it accessible to screen readers.
Field.Hint
Renders supplementary hint text. Nest inside Field.
Field.Message
Renders a validation message. Nest inside Field.
body.validation
'success' | 'warning' | 'error'
Determines the icon and color of the message.
<select> element. Nest inside Field. Pass native <option> elements as children.
body.validation
'success' | 'warning' | 'error'
Applies validation border styling to the Select.
Renders a smaller Select with reduced padding.
Prevents user interaction and removes the element from the tab order.