# 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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-code>
  <template>
    <sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
  </template>
</sonic-code>

## Size and status

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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](/docs/misc/docs-mock-api): switch between departures and arrivals.

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

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `name` | string | Key in the form store (dot notation allowed) |
| `value` | string | Initial value |
| `formDataProvider` | string | Store id; inherited from the closest ancestor |
| `options` | JSON array | Options as objects; alternative to child `<option>` tags |
| `valueKey` | string (default `value`) | Option key used as value |
| `wordingKey` | string (default `wording`) | Option key used as text |
| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
| `status` | `default` · `success` · `error` · `warning` · `info` · `primary` | Field color |
| `label` | string (HTML) | Label; or use the `label` slot |
| `description` | string (HTML) | Help text under the field; or use the `description` slot |
| `required` · `disabled` · `autofocus` | boolean | Native flags |
| `multiple` | boolean | Native multiple selection; only one value is stored |
| `selectSize` | number | Native `size` (visible rows) |
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
| `forceAutoFill` | boolean | Lets properties override `label` / `description` / `name` attributes |

| Slot | Description |
|------|-------------|
| *(default)* | `<option>` elements |
| `label` | Rich label content |
| `description` | Rich help text |
| `prefix` | Content before the select |
| `suffix` | Content after the select |