> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# TextField
> A text input field with optional label, helper/error text, icon slots, and side labels.
```tsx theme={null}
import { TextField } from "@fanvue/ui";
import type { TextFieldProps, TextFieldSize } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { TextField } from "@fanvue/ui";
```
## Error Without Message
```tsx theme={null}
import { TextField } from "@fanvue/ui";
```
## Side Label (all sizes)
```tsx theme={null}
import { TextField } from "@fanvue/ui";
```
## Without Label
```tsx theme={null}
import { TextField } from "@fanvue/ui";
```
## All States
```tsx theme={null}
import { HomeIcon, InfoCircleIcon, TextField } from "@fanvue/ui";
} />
} />
}
rightIcon={}
/>
```
## Props
## TextField
A text input field with optional label, helper/error text, icon slots, and side labels.
Use `leftLabel` / `rightLabel` for fixed unit or prefix affordances (currency symbol, country code, domain suffix). Provide at least one of `label`, `aria-label`, or `aria-labelledby` for accessibility — a console warning is emitted in development if none are set.
Trailing interactive element pinned to the right edge — typically a `Chip` or `Button` (the "with button" field type). Reduces the right padding so the control sits flush, and clicks on it do not steal focus from the input.
Whether the text field is in an error state.
Error message displayed below the input. Shown instead of `helperText` when `error` is `true`.
Whether the text field stretches to fill its container width.
Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`.
Label text displayed above the input. Also used as the accessible name.
Icon element displayed at the left side of the input.
Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code.
Icon element displayed at the right side of the input.
Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain.
Height of the text field in pixels.
Whether the text field is validated.
## Exported types
Also exported from `@fanvue/ui`: `TextFieldProps`, `TextFieldSize`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)