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.

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.

Variants

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

Sizes

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

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.

Validation

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

Input decorators

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

Full width

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

Unstyled

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