---

## Input
Text input with labels, validation states, icons, and clearable functionality.
Supports outlined, filled, and ghost visual variants with automatic ARIA linking.

**Import:** `import { Input } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Input label="Email" placeholder="name@example.com" required />
```

### Variants
- intent: danger, default, success, warning (default: default)
- variant: filled, ghost, outlined, underline (default: outlined)
- size: lg, md, sm, xl, xs (default: md)
- disabled: true (default: false)
- hasLeftIcon: true (default: false)
- hasRightIcon: true (default: false)
- iconPosition: left, right (default: left)
- messageType: error, helper (default: helper)
- readonly: true (default: false)
- required: true (default: false)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLInputAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'size' | 'class' | 'disabled' | 'readonly' | 'children') |
| ...InputVariants | `VariantProps` | no |  | Styling variants from InputVariants |
| autoComplete | `string` | no |  | HTML autocomplete hint for browser autofill. |
| children | `Snippet` | no |  | Snippet content rendered below the input for advanced layouts. |
| class | `string` | no |  | Extra classes merged onto the root wrapper element. |
| clearable | `boolean` | no | false | Show a clear button when the input has a value. Press Escape or click the button to clear. Fires `onClear` after clearing. |
| disabled | `boolean` | no | false | Whether the Input is disabled and non-interactive |
| error | `string` | no |  | Error message below the input. When set, overrides `helper` and forces danger border styling regardless of `intent`. |
| helper | `string` | no |  | Helper text below the input — hidden when `error` is present. |
| label | `string` | no |  | Label text displayed above the input, auto-linked via `for`/`id`. |
| leftIcon | `Snippet` | no |  | Icon snippet rendered on the left side of the input field. |
| leftIconAriaLabel | `string` | no |  | Accessible label for the clickable left icon button. Required when `onLeftIconClick` is set so screen-reader users hear a name for the button (icons inside are `aria-hidden`). |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the input element. |
| onClear | `() => void` | no |  | Fired after the value is cleared via the clear button or Escape key. |
| onLeftIconClick | `() => void` | no |  | When provided, the left icon becomes a clickable button. |
| onRightIconClick | `() => void` | no |  | When provided, the right icon becomes a clickable button. |
| persistDebounceMs | `number` | no | 300 | Debounce interval (ms) for storage writes. |
| persistKey | `string` | no |  | Key for persisting the input value to storage. |
| persistNamespace | `string` | no |  | Namespace (e.g. user id) to scope the persist key. |
| persistStorage | `'localStorage' | 'sessionStorage'` | no | 'localStorage' | Storage backend for persistence. |
| persistVersion | `number` | no | 1 | Version stamp included in the storage key. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Input: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| readonly | `boolean` | no | false | Readonly property for the Input component |
| required | `boolean` | no | false | Adds a required asterisk to the label and sets the native `required` attribute. |
| rightIcon | `Snippet` | no |  | Icon snippet rendered on the right side of the input field. |
| rightIconAriaLabel | `string` | no |  | Accessible label for the clickable right icon button. Required when `onRightIconClick` is set so screen-reader users hear a name for the button (icons inside are `aria-hidden`). |
| slotClasses | `Partial<Record<InputSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: wrapper (root — what `class` also targets) | container | base (the `<input>` element) | label | message | iconContainer | iconButton | iconDecoration. |
| unstyled | `boolean` | no |  | Remove all default tv() classes — only user-provided classes apply. |
| intent | `'danger' | 'default' | 'success' | 'warning'` | no | default | Controls the color theme and semantic meaning of the Input. Affects the overall appearance and user perception. Available options: danger, default, success, warning. |
| variant | `'filled' | 'ghost' | 'outlined' | 'underline'` | no | outlined | Controls the visual style and presentation of the Input. Determines the component's visual treatment. Available options: filled, ghost, outlined, underline. |
| size | `'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Input. Affects the component's physical footprint. Available options: lg, md, sm, and 2 more. |
| hasLeftIcon | `'true'` | no | false | Controls the hasLeftIcon behavior and appearance of the Input component. Available options: true. |
| hasRightIcon | `'true'` | no | false | Controls the hasRightIcon behavior and appearance of the Input component. Available options: true. |
| iconPosition | `'left' | 'right'` | no | left | Controls the iconPosition behavior and appearance of the Input component. Available options: left, right. |
| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the Input component. Available options: error, helper. |
| tier | `'commit' | 'modify'` | no | modify | Controls the tier behavior and appearance of the Input component. Available options: commit, modify. |

Inherited from:
- Omit<InputVariants, 'error'> (omit-pattern)
- Omit<HTMLInputAttributes, 'size' | 'class' | 'disabled' | 'readonly' | 'children'> (omit-pattern)