TextField

A labelled text input with description + error wiring.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

• Use it when Collect a single line of free text — name, email, search term.
• Reach for something else when A fixed set of choices (Select/RadioGroup) or long multi-line input.

Accessibility

Always render a visible <label> (the label prop wires htmlFor/id for you). Errors set aria-invalid and are announced via aria-describedby. Required fields expose aria-required.

Import

const { TextField } = window.PrismDesignSystem_39d121;

Examples

With description

<TextField label="Work email" type="email"
  description="Used only for sign-in." isRequired />

Invalid

<TextField label="Workspace name" isInvalid
  errorMessage="This name is already taken." />

Leading icon

<TextField label="Amount" leadingIcon={<DollarSign />} defaultValue="2,400.00" />

Props

Prop	Type	Required	Description
label	string	—
description	string	—	Helper text shown under the label; linked via aria-describedby.
errorMessage	string	—	Shown when isInvalid; linked via aria-describedby + aria-invalid.
isRequired	boolean	—
isInvalid	boolean	—
isDisabled	boolean	—
multiline	boolean	—	Render a <textarea> instead of <input>.
leadingIcon	React.ReactNode	—	Icon node placed inside the start of the field.
type	string	—
placeholder	string	—
value	string	—
defaultValue	string	—
onChange	(e: React.ChangeEvent) =&gt; void	—
id	string	—
className	string	—