Concorde UI component — Select. sonic-select wraps a native <select> with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child <option> tags or from the options attribute (JSON). Bind the value Doc ID: core/components/ui/form/select/select. Keywords: Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, , options, formDataProvider, name, valueKey, value, wordingKey. URL: https://concorde.supersoniks.org/core/components/ui/form/select.

Select

sonic-select wraps a native <select> with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child <option> tags or from the options attribute (JSON). Bind the value to a store with formDataProvider and name, set on the field or on an ancestor.

Basic example

<sonic-select label="Cabin class" description="Pick one.">
      <option value="">No selection</option>
      <option value="economy">Economy</option>
      <option value="premium" selected>Premium</option>
      <option value="business">Business</option>
      <option value="first">First</option>
    </sonic-select>

Options

options takes an array of objects; valueKey (default value) and wordingKey (default wording) name the keys to read. An option with selected sets the initial value; with no value and nothing selected, the first option is used.

<sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>

Size and status

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

<div class="grid gap-3">
      <sonic-select size="2xs"><option>2xs</option></sonic-select>
      <sonic-select size="xs"><option>xs</option></sonic-select>
      <sonic-select size="sm"><option>sm</option></sonic-select>
      <sonic-select><option>default</option></sonic-select>
      <sonic-select size="lg"><option>lg</option></sonic-select>
      <sonic-select size="xl"><option>xl</option></sonic-select>
      <sonic-select size="2xl"><option>2xl</option></sonic-select>
      <sonic-select status="success"><option>success</option></sonic-select>
      <sonic-select status="error"><option>error</option></sonic-select>
      <sonic-select status="warning"><option>warning</option></sonic-select>
      <sonic-select status="info"><option>info</option></sonic-select>
      <sonic-select status="primary"><option>primary</option></sonic-select>
      <sonic-select disabled><option>disabled</option></sonic-select>
    </div>

Filtering a list

name="direction" writes to the store used as dataFilterProvider by a sonic-queue, which sends it as ?direction= to the mock API: switch between departures and arrivals.

API reference