# Text Input Field (/components/forms/text-input-field)
Use `TextInputField` to collect a single line of text. It combines an input with a label,
description, and validation message.
apps/docs/src/examples/text-input-field/basic.tsx
```tsx
import { TextInputField } from '@luke-ui/react/text-input-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-input-field/required.tsx
```tsx
import { Stack } from '@luke-ui/react/stack';
import { TextInputField } from '@luke-ui/react/text-input-field';
export default () => {
return (
);
};
```
## Validation [#validation]
Set `isRequired`, `type`, or `pattern`, or pass `validate` to check the value. `TextInputField`
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-input-field/validation.tsx
```tsx
import { Button } from '@luke-ui/react/button';
import { Cluster } from '@luke-ui/react/cluster';
import { Stack } from '@luke-ui/react/stack';
import { TextInputField } from '@luke-ui/react/text-input-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-input-field/prefix-and-suffix.tsx
```tsx
import { Icon } from '@luke-ui/react/icon';
import { Stack } from '@luke-ui/react/stack';
import { TextInputField } from '@luke-ui/react/text-input-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-input-field/sizes.tsx
```tsx
import { TextInputField } from '@luke-ui/react/text-input-field';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## IDs and refs [#ids-and-refs]
`id`, `className`, and `ref` target the field's root element. Pass `inputId` to set the input's id,
and `inputRef` to reach the input.
## Accessibility [#accessibility]
Luke UI associates the label, description, and error message with the control.
## API [#api]