Concorde UI component — Input. Native attibutes list 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. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html.

Input

Native attibutes list

Label

<sonic-input label="Label"></sonic-input>

Placeholder

<sonic-input placeholder="placeholder"></sonic-input>

Value

<sonic-input value="value"></sonic-input>

Required

<sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>

Description

<sonic-input description="Description goes here" ></sonic-input>

Type

Liste des types

<div class="grid gap-3">
    <sonic-input type="text" label="Text">Text</sonic-input>
    <sonic-input type="email" label="Email" placeholder="plop@kiki.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="#ffff00"></sonic-input>
  </div>

Size

<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 size="md" value="md"></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>
  </div>

List

<sonic-input list="browsers"></sonic-input>
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Google Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

Prefix & suffix

<div class="grid grid-cols-2 gap-3">
    <sonic-input type="search" label="Search" placeholder="Search plane">
      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
    </sonic-input>
    <sonic-input type="number" label="Amount" placeholder="0">
      <sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
    </sonic-input>
  </div>

InlineContent

<div class="grid grid-cols-2 gap-3">
    <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
    </sonic-input>
    <sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
      <div slot="suffix" class="flex gap-2 items-center">
        <sonic-badge type="danger" size="sm">4 max</sonic-badge>
        <sonic-icon library="iconoir" name="euro" ></sonic-icon>
      </div>
    </sonic-input>
  </div>

Example of use — search + queue

Filter with formDataProvider + name="contains" (mock API: substring on joke text). Caption and rows via Lit (@subscribe, .items on sonic-queue):

<sonic-input type="search"  placeholder="Search plane" class="inline-block">
    </sonic-input>
    <sonic-button type="danger" label="Amount" placeholder="0">azdazd
    </sonic-button>