---
title: "Text field"
description: "A labelled text box with its help and error message, in one line. Use multiline for notes; Input and TextArea are the boxes alone, for compositions of your own."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text field

## Labelled and described

```tsx
import { TextField } from '@arbol-ai/ui';

<div className="grid max-w-sm gap-4">
  <TextField description="As it appears on their ID document." isRequired label="Full name" />
  <TextField autoComplete="email" label="Email" placeholder="ana@example.com" type="email" />
</div>
```

## Validation

The error replaces the description while the value is invalid. Here the app validates as the person types.

```tsx
import { useState } from 'react';
import { TextField } from '@arbol-ai/ui';

const EmailExample = () => {
  const [email, setEmail] = useState('ana@');
  const isInvalid = email !== '' && !/^\S+@\S+\.\S+$/u.test(email);
  return (
    <TextField
      className="max-w-sm"
      description="We send the confirmation there."
      errorMessage="Enter an email like ana@example.com."
      isInvalid={isInvalid}
      label="Email"
      onChange={setEmail}
      type="email"
      value={email}
    />
  );
};

<EmailExample />
```

## Multiline

The text area grows with what is typed.

```tsx
import { TextField } from '@arbol-ai/ui';

<TextField
  className="max-w-sm"
  description="Only your team sees it."
  label="Note for the front desk"
  multiline
  placeholder="Bring the referral order."
/>
```

## Input and TextArea alone

Outside a field they are native elements: name them with aria-label.

```tsx
import { Input, TextArea } from '@arbol-ai/ui';

<div className="grid max-w-sm gap-3">
  <Input aria-label="Campaign name" defaultValue="October reminders" />
  <TextArea aria-label="Message" defaultValue="Hi! Your appointment is tomorrow at 9:00." />
</div>
```

## Source

The examples above are [`src/components/text-field/text-field.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/text-field/text-field.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/text-field/index.mdx