# TextingInput

> Slug: `texting-input` · Category: Form Controls

## When to use

- ONLY as the input slot of a `MenuDropdown` with `variant="texting"`. It wires combobox ARIA attributes for a typeable dropdown.
- When the user types free text into a field that surfaces a menu of suggestions (e.g., autocomplete address line, tag entry).

## When NOT to use

- A type-ahead with a leading magnifier icon (search-style) — use `SearchingInput`.
- A standalone text field — use `TextField`.
- A standalone search bar — use `Search`.

## Variants & decision tree

`TextingInput` differs from `SearchingInput` only in that it does NOT render a leading search icon or clear-button affordance. It is intentionally a thinner combobox shell for menu-driven free-text entry.

## States

Empty, focused, filled, disabled, invalid, expanded (menu open).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `id` | `string` | — | Required. Input id. |
| `menuId` | `string` | — | Required. `aria-controls` target. |
| `labelId` | `string` | — | Required. `aria-labelledby` target. |
| `isExpanded` | `boolean` | — | Required. Whether the menu is open. |
| `disabled` | `boolean` | `false` | Disabled (`aria-disabled` + `readOnly`). |
| `isInvalid` | `boolean` | `false` | Error styling. |
| `describedBy` | `string` | — | Space-separated ids for `aria-describedby`. |
| `inverse` | `boolean` | `false` | Dark-background styling. |
| `focused` | `boolean` | `false` | Force-focus state for demos. |

## Usage examples

```tsx
// Inside MenuDropdown, prefer the high-level prop API:
<MenuDropdown
  id="tag-input"
  label="Tag"
  variant="texting"
  menuItems={suggestions}
  value={text}
  onValueChange={setText}
  onItemSelect={(item) => addTag(item)}
/>

// Direct usage (rare):
<TextingInput
  id="tag-input-el"
  menuId="tag-menu"
  labelId="tag-label"
  isExpanded={open}
  value={text}
  onChange={(e) => setText(e.target.value)}
/>
```

## Composition

Pair with a `MenuDropdown variant="texting"` (preferred) which composes this internally with the menu, label, and selection logic.

## Accessibility

The combobox role and `aria-controls`, `aria-labelledby`, `aria-expanded` are wired through the required props. You MUST render a label element with `labelId` and a menu container with `menuId`. `disabled` correctly applies `aria-disabled` + `readOnly` so the input remains focusable and announces its disabled state.

## Do / Don't

- DO prefer `MenuDropdown variant="texting"` over direct use.
- DO supply all three id props (`id`, `menuId`, `labelId`).
- DON'T use this as a generic text input — use `TextField`.
- DON'T omit `isExpanded` — it drives the combobox state announcement.
