Text Fields

Text Fields

Text fields allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input.

TextField

The TextField wrapper component is a complete form control including a label, input and help text.

Some important text

Please select your currency

Please select your currency

Full width!

Components

TextField is composed of smaller components (FormControl, InputLabel, Input, and FormHelperText) that you can leverage directly to significantly customize your form inputs.

You might also have noticed that some native HTML input properties are missing from the TextField component. This is on purpose. The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use inputProps (and InputProps, InputLabelProps properties) if you want to avoid some boilerplate.

Some important helper text

Disabled

Error

Layout

TextField, FormControl allow the specification of margin to alter the vertical spacing of inputs. Using none (default) will not apply margins to the FormControl, whereas dense and normal will as well as alter other styles to meet the specification.

Some important text

Some important text

Some important text

Input Adornments

Input allows the provision of InputAdornment. These can be used to add a prefix, a suffix or an action to an input.

Kg

Kg

$

Kg

Weight

Inputs

Formatted inputs

You can use third-party libraries to format an input. You have to provide a custom implementation of the <input> element with the inputComponent property.

The following demo uses the react-text-mask and react-number-format libraries.

Customized inputs

If you have been reading the overrides documentation page but you are not confident jumping in, here's an example of how you can change the main color of an Input.

With icon

Icons can be specified as prepended or appended.