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, Input, MediaInput } from '@zendeskgarden/react-forms';
When to use it
- To let the user enter data into a field.
- For multi-line text, use Textarea instead.
Basic usage
An Input comes with a label indicating what goes into the field.
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Input />
</Field>
);
export default Example;
Hint text
Use Field.Hint to provide additional context alongside the label.
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Evergreen</Field.Label>
<Field.Hint>Foliage throughout the year</Field.Hint>
<Input />
</Field>
);
export default Example;
Validation states
Show success, warning, and error states by passing the validation prop to both Input and Field.Message.
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Input validation="success" />
<Field.Message validation="success">A cactus is a beautiful plant</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Input validation="warning" />
<Field.Message validation="warning">A cactus has thorns</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Input validation="error" />
<Field.Message validation="error">A cactus belongs in the desert</Field.Message>
</Field>
);
export default Example;
Compact size
Use isCompact to render a smaller input, useful in dense layouts.
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Shrub</Field.Label>
<Input isCompact />
</Field>
);
export default Example;
Disabled state
A disabled Input prevents user interaction. It does not appear in the tab order and cannot receive focus.
import React from 'react';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant</Field.Label>
<Input disabled />
</Field>
);
export default Example;
Media input (start and end adornments)
Use MediaInput to display icons or other media at the start and/or end of the input.
import React from 'react';
import { Field, MediaInput } from '@zendeskgarden/react-forms';
import { ReactComponent as StartIcon } from '@zendeskgarden/svg-icons/src/16/search-stroke.svg';
import { ReactComponent as EndIcon } from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
const Example = () => (
<Field>
<Field.Label>Prune</Field.Label>
<MediaInput start={<StartIcon />} end={<EndIcon />} />
</Field>
);
export default Example;
Component structure
<Field>
<Field.Label />
<Field.Hint />
<Input />
<Field.Message />
</Field>
Input with MediaInput:
<Field>
<Field.Label />
<MediaInput start={<Icon />} end={<Icon />} />
</Field>
API reference
Wraps an input and its associated label, hint, and message. Provides accessibility attributes that associate child elements with each other.
Reduces the vertical padding of all child form elements.
Field.Label
Renders a <label> associated with the input inside the Field.
Renders label text at regular font weight instead of bold.
Visually hides the label while keeping it accessible to screen readers.
Field.Hint
Renders supplementary hint text below the label. Nest inside a Field.
Field.Message
Renders a validation message below the input. Applies an icon and color that match the validation value.
body.validation
'success' | 'warning' | 'error'
The validation state that determines the icon and color of the message.
<input> element. Nest inside a Field.
body.validation
'success' | 'warning' | 'error'
Applies validation styling to the input border.
Renders a smaller input with reduced padding.
Places the focus ring inside the element boundary. Useful when the input is flush with an adjacent component.
Prevents user interaction and removes the element from the tab order.
MediaInput
A styled input that accepts start and end slots for icons or other media. Nest inside a Field.
Content rendered at the leading edge of the input.
Content rendered at the trailing edge of the input.
body.validation
'success' | 'warning' | 'error'
Applies validation styling to the input border.
Renders a smaller input with reduced padding.