Component

Select

A native menu in the same soft field.

Import jellyfy/select.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.

Classes

Class	Type
select	Component	The label that wraps the select.
select-sm	Size	Small size
select-md	Size	Medium size (default)
select-lg	Size	Large size
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.
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. Chrome and Safari use the styled menu. Firefox uses 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

SmallMediumLarge

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