TextField

A form component for text input. Built on Base UI Field and Base UI Input to provide label, input area, and helper text in a single component. Use the multiline prop to render a <textarea> instead of <input>.

Preview

Name

We'll never share your email.

Examples

Variant

Controls the visual style of the input field.

Value	Default	Description
`outline`	✓	Default bordered input style.
`filled`		Filled background. Use when you need to distinguish from other form elements.

Outline

Filled

Status

Indicates validation state. Border and helper text colors change based on status.

Value	Default	Description
`default`	✓	Default state.
`error`		Validation failed. Use helperText for the error message.
`success`		Validation passed. Use helperText for the success message.

Default

Error

Success

Looks good!

Size

Controls the input field size.

Value	Default	Description
`small`		For dense forms.
`medium`	✓	General form use.
`large`		When a larger input area is needed.
`xlarge`		When a large input area is needed.

Rounded

Controls the corner radius.

Value	Default	Description
`small`		Small corner radius
`medium`	✓	Default corner radius
`large`		Large corner radius

Multiline

When true, renders a <textarea> instead of <input>. Use the rows prop to set the default height.

Bio

Guidelines

Showing error state

Use status="error" with helperText to explain what went wrong. A clear message helps users understand what to fix.


<TextField
  label="Email"
  status="error"
  helperText="Please enter a valid email address."
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

Props

Prop

Default

Type

size?

"medium"

"small" | "medium" | "large" | "xlarge"

rounded?

"medium"

"small" | "medium" | "large"

variant?

"outline"

"outline" | "filled"

status?

"default"

"default" | "error" | "success"

label?

—

string

helperText?

—

string

fullWidth?

false

boolean

name?

—

string

required?

—

boolean

validate?

—

multiline?

false

boolean

rows?

3

number