IInput ​

A text field with three sizes, an invalid state, affix slots, and optional clearing, loading and debouncing.

<IInput v-model="value" placeholder="Reference or name" aria-label="Search" />

Sizes ​

<IInput size="sm" placeholder="Small" aria-label="Small" />
<IInput size="md" placeholder="Medium" aria-label="Medium" />
<IInput size="lg" placeholder="Large" aria-label="Large" />

Affixes ​

The leading and trailing slots take real space in the field rather than sitting on top of it, so a long value is never hidden under an icon.

<IInput placeholder="0.00" aria-label="Amount">
  <template #leading>
    <span class="text-muted-foreground">€</span>
  </template>
  <template #trailing>
    <span class="text-sm text-muted-foreground">EUR</span>
  </template>
</IInput>

Clearable and loading ​

clearable adds a clear button whenever the field is non-empty. loading shows a spinner in the trailing area and leaves the field typeable.

<IInput v-model="value" clearable placeholder="Type something, then clear it" aria-label="Clearable" />
<IInput loading placeholder="Searching…" aria-label="Loading" />

Character count ​

showCount puts a count in the trailing area. With maxlength it reads against the limit and turns red in the last tenth, which is also the only time screen readers hear it.

<IInput v-model="handle" show-count :maxlength="20" placeholder="Username" />

Pass countLabel to translate the announcement, as on ITextarea.

Debounce ​

debounce delays the model update, never the displayed text. Blur and Enter flush a pending update, and an external write cancels whatever is queued.

<IInput v-model="query" :debounce="500" placeholder="Model updates 500ms after you stop" aria-label="Debounced" />

Invalid ​

<IInput v-model="email" invalid aria-label="Invalid example" />
<!-- Inside an IFormField this is set for you. -->

Inside an IFormField, invalid is inferred from the field's own state.

Props ​

The field chrome lives on a wrapper element rather than the <input>, so class targets the wrapper; reach the input itself with ui.input.

Attributes such as name, autocomplete, maxlength and aria-label are forwarded to the <input>, and ref exposes the element as .input for focus management.