# Input

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop         | Effect                                               |
| ------------ | ---------------------------------------------------- |
| `isSmall`    | Renders the smaller input with `text-200` sizing.    |
| `hasError`   | Applies the error style to signal invalid input.     |
| `hasWarning` | Applies the warning style to signal a caution state. |

## Props / API

### `Input`

| Prop         | Type      | Default | Description                                      |
| ------------ | --------- | ------- | ------------------------------------------------ |
| `hasError`   | `boolean` | `false` | Applies the error style.                         |
| `hasWarning` | `boolean` | `false` | Applies the warning style.                       |
| `isSmall`    | `boolean` | `false` | Renders the smaller size with `text-200` sizing. |

Extends `InputHTMLAttributes<HTMLInputElement>`. All standard `<input>` attributes are forwarded to the underlying `<input>` via `...rest`.

## States

- Default (idle)
- Hover
- Focus-visible
- Error
- Warning
- Disabled
- Read-only

## Code examples

```tsx
import { useState } from "react";
import { Input } from "@mylighthouse/prism-react";

export default function InputExample(): React.JSX.Element {
  const [value, setValue] = useState("");

  return (
    <label>
      Email
      <Input
        type="email"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </label>
  );
}
```

## A11y intent

_[Design to fill]_

- The control is a real native `<input>`, so keyboard operation, focus, and value handling are handled correctly.
- Always associate a visible label with the input so its purpose is announced.
- `hasError` / `hasWarning` are visual only, don't rely on color alone to signal validity.
- The `disabled` input is removed from the tab order, while `readOnly` keeps the value focusable and announced.

## Cross-references

_[Design to fill]_