# Input

**`sonic-input`** wraps a native `<input>` with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (`type`, `placeholder`, `pattern`, `min`, `max`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.

## Basic example

<sonic-code>
  <template>
    <sonic-input label="Name" placeholder="Ada Lindqvist" description="As it appears on your passport."></sonic-input>
  </template>
</sonic-code>

## Type

With no `type`, the input is `text`. Text-like types (`email`, `password`, `date`, `number`, `color`, `search`, …) are supported; `radio`, `checkbox` and `range` have dedicated components. `password` adds a visibility toggle.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-input type="text" label="Text"></sonic-input>
      <sonic-input type="email" label="Email" placeholder="ada@example.com"></sonic-input>
      <sonic-input type="password" label="Password"></sonic-input>
      <sonic-input type="date" label="Date"></sonic-input>
      <sonic-input type="number" label="Number"></sonic-input>
      <sonic-input type="color" label="Color" value="#ffcc00"></sonic-input>
    </div>
  </template>
</sonic-code>

## Size and status

With no `size`, the input uses the base scale. `status` colors the field; it defaults to `default`.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-input size="2xs" value="2xs"></sonic-input>
      <sonic-input size="xs" value="xs"></sonic-input>
      <sonic-input size="sm" value="sm"></sonic-input>
      <sonic-input value="default"></sonic-input>
      <sonic-input size="lg" value="lg"></sonic-input>
      <sonic-input size="xl" value="xl"></sonic-input>
      <sonic-input size="2xl" value="2xl"></sonic-input>
      <sonic-input status="success" value="success"></sonic-input>
      <sonic-input status="error" value="error"></sonic-input>
      <sonic-input status="warning" value="warning"></sonic-input>
      <sonic-input status="info" value="info"></sonic-input>
    </div>
  </template>
</sonic-code>

## Validation

`required`, `pattern`, `minlength` and the native type rules are checked by the browser. Feedback styles apply once the field is `touched` (after blur).

<sonic-code>
  <template>
    <sonic-input required type="email" label="Email" placeholder="ada@example.com"></sonic-input>
  </template>
</sonic-code>

## Prefix and suffix

Slotted content sits outside the field by default. Set `inlineContent` to draw it inside; clicking it then focuses the input unless `disableInlineContentFocus` is set.

<sonic-code>
  <template>
    <div class="grid grid-cols-2 gap-3">
      <sonic-input type="search" label="Search" placeholder="Search flights">
        <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
      </sonic-input>
      <sonic-input inlineContent type="number" label="Checked bags" placeholder="0">
        <sonic-badge slot="suffix" type="danger" size="sm">4 max</sonic-badge>
      </sonic-input>
    </div>
  </template>
</sonic-code>

## Form data

Fields sharing the same `formDataProvider` and `name` stay in sync. The attribute is looked up on ancestors, so set it once on a wrapper.

<sonic-code>
  <template>
    <div formDataProvider="inputDemoForm" class="grid grid-cols-2 gap-3">
      <sonic-input name="city" label="City" value="Lisbon"></sonic-input>
      <sonic-input name="city" label="Same field"></sonic-input>
    </div>
  </template>
</sonic-code>

`sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields.

<sonic-code>
  <template>
    <div formDataProvider="inputDemoPassword" class="grid grid-cols-2 gap-3">
      <sonic-input type="password" name="password" label="Password"></sonic-input>
      <sonic-input type="password" name="confirm" sameValueAs="password" label="Confirm password"></sonic-input>
    </div>
  </template>
</sonic-code>

## Filtering a list

The input writes `q` to the store used as `dataFilterProvider` by a `sonic-queue`; `inputDelayMs` debounces the requests while typing. Search a city, an airport or a flight number.

<docs-lit-demo for="docs-flight-search-demo"></docs-lit-demo>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `type` | `text` · `email` · `password` · `number` · `date` · `search` · `color` · … (default `text`) | Native input type |
| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
| `label` | string (HTML) | Label; or use the `label` slot |
| `description` | string (HTML) | Help text under the field; or use the `description` slot |
| `name` | string | Key in the form store (dot notation allowed) |
| `value` | string | Initial value |
| `formDataProvider` | string | Store id; inherited from the closest ancestor |
| `placeholder` | string | Native placeholder |
| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
| `pattern` · `min` · `max` · `step` · `minlength` · `maxlength` | native | Native constraints |
| `inputmode` · `autocomplete` · `list` · `src` · `tabindex` | native | Passed to the inner `<input>` |
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
| `inlineContent` | boolean | Renders prefix and suffix inside the field (forced for `password`) |
| `disableInlineContentFocus` | boolean | Clicking inline content does not focus the input |
| `showPasswordToggle` | boolean | Visibility toggle (forced for `password`) |
| `sameValueAs` | string | Name of a field whose value becomes this field's `pattern` |
| `inputDelayMs` | number | Debounces value updates while typing |
| `autoActive` | boolean | Sets `active` whenever the value is not empty |
| `active` | boolean | Reflected state for styling |
| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
| `forceAutoFill` | boolean | Lets properties override `type` / `label` / `description` / `name` attributes |

| Slot | Description |
|------|-------------|
| `label` | Rich label content |
| `description` | Rich help text |
| `prefix` | Content before the input |
| `suffix` | Content after the input |
| `list` | Extra content after the description |