# ASTextField

`ASTextField` renders a themed single-line input. Use `multiline` for a textarea; see [multiline fields](./multiline-text-fields.md).

```tsx
<ASTextField
  aria-label="Email address"
  type="email"
  value={email}
  onChange={setEmail}
  errorMessage={emailError}
/>
```

`value` makes the field controlled; `defaultValue` supplies an initial uncontrolled value. `onChange` receives the next string. `size` defaults to `ComponentSize.Medium`, and `onEnter` receives the current single-line value. Supply an accessible name using a label associated with `id`, `aria-label`, or `aria-labelledby`.

## Validation feedback

`errorMessage?: string` displays a message below the control and marks the input invalid. The field generates a message ID and adds it to `aria-describedby`, preserving existing IDs and the multiline character-counter association. An empty or whitespace-only message removes the feedback. The input remains mounted when the message changes, preserving focus and uncontrolled values.

Consumers own validation and clear the message when appropriate. A non-empty message takes precedence over `aria-invalid={false}`. You can use `aria-invalid` alone and render external feedback instead. Messages are descriptive text, not automatic live announcements.

## Appearance

The field inherits its theme, accepts a complete `theme`, or accepts partial `themeOverrides`. Error styling uses `components.textfield.invalidBorderColor`, `invalidColor`, `invalidContainerBackground`, and `invalidFocusOutlineWidth`. The message uses `invalidColor` and the field's font family. See the [theme reference](./theme-reference.md) for defaults and spacing options.

The field and message share a layout wrapper. `className` and `style` continue to target the control container; use a parent layout to position the entire field and its message.