# Input

> A text input field for collecting user data

Status: stable. Added in Components 2.0.0.

A styled text input for collecting user data.

## Import

```tsx
import { Input } from '@oztix/roadie-components'
```

## Examples

### Default

```tsx
<Input placeholder='Enter text' />
```

### Sizes

```tsx
<Input size='sm' placeholder='Small' />
<Input size='md' placeholder='Medium (default)' />
<Input size='lg' placeholder='Large' />
```

### Emphasis

```tsx
<Input emphasis='normal' placeholder='Normal emphasis' />
<Input emphasis='subtle' placeholder='Subtle emphasis' />
```

### States

Inputs start neutral, gain an accent-coloured border and ring on focus,
and switch to danger colouring when invalid.

```tsx
{/* Default */}
<Input placeholder='Click to focus' />
{/* Invalid */}
<Input aria-invalid='true' defaultValue='bad-email' />
{/* Disabled */}
<Input disabled placeholder='Disabled' />
```

## Accessibility

- **Label association**: Always pair with a `<label>` (or `Field.Label`) using matching `htmlFor`/`id` attributes.
- **Validation**: Set `aria-invalid="true"` on invalid inputs. `is-interactive-field` provides visual danger styling automatically.
- **Description**: Use `aria-describedby` to link helper or error text to the input.

## API reference

### Input

```tsx
import { Input } from '@oztix/roadie-components/input'
```

- `intent`: `"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null`. Deprecated: Form controls take their colour from state; `is-interactive-field` handles it. Will be removed in v3.0.0.
- `emphasis`: `"normal" | "subtle" | null`.
- `size`: `"sm" | "md" | "lg" | null`.

Docs updated 19 Oct 2026.