Skip to main content
The @zendeskgarden/react-forms package provides accessible, styled native form components. Every interactive element pairs with the Field wrapper to establish correct label, hint, and message relationships automatically.

​
Installation

npm install @zendeskgarden/react-forms

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Field

Field is the layout wrapper that provides accessible context to the input, label, hint, and message subcomponents. Place all form controls inside a Field. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Email address</Field.Label>
    <Field.Hint>We will never share your email with anyone.</Field.Hint>
    <Input placeholder="[email protected]" />
    <Field.Message>Enter a valid email address.</Field.Message>
  </Field>
</ThemeProvider>

​
Field subcomponents

​
Field.Label
LabelHTMLAttributes<HTMLLabelElement>
The accessible label for the field. Visually displayed above the input.
​
Field.Hint
HTMLAttributes<HTMLDivElement>
Supplementary hint text displayed below the label.
​
Field.Message
HTMLAttributes<HTMLDivElement>
Validation message displayed below the input.

​
Input

A styled text input that extends all native <input> attributes. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Full name</Field.Label>
    <Input placeholder="Jane Smith" />
  </Field>
</ThemeProvider>

​
Validation states

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Username</Field.Label>
    <Input validation="error" defaultValue="taken_username" />
    <Field.Message validation="error">
      That username is already taken.
    </Field.Message>
  </Field>
</ThemeProvider>
​
isCompact
boolean
Applies compact sizing.
​
isBare
boolean
Removes borders and padding for use inside custom wrappers.
​
focusInset
boolean
Applies inset box-shadow styling on focus.
​
validation
'success' | 'warning' | 'error'
Applies validation state styling.

​
MediaInput

A text input with optional start and end icon slots. Useful for search fields, URL inputs, and inputs with action buttons. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, MediaInput } from '@zendeskgarden/react-forms';
import SearchIcon from '@zendeskgarden/svg-icons/src/16/search-stroke.svg';

<ThemeProvider>
  <Field>
    <Field.Label>Search</Field.Label>
    <MediaInput start={<SearchIcon />} placeholder="Search..." />
  </Field>
</ThemeProvider>
​
start
ReactElement
Icon or element rendered at the start of the input.
​
end
ReactElement
Icon or element rendered at the end of the input.
​
wrapperProps
object
HTML attributes applied to the FauxInput wrapper element.
​
wrapperRef
Ref
Ref applied to the FauxInput wrapper element.

​
Textarea

A styled multi-line text input with optional auto-resize support. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Textarea } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Description</Field.Label>
    <Textarea minRows={3} maxRows={8} placeholder="Describe the issue..." />
  </Field>
</ThemeProvider>
​
minRows
number
Sets the minimum height in rows. Enables auto-resize when combined with maxRows.
​
maxRows
number
Sets the maximum height in rows before the textarea scrolls.
​
isResizable
boolean
Enables manual vertical resize. Mutually exclusive with auto-resize.
​
isCompact
boolean
Applies compact sizing.
​
isBare
boolean
Removes borders and padding.
​
focusInset
boolean
Applies inset box-shadow styling on focus.
​
validation
'success' | 'warning' | 'error'
Applies validation state styling.

​
Checkbox

A styled checkbox input. Wrap in Field for accessible label association. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Checkbox } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Checkbox>
      <Field.Label>Subscribe to newsletter</Field.Label>
    </Checkbox>
  </Field>
</ThemeProvider>

​
Indeterminate state

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Checkbox } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Checkbox indeterminate>
      <Field.Label>Select all items</Field.Label>
    </Checkbox>
  </Field>
</ThemeProvider>
​
indeterminate
boolean
Sets the checkbox to an indeterminate visual state. Does not affect the checked value.
​
isCompact
boolean
Applies compact sizing.

​
Radio

A styled radio button input. Group multiple radios inside a Fieldset with a Legend for accessible grouping. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Fieldset, Field, Radio } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Fieldset>
    <Fieldset.Legend>Preferred contact method</Fieldset.Legend>
    <Field>
      <Radio name="contact" value="email">
        <Field.Label>Email</Field.Label>
      </Radio>
    </Field>
    <Field>
      <Radio name="contact" value="phone">
        <Field.Label>Phone</Field.Label>
      </Radio>
    </Field>
    <Field>
      <Radio name="contact" value="sms">
        <Field.Label>SMS</Field.Label>
      </Radio>
    </Field>
  </Fieldset>
</ThemeProvider>
​
isCompact
boolean
Applies compact sizing.

​
Toggle

A styled switch input with role="switch". Use in place of a checkbox when the action takes immediate effect. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Toggle } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Toggle>
      <Field.Label>Enable notifications</Field.Label>
    </Toggle>
  </Field>
</ThemeProvider>
​
isCompact
boolean
Applies compact sizing.

​
Range

A styled range slider input. The lower track fill updates automatically as the value changes. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Range } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Volume</Field.Label>
    <Range min={0} max={100} step={5} defaultValue={40} />
  </Field>
</ThemeProvider>
​
min
number
default:"0"
Minimum value of the range.
​
max
number
default:"100"
Maximum value of the range.
​
step
number
default:"1"
Step increment between values.

​
Select

A styled native <select> element. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Select } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Country</Field.Label>
    <Select>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="gb">United Kingdom</option>
    </Select>
  </Field>
</ThemeProvider>
​
isCompact
boolean
Applies compact sizing.
​
isBare
boolean
Removes borders and padding.
​
focusInset
boolean
Applies inset box-shadow styling on focus.
​
validation
'success' | 'warning' | 'error'
Applies validation state styling.

​
InputGroup

Groups multiple inputs, buttons, or other elements into a single visual unit. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, InputGroup, Input } from '@zendeskgarden/react-forms';
import { Button } from '@zendeskgarden/react-buttons';

<ThemeProvider>
  <Field>
    <Field.Label>Invite by email</Field.Label>
    <InputGroup>
      <Input placeholder="[email protected]" />
      <Button isPrimary>Send</Button>
    </InputGroup>
  </Field>
</ThemeProvider>
​
isCompact
boolean
Applies compact sizing to all child inputs.

​
Fieldset

Groups multiple related fields (checkboxes or radios) with an accessible legend. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Fieldset, Field, Checkbox } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Fieldset>
    <Fieldset.Legend>Notification preferences</Fieldset.Legend>
    <Field>
      <Checkbox name="prefs" value="email">
        <Field.Label>Email updates</Field.Label>
      </Checkbox>
    </Field>
    <Field>
      <Checkbox name="prefs" value="sms">
        <Field.Label>SMS alerts</Field.Label>
      </Checkbox>
    </Field>
  </Fieldset>
</ThemeProvider>
​
isCompact
boolean
Applies compact styling to all child inputs.

​
Tiles

A radio-group alternative rendered as clickable tile cards. Useful for plan selectors, category pickers, and icon-based choices. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tiles } from '@zendeskgarden/react-forms';
import StarIcon from '@zendeskgarden/svg-icons/src/26/star-stroke.svg';

<ThemeProvider>
  <Tiles name="plan" onChange={e => console.log(e.target.value)}>
    <Tiles.Tile value="starter">
      <Tiles.Icon>
        <StarIcon />
      </Tiles.Icon>
      <Tiles.Label>Starter</Tiles.Label>
      <Tiles.Description>Up to 5 users</Tiles.Description>
    </Tiles.Tile>
    <Tiles.Tile value="pro">
      <Tiles.Icon>
        <StarIcon />
      </Tiles.Icon>
      <Tiles.Label>Pro</Tiles.Label>
      <Tiles.Description>Unlimited users</Tiles.Description>
    </Tiles.Tile>
  </Tiles>
</ThemeProvider>
​
name
string
required
The name attribute shared across all tile radio inputs.
​
value
string
The selected value in a controlled Tiles component.
​
onChange
ChangeEventHandler<HTMLInputElement>
Called when the selected tile changes.
​
isCentered
boolean
default:"true"
Centers tile content horizontally and vertically.

​
FileUpload

A drop zone wrapper for file input interactions. Works alongside react-dropzone or native input elements. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, FileUpload, FileList, File } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Attachments</Field.Label>
    <FileUpload>
      Drag files here or <span>browse</span>
    </FileUpload>
    <FileList>
      <File type="pdf">report.pdf</File>
    </FileList>
  </Field>
</ThemeProvider>
​
isDragging
boolean
Applies active drag styling when a file is being dragged over the drop zone.
​
isCompact
boolean
Applies compact sizing.
​
disabled
boolean
Disables interaction.
FileUpload renders as a role="button" div for broad compatibility with drag-and-drop libraries like react-dropzone. Wire up drag events and input click handlers manually.

​
FauxInput

A div that visually matches the Input component. Use it to build custom input-like containers that hold non-native elements. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { FauxInput } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <FauxInput isFocused={false} isHovered={false}>
    Custom content
  </FauxInput>
</ThemeProvider>
​
isFocused
boolean
Applies focus styling.
​
isHovered
boolean
Applies hover styling.
​
isCompact
boolean
Applies compact sizing.
​
isBare
boolean
Removes borders and padding.
​
focusInset
boolean
Applies inset box-shadow styling on focus.
​
readOnly
boolean
Applies read-only styling.
​
disabled
boolean
Applies disabled styling.
​
validation
'success' | 'warning' | 'error'
Applies validation state styling.

​
Validation states

All input components accept a validation prop that applies visual feedback. 
<Field>
  <Field.Label>Password</Field.Label>
  <Input validation="success" type="password" value="••••••••" readOnly />
  <Field.Message validation="success">Password meets requirements.</Field.Message>
</Field>

​
Compact mode

All form components accept an isCompact prop for use in dense interfaces. On Fieldset and InputGroup, the compact prop propagates to all child inputs automatically. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input, Textarea } from '@zendeskgarden/react-forms';

<ThemeProvider>
  <Field>
    <Field.Label>Subject</Field.Label>
    <Input isCompact placeholder="Brief summary" />
  </Field>
  <Field>
    <Field.Label>Body</Field.Label>
    <Textarea isCompact minRows={2} placeholder="Full message" />
  </Field>
</ThemeProvider>

Build docs developers (and LLMs) love

Get started for freeTalk to us