TextField

MD3 text field in filled and outlined variants, with floating label, supporting text, character counter, and multiline mode.

Variants

Filled

Outlined

Outlined

<TextField
  variant="outlined"
  label="Email"
  value={email}
  onChange={(event) => setEmail(event.target.value)}
/>

Supporting text & error

Username

Visible to everyone

Password

Too short

The native input

ref points at the root element; use inputRef for the native control, and inputProps for attributes without a dedicated prop:

<TextField
  label="Amount"
  inputRef={inputRef}
  inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
/>

Props

Prop	Type	Default	Description
autoComplete	string	—	Native input `autoComplete`.
defaultValue	string	—	Uncontrolled initial value.
disabled	boolean	false	Disables the input and applies disabled styling.
endIcon	ReactNode	—	Icon at the end of the field (decorative).
error	boolean	false	Error state — error colors, `aria-invalid`, and `errorText`. Ignored while `disabled`.
errorText	string	—	Shown instead of `supportingText` (with `role="alert"`) when `error` is set.
getCounterLabel	((length: number, maxLength: number) => string)	(length: number, maxLength: number) => `Character count: ${length} of ${maxLength}`	Accessible wording for the `maxLength` counter (the visible `3 / 20` is hidden from assistive tech in favor of this text).
id	string	—	Applied to the native input (keeps the floating label association via `htmlFor`).
inputProps	InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>	—	Extra attributes spread on the native `<input>` (or `<textarea>` when `multiline`) — the escape hatch for attributes without a dedicated prop (`pattern`, `min`, `max`, `step`, `onKeyDown`, extra `aria-*`, …). Precedence: the component's own wiring always wins over conflicting `inputProps` keys — the controlled `value` / `onChange` / `onFocus` / `onBlur`, `id`, `className`, and every dedicated input prop the component sets (`type`, `name`, `placeholder`, `required`, `readOnly`, `autoComplete`, `maxLength`, `rows`, …).
inputRef	Ref<HTMLInputElement | HTMLTextAreaElement>	—	Ref to the native `<input>` / `<textarea>` element (the forwarded `ref` points at the root).
label	string	—	Floating label; rendered with a trailing `*` when `required`.
maxLength	number	—	Native input `maxLength`; also shows a `length / maxLength` counter in the supporting line.
multiline	boolean	false	Render a `<textarea>` that auto-grows with its content.
name	string	—	Native input `name`.
onBlur	FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>	—	Blur handler for the input / textarea.
onChange	ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>	—	Native change handler for the input / textarea.
onFocus	FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>	—	Focus handler for the input / textarea.
placeholder	string	—	Native input `placeholder`.
prefixText	string	—	Static text before the input value (e.g. currency symbol).
readOnly	boolean	false	Native input `readOnly`.
required	boolean	false	Marks the input required and appends `*` to the label.
rows	number	2	Initial visible rows of the `multiline` textarea.
startIcon	ReactNode	—	Icon at the start of the field (decorative).
suffixText	string	—	Static text after the input value (e.g. unit).
supportingText	string	—	Helper line below the field. Replaced by `errorText` while in error.
type	string	text	Native input `type` (single-line only).
value	string	—	Controlled input value.
variant	enum	filled	Container style.