# Input

> Text input field component for forms with consistent styling and accessibility

## Installation

```bash
pnpm add @wandercom/design-system-web
```

## Usage

```tsx
import { Input } from '@wandercom/design-system-web/ui/input';

export function Example() {
  return <Input type="email" placeholder="Email" />;
}
```

## Examples

```tsx
import { Input } from "@wandercom/design-system-web";

export function InputVariants() {
  return (
    <div className="flex max-w-sm flex-col gap-8">
      <div className="flex flex-col gap-2">
        <label className="text-body text-secondary" htmlFor="default-size">
          Default size
        </label>
        <Input id="default-size" placeholder="Enter your name" type="text" />
      </div>
      <div className="flex flex-col gap-2">
        <label className="text-body text-secondary" htmlFor="small-size">
          Small size
        </label>
        <Input
          id="small-size"
          placeholder="Enter your name"
          size="sm"
          type="text"
        />
      </div>
      <div className="flex flex-col gap-2">
        <label className="text-body text-secondary" htmlFor="disabled">
          Disabled
        </label>
        <Input id="disabled" placeholder="Enter your name" type="text" />
      </div>
      <div className="flex flex-col gap-2">
        <label className="text-body text-secondary" htmlFor="invalid">
          Invalid
        </label>
        <Input
          aria-invalid="true"
          defaultValue="Invalid value"
          id="invalid"
          placeholder="Invalid input"
          type="text"
        />
      </div>
    </div>
  );
}

```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| size?: | `'default' | 'sm'` | Size variant of the input. Defaults to default. |
| type?: | `string` | HTML input type (text, email, password, file, etc.). Defaults to text. |
| placeholder?: | `string` | Placeholder text displayed when input is empty. |
| disabled?: | `boolean` | Disables the input field when true. |
| className?: | `string` | Additional CSS classes to apply. |
| ref?: | `React.Ref<HTMLInputElement>` | Forward ref to the underlying input element. |