# Select / Select

> The browser's select with coss ui's look.

Page: https://componentes-lovat.vercel.app/c/select/  
License: MIT · Design: coss ui (MIT) · select.tsx  
Requires: tokens.css  
Context: ambos · Density: media · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/select/select.html
- CSS: https://componentes-lovat.vercel.app/raw/select/select.css
- Everything in one file: https://componentes-lovat.vercel.app/r/select.html

Dark theme: add class `dark` to `<html>`.

## When to use

- To pick one of 5 to 30 options.

## When not to use

- With 2 to 4 options: use radios.
- For actions: use a menu.

## Accessibility

Roles: combobox, listbox, option

| Keys | Action |
|---|---|
| Espacio / Enter | Opens the list |
| ↑ / ↓ | Changes option |
| Letra / Letter | Jumps to the option |

- It is the native <select>: keyboard, screen reader and mobile picker come from the browser.
- In Chrome 135+ the open list is styled too (appearance: base-select).

## Code

```html
<div class="c-select-field">
  <label class="c-select-label" for="sel-framework">Formato</label>
  <span class="c-select">
    <select class="c-select__field" id="sel-framework" name="format">
      <option value="1:1">Cuadrado · 1:1</option>
      <option value="4:5" selected>Póster · 4:5</option>
      <option value="9:16">Historia · 9:16</option>
      <option value="16:9">Pantalla · 16:9</option>
    </select>
    <svg class="c-select__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
  </span>
</div>
<div class="c-select-field">
  <label class="c-select-label" for="sel-country">País</label>
  <span class="c-select">
    <select class="c-select__field" id="sel-country" name="country" required>
      <option value="" disabled selected>Elige un país</option>
      <optgroup label="Sudamérica"><option>Argentina</option><option>Chile</option><option>Colombia</option><option>Perú</option></optgroup>
      <optgroup label="Centro y Norteamérica"><option>Guatemala</option><option>México</option></optgroup>
    </select>
    <svg class="c-select__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
  </span>
</div>
```

```css
/* select · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde select.tw.json. No editar a mano. Necesita tokens.css. */
.c-select__icon{pointer-events:none;position:absolute}
.c-select{position:relative}
.c-select-field{display:flex}
.c-select{display:inline-flex}
.c-select-label{display:inline-flex}
.c-select__icon{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}
.c-select__field option{min-height:calc(var(--spacing)*8)}
.c-select{min-height:calc(var(--spacing)*9);width:100%}
.c-select-field{width:100%;max-width:calc(var(--spacing)*72)}
.c-select{min-width:calc(var(--spacing)*36)}
.c-select__field option{cursor:default}
.c-select-field{flex-direction:column}
.c-select{align-items:center}
.c-select-label{align-items:center}
.c-select-field{align-items:flex-start}
.c-select{justify-content:space-between;gap:calc(var(--spacing)*2)}
.c-select-field{gap:calc(var(--spacing)*2)}
.c-select-label{gap:calc(var(--spacing)*2)}
.c-select__field option{gap:calc(var(--spacing)*2)}
.c-select{border-radius:var(--radius)}
.c-select__field option{border-radius:calc(var(--radius) - 4px)}
.c-select{border-style:var(--tw-border-style);border-width:1px;border-color:var(--input);background-color:var(--background)}
.c-select__field option{padding-block:calc(var(--spacing)*1);padding-inline-start:calc(var(--spacing)*2);padding-inline-end:calc(var(--spacing)*4)}
.c-select{text-align:left;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
.c-select__field option{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
.c-select-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-select{color:var(--foreground)}
.c-select-label{color:var(--foreground)}
.c-select__icon{opacity:.8}
.c-select{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-select{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-select{--tw-ring-color:var(--ring)}
@supports (color:color-mix(in lab, red, red)){
.c-select{--tw-ring-color:color-mix(in oklab,var(--ring)24%,transparent)}
}
.c-select{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}
.c-select__field option{--tw-outline-style:none;outline-style:none}
.c-select{-webkit-user-select:none;user-select:none}
.c-select:not(:is(.dark *)){background-clip:padding-box}
.c-select:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}
.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-select:has(>.c-select__field:focus-visible){border-color:var(--ring);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-select[aria-invalid=true]{border-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-select[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)36%,transparent)}
}
.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{border-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)64%,transparent)}
}
.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{--tw-ring-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)16%,transparent)}
}
.c-select:has(>.c-select__field:disabled){opacity:.64}
.c-select__field option:disabled{opacity:.64}
.c-select__field option:is(:hover,:focus-visible){background-color:var(--accent);color:var(--accent-foreground)}
@media (min-width:40rem){
.c-select__icon{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}
.c-select__field option{min-height:calc(var(--spacing)*7)}
.c-select{min-height:calc(var(--spacing)*8);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-select__field option{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-select-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}
}
.c-select:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-select:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-select:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-select:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}
}
.c-select:is(:has(>.c-select__field:disabled),:has(>.c-select__field:focus-visible),:has(>.c-select__field[aria-invalid=true]),[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-select__field{appearance:none;-webkit-appearance:none;width:100%;min-height:inherit;padding-inline:calc(var(--spacing)*3 - 1px) calc(var(--spacing)*9);background:transparent;border:0;border-radius:inherit;color:inherit;font:inherit;outline:none;cursor:pointer}
.c-select__field:disabled{cursor:not-allowed}
.c-select__field:invalid{color:color-mix(in oklab,var(--muted-foreground)72%,transparent)}
.c-select__field option{color:var(--foreground);background:var(--popover)}
@supports (appearance: base-select){
 .c-select__field,.c-select__field::picker(select){appearance:base-select}
 .c-select__field{display:flex;align-items:center}
 .c-select__field::picker-icon{display:none}
 .c-select__field::picker(select){margin-block:4px;padding:.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--popover);color:var(--popover-foreground);box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d;opacity:0;scale:.98;transition:opacity .15s,scale .15s,display .15s allow-discrete,overlay .15s allow-discrete}
 .c-select__field:open::picker(select){opacity:1;scale:1}
 @starting-style{.c-select__field:open::picker(select){opacity:0;scale:.98}}
 .c-select__field option{display:grid;grid-template-columns:1rem minmax(0,1fr);align-items:center}
 .c-select__field option::checkmark{content:"✓" / "";grid-column:1;font-size:.75rem}
 .c-select__field optgroup{padding:.375rem .5rem;font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground)}
}
.c-select__icon{inset-inline-end:calc(var(--spacing)*3 - 1px)}
```

## Credits

- coss ui (MIT) · select.tsx: https://coss.com/ui
- Origin UI (MIT) · select-native.tsx: https://21st.dev/@originui