# Input

Single-line text input with label, hint, and error states.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Controlled value. |
| `defaultValue` | `string` | — | Uncontrolled initial value. |
| `placeholder` | `string` | — | Placeholder shown when the input is empty. |
| `label` | `string` | — | Label rendered above the input. |
| `hint` | `string` | — | Helpful hint shown below the input. |
| `error` | `string` | — | Error message shown below the input — replaces the hint and applies error styling. |
| `disabled` | `boolean` | `false` | Disable the input. |
| `type` | `"number" \| "text" \| "email" \| "password" \| "tel" \| "url"` | `text` | HTML input type. |
| `onChange` | `((value: string) => void)` | — | Change handler — receives the new value. |

## Default

**`Default.stories.tsx`**

```tsx
import { Input } from '../../../src/pixie/Input.js';

export default () => <Input placeholder="Type here..." />;
```

## With label and hint

**`WithLabelAndHint.stories.tsx`**

```tsx
import { Input } from '../../../src/pixie/Input.js';

export default () => (
  <Input label="Display name" placeholder="e.g. Tudor" hint="Visible to other users." />
);
```

## Error state

**`ErrorState.stories.tsx`**

```tsx
import { Input } from '../../../src/pixie/Input.js';

export default () => (
  <Input label="Email" defaultValue="not-an-email" error="Enter a valid email address." />
);
```

## Disabled

**`Disabled.stories.tsx`**

```tsx
import { Input } from '../../../src/pixie/Input.js';

export default () => <Input label="API key" defaultValue="sk-…" disabled />;
```