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>

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.