TextField is used for user input. You would use it in forms when user input is required or for search. A TextField may be a single line or have multiple lines (textarea). Look into Forms for more on how to add labels and group inputs together.

For information on TextField/TextArea and Form style and usage guidelines, check out TextField Design Guidelines and Form Design Guidelines.

Example

A default TextField.

 
 
<TextField placeholder="placeholder text"/>
<TextField placeholder="placeholder text"/>

Text Areas

In order to have a multi-line text field, you must set it as a textarea. You can then define how many lines you would like the TextField to be.

 
 
<TextField lines="4" as="textarea" placeholder="placeholder text for textarea"/>
<TextField lines="4" as="textarea" placeholder="placeholder text for textarea"/>

Error State

You may provide styling for error state via the error prop - the border color will change and the respective icon will show on the right side. The TextField will not do any automatic text validation - you must manually trigger the error style. Look into Form on form validation. You may choose between default, error, warning, and success.

 
 
<Box>
    <TextField error="default" mb="xs" placeholder="default state"/>
</Box>
<Box>
    <TextField error="error" mb="xs" placeholder="error state"/>
</Box>
<Box>
    <TextField error="warning" mb="xs" placeholder="warning state"/>
</Box>
<Box>
    <TextField error="success" placeholder="success state"/>
</Box>
<Box>
    <TextField error="default" mb="xs" placeholder="default state"/>
</Box>
<Box>
    <TextField error="error" mb="xs" placeholder="error state"/>
</Box>
<Box>
    <TextField error="warning" mb="xs" placeholder="warning state"/>
</Box>
<Box>
    <TextField error="success" placeholder="success state"/>
</Box>

Other Styling

You may disable a TextField via the disabled prop. You could also add an svg icon without changing the error state via the icon prop.

 
 
<Box mb="xs">
    <TextField disabled placeholder="disabled"/>
</Box>
<Box>
    <TextField icon={<Icon type="errorAlert"/>} placeholder="with an error icon!"/>
</Box>
<Box mb="xs">
    <TextField disabled placeholder="disabled"/>
</Box>
<Box>
    <TextField icon={<Icon type="errorAlert"/>} placeholder="with an error icon!"/>
</Box>

Ref forwarding to input

Any ref to <TextField/> is fowarded to the actual input element. Hence you can do things like focus().

Common Props

TextField includes COMMON and COLOR common props. Read Common Props for details and API. These common props will override component props such as the color.