Concorde UI component — Select. {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"} 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, name="lang", ?lang=fr|en, filterDocsJokes, contains. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html.

Select

Options

<div class="grid gap-3">
      <sonic-select> 
        <option value="">No Selection</option>
        <option value="1">One</option>
        <option value="2" selected>Two (set by "tag")</option>
        <option value="3">Three</option>
      </sonic-select>
      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
              ]'> 
      </sonic-select>
    </div>

Size

<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 size="md"><option>md</option></sonic-select>
      <sonic-select size="default"><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>
    </div>

Multiple

<div class="grid gap-3">
      <sonic-select multiple> 
        <option value="">Choose a number</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </sonic-select>
    </div>

Disabled

<div class="grid gap-3">
      <sonic-select disabled> 
        <option value="">Choose a number</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </sonic-select>
    </div>

Example of use — language filter + queue

name="lang" is sent as ?lang=fr|en to the doc mock API (filterDocsJokes). Same pattern as Input (contains):