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

Design

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.

Design

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.

Design

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. Each step stays visibly distinct at every size.

In the game theme, rounded steps the corners of the pixel frame instead of curving them: small is square, medium cuts a one-step notch, and large cuts a two-step corner. With variant="filled", only the top corners are rounded. The game theme’s filled field has no pixel frame, so rounded doesn’t change it.

Value	Default	Description
`small`		Small corner radius
`medium`	✓	Default corner radius
`large`		Fully rounded (pill)

Multiline

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

Design

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