Forms

TextField

Spectrum's field: a label above, a 32px box with a 2px gray border and 8px corners, and help text below.

Preview

Live, in this page’s themeOpen on its own

Props

Also takes the props of React.InputHTMLAttributes<HTMLInputElement>.

Prop	Type	Description
`label`	`React.ReactNode`
`icon`	`IconName`
`help`	`React.ReactNode`
`invalid`	`boolean`
`search`	`boolean`
`size`	`'M' \| 'L'`
`trailing`	`React.ReactNode`
`multiline`	`boolean`	A text area instead of a single line; set `rows` (default 4).
`rows`	`number`
`ariaLabel`	`string`	Names the field for assistive tech when there is no visible label.

Guidelines

Spectrum's field: a label above, a 32px box with a 2px gray border and 8px corners, and help text below. search makes it a pill with a search icon.

Provide: label (or aria-label for search), icon, help, invalid, search, multiline (a text area; set rows), size (M or L), and any native input props.

The 2px field-border is Spectrum's own gray-300, which is light (1.4:1), so every field keeps a visible label or a search icon.
Help text says what happens with the value; error text says how to fix it.