1. Docs
2. Forms
3. Select

Select 1.2.2

Use .velin-select to apply custom styling to native <select> elements with a custom caret, consistent sizing, and theme support. Deutsch: Auswahl

When to use

• Native <select> menus styled with .velin-select (same field tokens as inputs).
• Prefer native select for short, fixed option lists; pair with a visible label.

When not

• Do not use a native select for searchable or multi-select UIs — consider Combobox where appropriate.
• Do not omit labels or rely on the first empty option as the only accessible name.

Default select

Apply .velin-select to any <select> element. A custom dropdown caret is added via background-image.

<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>

Sizing

Use .velin-select--sm or .velin-select--lg to match input sizing.

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

Multiple & size

The multiple attribute or a size attribute greater than 1 renders a scrollable list box.

<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>

Disabled

Add disabled to prevent interaction.

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