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.

<FormControl>
  <FormLabel>Label</FormLabel>
  <Input placeholder="Placeholder" />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>

Variants

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

<TextField label="Solid" placeholder="Type in here…" variant="solid" />
<TextField label="Soft" placeholder="Type in here…" variant="soft" />
<TextField label="Outlined" placeholder="Type in here…" variant="outlined" />
<TextField label="Plain" placeholder="Type in here…" variant="plain" />

Sizes

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

<TextField size="sm" label="Size" placeholder="Small" />
<TextField size="md" label="Size" placeholder="Medium" />
<TextField size="lg" label="Size" placeholder="Large" />

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

<TextField label="Label" placeholder="Type in here…" required />
<TextField label="Label" placeholder="Type in here…" disabled />
<TextField
  label="Label"
  placeholder="Type in here…"
  helperText="This is a helper text"
/>

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!

<TextField
  label="Label"
  placeholder="Type in here…"
  error
  helperText="You got this wrong. Try again!"
/>

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.

<TextField label="Label" placeholder="Type in here…" fullWidth />

Unstyled

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