TextField

Text Fields let users enter and edit text.

Basic usage

The TextField needs a label.

<TextField label="E-mail" />

Adding adornments

You can add adornments by supplying startAdornment and endAdornment props:

<TextField label="E-mail" startAdornment={() => <User />} />
<TextField
  label="E-mail"
  endAdornment={() => (
    <IconButton variant="standard">
      <Eye />
    </IconButton>
  )}
/>

Description

You can add description to TextField using the description prop:

<TextField label="E-mail" description="Some random description" />

States

Error

You can set validationState prop to invalid to get a nice visual representation of an error:

<TextField label="E-mail" validationState="invalid" description="Some random error" />

Disabled

You can disable the TextField using the isDisabled prop:

<TextField label="E-mail" isDisabled />