Concorde UI component — 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 val Doc ID: core/components/ui/form/input/input. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component, , type, placeholder, pattern, min, max, formDataProvider, name. URL: https://concorde.supersoniks.org/core/components/ui/form/input.

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-input label="Name" placeholder="Ada Lindqvist" description="As it appears on your passport."></sonic-input>

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.

<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>

Size and status

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

<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>

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-input required type="email" label="Email" placeholder="ada@example.com"></sonic-input>

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.

<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>

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.

<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>

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

<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>

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.

API reference