# Input

## Example

```svelte
<script>
	import { Input } from '@foxui/all';
</script>

<h3>Primary</h3>

<div class="flex w-fit flex-col gap-4">
	<Input sizeVariant="sm" placeholder="Enter text here (small)" />
	<Input placeholder="Enter text here (default)" />
	<Input sizeVariant="lg" placeholder="Enter text here (large)" />
</div>

<h3>Secondary</h3>

<div class="flex w-fit flex-col gap-4">
	<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
	<Input variant="secondary" placeholder="Enter text here (default)" />
	<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
</div>
```

## Documentation

## Usage

```svelte
<Input sizeVariant="sm" placeholder="Enter text here" bind:value />
```

## API Reference

### Input
A styled text input field.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `-` | The current value of the input. (bindable) |
| type | `string` | `-` | The HTML input type (text, email, password, number, etc.). Excludes "file". |
| variant | `'primary' | 'secondary'` | `'primary'` | The visual variant of the input. |
| sizeVariant | `'default' | 'sm' | 'lg'` | `'default'` | The size of the input. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLInputElement` | `-` | The underlying DOM element. (bindable) |