Auswahl 1.2.0

Nutze .velin-select, um native <select>-Elemente mit eigenem Caret, konsistenten Größen und Theme-Unterstützung zu gestalten. English: Select

Reifegrad: Als stabil in VelinStyle 1.2.0 dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist separat und dort beta / foundation, wo es so gekennzeichnet ist.

Wann verwenden

Native <select>-Menüs, gestaltet mit .velin-select (gleiche Feld-Tokens wie Eingaben).
Bevorzuge native Selects für kurze, feste Optionenlisten; kombiniere sie mit einem sichtbaren Label.

Wann nicht

Verwende keinen nativen Select für suchbare oder Multi-Select-UIs - erwäge bei Bedarf Combobox.
Lasse Labels nicht weg und verlasse dich nicht auf die erste leere Option als einzigen zugänglichen Namen.

Standard-Auswahl

Wende .velin-select auf jedes <select>-Element an. Ein eigener Dropdown-Caret wird über background-image ergänzt.

<select class="velin-select">
  <option selected>Choose an option</option>
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

Größen

Nutze .velin-select--sm oder .velin-select--lg, um die Eingabegrößen abzugleichen.

<select class="velin-select velin-select--sm">...</select>
<select class="velin-select">...</select>
<select class="velin-select velin-select--lg">...</select>

Multiple & size

Das Attribut multiple oder ein size-Attribut größer als 1 rendert eine scrollbar Listenbox.

<select class="velin-select" multiple>
  <option selected>Alpha</option>
  <option>Bravo</option>
  <option>Charlie</option>
  <option>Delta</option>
</select>

<select class="velin-select" size="3">
  <option selected>Alpha</option>
  <option>Bravo</option>
  <option>Charlie</option>
  <option>Delta</option>
</select>

Deaktiviert

Füge disabled hinzu, um Interaktion zu verhindern.

<select class="velin-select" disabled>
  <option selected>Disabled select</option>
</select>