Skip to content
Edit this page

Text Field

Text fields let users enter and edit text.

Introduction

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

<TextField />

Playground

Component

After installation, you can start building with this component using the following basic elements:

import TextField from '@mui/joy/TextField';

export default function MyApp() {
  return <TextField placeholder="Search anything…" />;
}

Composition

TextField is composed of smallar components－FormControl, FormLabel, FormerHelperText, and Input. You can either use each one of them separately or plainly use the TextField itself.

This is a helper text.

Press Enter to start editing

Variants

The text field component supports the four global variants: solid (default), soft, outlined, and plain.

Press Enter to start editing

Sizes

The text field component comes with three sizes out of the box: sm, md (the default), and lg.

Press Enter to start editing

Colors

Toggle the palette that's being used to color the by text field by using the color prop.

Form props

Standard form attributes are supported e.g. required, disabled, type, etc. as well as a helperText which is used to give context about a field's input, such as how the input will be used.

This is a helper text

Press Enter to start editing

Validation

To toggle the error state, use the error prop. And, to provide feedback about the error to the user, use the helperText prop.

You got this wrong. Try again!

Press Enter to start editing

Input decorators

Use the startDecorator and/or endDecorator props to add supporting icons or elements to the text field.

New stuff

Full width

To make the text field take up the full width of its container, use the fullWidth prop.

Press Enter to start editing

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.