# Text Field (/docs/components/forms/text-field)
Use `TextField` for a single text input with label, description, validation, and optional adornments
built in.
## Best practices [#best-practices]
| Guidance | Practices |
| -------- | --------------------------------------------------------------------------------------------------------------------------- |
| Do | Use `label` for every field where possible. It works better with assistive technology and autofill than `aria-label` alone. |
| Don't | Use `placeholder` as a label substitute. It disappears after typing and often fails colour contrast requirements. |
## Required fields [#required-fields]
Use `isRequired` and `necessityIndicator` to communicate mandatory fields. `'icon'` renders a visual
required marker. `'label'` appends "(required)" to the label text.
## Validation [#validation]
Pass field-level validation through React Aria `Form`. Use `errorMessage` to render the validation
message.
```tsx
import { Form } from 'react-aria-components';
;
```
## Adornments [#adornments]
Use `adornmentStart` and `adornmentEnd` to place non-editable content inside the input chrome.
Adornments accept any `ReactNode`. If an adornment is interactive, you are responsible for its
semantics.
## Size [#size]
`size` controls height and typography. The HTML numeric `` attribute is intentionally
omitted because `size` is reserved for the design-system variant.
| Value | Description |
| ---------- | --------------------- |
| `'small'` | Compact input height. |
| `'medium'` | Default input height. |
## Accessibility [#accessibility]
When visual context already communicates purpose, you may omit `label` and provide an accessible
name with `aria-label` or `aria-labelledby` on the field.
```tsx
```
## Primitive [#primitive]
Use the [TextInput primitive](/docs/components/primitives/text-input) when you need the input
without the label, description, and error slots that `TextField` provides.
## Props [#props]