# Input

Input is a neobrutalist React component from Cruise UI. A text field with a label above, optional hint and an error state.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/input
```

Import: `import { CruiseInput } from "@/components/cruise/input";`

## When to use

Short free text: names, phone numbers, amounts.

## When not to

Picking from known options (use a Select or Combobox).

## Example (React)

```tsx
import { CruiseInput } from "@/components/cruise/input";

export default function InputExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseInput label="Full name" placeholder="Ada Okafor" hint="As it appears on your ID." />
      <CruiseInput label="Phone number" type="tel" defaultValue="0803" error="Enter an 11-digit number." />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="field">
  <label class="field-label" for="phone">Phone number</label>
  <input class="select" style="padding-right: 14px" id="phone" type="tel" aria-describedby="phone-help">
  <p class="field-help" id="phone-help">We'll text you when the rider leaves.</p>
</div>
```

## Props: CruiseInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `string` | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
| `hint?` | `string` | — | Helper text under the field. |
| `error?` | `string` | — | Error message; turns the border and helper text --danger. |

Also takes every native `<input>` attribute.

## Accessibility

- Always a visible <label> linked with for/id.
- Hints and errors are linked with aria-describedby; errors set aria-invalid.
- 17px text, so iOS doesn't zoom in on focus.