# Text Field (/components/forms/text-field)
Use `TextField` to collect a single line of text. It combines an input with a label, description,
and validation message.
apps/docs/src/examples/text-field/basic.tsx
```tsx
import { TextField } from '@luke-ui/react/text-field';
export default () => {
return (
);
};
```
## Labels and placeholders [#labels-and-placeholders]
Give the field a visible `label` where possible. Use `placeholder` for an example value or input
format, not as the label. A placeholder disappears while someone types and is not a reliable
accessible name.
When a nearby heading already names the field, omit `label`. Use `aria-label` or `aria-labelledby`
instead.
```tsx
```
## Required fields [#required-fields]
Set `isRequired` for required fields. `necessityIndicator="icon"` adds a visual marker.
`necessityIndicator="label"` appends “(required)” to the label.
apps/docs/src/examples/text-field/required.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { TextField } from '@luke-ui/react/text-field';
export default () => {
return (
);
};
```
## Validation [#validation]
Set `isRequired`, `type`, or `pattern`, or pass `validate` to check the value. `TextField` shows its
validation message after validation fails. Pass `errorMessage` only for an error you already have,
such as one from a form library or your server. A non-empty message marks the field invalid. Read
[Validation](/docs/validation) for where messages come from, server errors, and how to write them.
apps/docs/src/examples/text-field/validation.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Button } from '@luke-ui/react/button';
import { TextField } from '@luke-ui/react/text-field';
import type { SubmitEvent } from 'react';
export default () => {
function handleSubmit(event: SubmitEvent) {
event.preventDefault();
}
return (
);
};
```
## Prefix and suffix [#prefix-and-suffix]
Use `prefix` and `suffix` for content inside the input, such as a search icon, currency code, or URL
scheme. Both accept any `ReactNode`. Give an interactive prefix or suffix an accessible name and
keyboard behaviour.
apps/docs/src/examples/text-field/prefix-and-suffix.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { TextField } from '@luke-ui/react/text-field';
export default () => {
return (
}
/>
);
};
```
## Size [#size]
Use `size` to set the input height and typography. Use `small` in compact layouts. `medium` is the
default. The HTML numeric `size` attribute is unavailable because `size` is the Luke UI variant.
apps/docs/src/examples/text-field/sizes.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { TextField } from '@luke-ui/react/text-field';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## Accessibility [#accessibility]
Give the field a visible `label` where possible. A placeholder is not a reliable accessible name.
Luke UI associates the label, description, and error message with the control.
## Related components [#related-components]
Use the [InputGroup primitives](/components/primitives/input-group) when you need an input without
the label, description, and error slots. Also use them for a composition that `prefix` and `suffix`
cannot express.
## API [#api]