# UI: TextField

> A labelled text input with an optional description and error message.

Source: https://pithyx.org/docs/reference/sdk/ui/text-field/
Markdown: https://pithyx.org/docs/reference/sdk/ui/text-field.md

A labelled text input with an optional description and error message. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### TextFieldProps

The props of [TextField](#textfield): React Aria's text field props plus label, hints and an error.

#### Extends

- `Omit`\<`AriaTextFieldProps`, `"className"` \| `"children"`\>

#### Properties

##### label

```ts
label: ReactNode;
```

The visible label, also the accessible name.

##### description?

```ts
optional description?: ReactNode;
```

A hint below the input, announced with it.

##### errorMessage?

```ts
optional errorMessage?: ReactNode;
```

The text shown while the field is invalid (`isInvalid` or a failed `validate`).

##### placeholder?

```ts
optional placeholder?: string;
```

A hint inside the empty input; never a replacement for the label.

##### className?

```ts
optional className?: string;
```

Extra class names for the field, added after its own.

##### inputClassName?

```ts
optional inputClassName?: string;
```

Extra class names for the input element.

##### autoCapitalize?

```ts
optional autoCapitalize?: "none" | "characters";
```

"none" for user names and codes, so phones do not capitalize the first letter.

##### trailing?

```ts
optional trailing?: ReactNode;
```

Trailing content inside the input frame, for example a reveal button.

## Functions

### TextField()

```ts
function TextField(props): Element;
```

A labelled text input with an optional description and error message. Set `autoComplete` as the form needs it
(`username`, `email`), so password managers and browsers fill it in.

#### Parameters

| Parameter | Type                                | Description                                                                                                |
| --------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `props`   | [`TextFieldProps`](#textfieldprops) | React Aria's text field props (`value`, `onChange`, `isRequired`, `validate`) plus label, hints and error. |

#### Returns

`Element`

The field with label, input, description and error.

#### Example

```tsx
<TextField label="Name" value={name} onChange={setName} isRequired />
```