Component

Select

A native menu in the same soft field.

Classes

Class	Type
select	Component	The label that wraps the select.
select-sm	Size	Small.
select-lg	Size	Large.
picker-icon	Part	The mark. CSS calls the native one ::picker-icon. An empty i is the default shape. An svg with this class replaces it.
primary	Color	Indigo by default.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default. Used when you set no color.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Field

Include picker-icon. The library hides the native ::picker-icon. In Chrome the menu is styled. In other browsers it is the system menu.

Flavor

<label class="select">
  <select>
    <option>Mint</option>
    <option>Rose</option>
  </select>
  <span>Flavor</span>
  <i class="picker-icon"></i>
</label>

Colors

PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo

<label class="select primary">
  <select>
    <option>Primary</option>
  </select>
  <span>Primary</span>
  <i class="picker-icon"></i>
</label>
<label class="select secondary">
  <select>
    <option>Secondary</option>
  </select>
  <span>Secondary</span>
  <i class="picker-icon"></i>
</label>
<label class="select tertiary">
  <select>
    <option>Tertiary</option>
  </select>
  <span>Tertiary</span>
  <i class="picker-icon"></i>
</label>
<label class="select neutral">
  <select>
    <option>Neutral</option>
  </select>
  <span>Neutral</span>
  <i class="picker-icon"></i>
</label>
<label class="select success">
  <select>
    <option>Success</option>
  </select>
  <span>Success</span>
  <i class="picker-icon"></i>
</label>
<label class="select error">
  <select>
    <option>Error</option>
  </select>
  <span>Error</span>
  <i class="picker-icon"></i>
</label>
<label class="select warning">
  <select>
    <option>Warning</option>
  </select>
  <span>Warning</span>
  <i class="picker-icon"></i>
</label>
<label class="select info">
  <select>
    <option>Info</option>
  </select>
  <span>Info</span>
  <i class="picker-icon"></i>
</label>

Your own mark

Any svg with the class picker-icon replaces the default mark and sits in the field.

Flavor

<svg class="picker-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
  <path d="m6 9 6 6 6-6" />
</svg>

Sizes

SmallRegularLarge

<label class="select select-sm">
  <select><option>Small</option></select>
  <span>Small</span>
  <i class="picker-icon"></i>
</label>