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:
Some random description
<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:
Some random 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 />