Text Field

A single-line text input component for collecting user input such as names, emails, search queries, and other short text entries.

Overview

Large is 48px tall, matching a large Button. Medium (default), small and tiny step down from there.

size \ state	enabled	error	disabled
large		Enter a valid email address
medium		Enter a valid email address
small		Enter a valid email address
tiny		Enter a valid email address

Supports text, password, email, number, tel, url, and search types.

A required field marks its label with an asterisk.

Name

Email*

multiline renders a textarea with maxRows rows (default 6).

Use the onSubmit prop to handle submission when the user presses Ctrl+Enter (or Cmd+Enter on Mac).

When label is set it renders a <label> tied to the input by id.

With error set, the input gets aria-invalid and aria-describedby pointing at the errorText message.

The number, tel, email, url and search types set a matching inputMode, so mobile devices show a suitable keyboard.

Prop	Type	Required	Description
id	string	Yes	—
label	string	No	—
value	string	Yes	—
type	'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'	No	—
onChange	(e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => void	Yes	—
onBlur	(e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void	No	—
onFocus	(e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void	No	—
onKeyDown	(e: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void	No	—
onSubmit	() => void	No	—
autoFocus	boolean	No	—
multiline	boolean	No	—
maxRows	number	No	—
disabled	boolean	No	—
error	boolean	No	—
errorText	string	No	Message shown under the field when `error` is true
required	boolean	No	—
size	'large' \| 'medium' \| 'small' \| 'tiny'	No	—
placeholder	string	No	—
name	string	No	—
autoComplete	string	No	Browser autofill hint, e.g. "username" or "current-password". Defaults to "off".
tabIndex	number	No	—