components select

components/select

Import: import { Select } from "@tundralibs/ui/select"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Select

Select(props: SelectProps): Html

A single-choice select that looks and behaves like the Combobox (same field, caret, list, keyboard navigation) — minus free typing. Two controls, one value: a native <select> carries name and submits (and is what a no-JS page shows); the combobox UI is what an enhanced page shows, and select.js keeps the two in step both ways. Give it an id or name so the list and options get stable ids.

Types

SelectOption

Prop	Type	Required	Description
value	string	yes
label	string	yes
disabled	boolean
lead	Html		Rendered before the label in the list, and beside the value in the closed field — a flag, an avatar, a colour swatch, a brand mark. The library ships no flag artwork; pass your own (see CountryCode.flag).

SelectProps

Prop	Type	Required	Description
id	string		Goes on the visible control (so a label's for reaches it).
name	string
value	string
placeholder	string
options	SelectOption[]	yes
disabled	boolean
required	boolean
invalid	boolean
extraClass	string
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Options with a lead

lead is any Html before the label in the list, and beside the value in the closed field — a flag, an avatar, a colour swatch.

Select({
  id: "market",
  name: "market",
  value: "de",
  options: [{ value: "fr", label: "France", lead: flags.fr }, {
    value: "de",
    label: "Germany",
    lead: flags.de,
  }],
})

<div class="select" data-select>
  <select class="select__native" id="market-native" name="market">
    <option value="fr">France</option>
    <option value="de" selected>Germany</option>
  </select>
  <div class="combobox select__ui" data-combobox data-select-ui>
    <div class="combobox__anchor">
      <div class="combobox__field">
        <span class="select__lead" data-select-lead aria-hidden="true">
          <svg width="20" height="14" width="24" height="16" width="24" width="24" width="24" …>…</svg>
        </span>
        <input type="hidden" value="de" data-combobox-value>
        <input class="combobox__input" id="market" type="text" role="combobox" readonly autocomplete="off" value="Germany" placeholder="" aria-expanded="false" aria-controls="market-list" aria-autocomplete="none">
        <span class="combobox__caret">
          <svg width="15" height="15" width="2" …>…</svg>
        </span>
      </div>
      <div class="combobox__list" id="market-list" role="listbox" hidden>
        <div class="combobox__option" role="option" id="market-opt-0" aria-selected="false" data-value="fr">
          <span class="combobox__option-lead">
            <svg width="20" height="14" width="24" height="16" width="8" height="16" width="8" height="16" …>…</svg>
          </span>
          <span class="combobox__option-label">France</span>
        </div>
        <div class="combobox__option" role="option" id="market-opt-1" aria-selected="true" data-value="de">
          <span class="combobox__option-lead">
            <svg width="20" height="14" width="24" height="16" width="24" width="24" width="24" …>…</svg>
          </span>
          <span class="combobox__option-label">Germany</span>
          <span class="combobox__check">
            <svg width="15" height="15" width="2" …>…</svg>
          </span>
        </div>
        <div class="combobox__hints">
          <span>&uarr;&darr; navigate</span>
          <span>&crarr; select</span>
          <span class="combobox__count">2 matches</span>
        </div>
      </div>
    </div>
  </div>
</div>

A plan picker

Looks like the combobox; a native <select> carries name and is what submits.

Select({
  id: "plan",
  name: "plan",
  value: "team",
  options: [{ value: "free", label: "Free" }, { value: "team", label: "Team" }, {
    value: "enterprise",
    label: "Enterprise",
  }],
})

<div class="select" data-select>
  <select class="select__native" id="plan-native" name="plan">
    <option value="free">Free</option>
    <option value="team" selected>Team</option>
    <option value="enterprise">Enterprise</option>
  </select>
  <div class="combobox select__ui" data-combobox data-select-ui>
    <div class="combobox__anchor">
      <div class="combobox__field">
        <input type="hidden" value="team" data-combobox-value>
        <input class="combobox__input" id="plan" type="text" role="combobox" readonly autocomplete="off" value="Team" placeholder="" aria-expanded="false" aria-controls="plan-list" aria-autocomplete="none">
        <span class="combobox__caret">
          <svg width="15" height="15" width="2" …>…</svg>
        </span>
      </div>
      <div class="combobox__list" id="plan-list" role="listbox" hidden>
        <div class="combobox__option" role="option" id="plan-opt-0" aria-selected="false" data-value="free">
          <span class="combobox__option-label">Free</span>
        </div>
        <div class="combobox__option" role="option" id="plan-opt-1" aria-selected="true" data-value="team">
          <span class="combobox__option-label">Team</span>
          <span class="combobox__check">
            <svg width="15" height="15" width="2" …>…</svg>
          </span>
        </div>
        <div class="combobox__option" role="option" id="plan-opt-2" aria-selected="false" data-value="enterprise">
          <span class="combobox__option-label">Enterprise</span>
        </div>
        <div class="combobox__hints">
          <span>&uarr;&darr; navigate</span>
          <span>&crarr; select</span>
          <span class="combobox__count">3 matches</span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS hooks

Classes defined by components/select/select.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.combobox__field, .combobox__hints, .combobox__input, .js, .select, .select--disabled, .select--invalid, .select__lead, .select__native, .select__ui

Behaviour

components/select/select.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-combobox-value, data-select, data-select-lead, data-select-ui, data-value.

Events: combobox:pick.