Select

A native dropdown for choosing from a list of options. Built on <select> with appearance: none and a custom chevron.

Component Skill — components/select/component-skill.md

Native basis

<select> element with custom styling via appearance: none.

Web Platform APIs

<select> <optgroup>

Classes

.select

Sizes (data-size)

smHeight: 2rem lgHeight: 2.75rem

Accessibility

• Native <select> provides full keyboard navigation (arrow keys, type-ahead).

• Use <label> with for for description.

• Use disabled on <option> elements for placeholder text.

Notes

• Uses appearance: none with a custom chevron via background-image SVG.

• The dropdown list is rendered by the browser — it cannot be styled.

• For a fully custom dropdown, use the Combobox component instead.

Default

Native select with placeholder.

Fruit

<select class="select">
  <option value="" disabled selected>Select a fruit</option>
  <option value="apple">Apple</option>
  ...
</select>

With groups

<select class="select">
  <optgroup label="Americas">
    <option>New York</option>
    ...
  </optgroup>
</select>

Disabled

<select class="select" disabled>...</select>

CSS view file

/* -- Select component ------------------------------------------- */

@layer components {
  .select {
    appearance: none;
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;

    /* Custom chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] { height: 2rem;    padding-left: 0.625rem; font-size: 0.8125rem; }
    &[data-size="lg"] { height: 2.75rem; padding-left: 1rem;     font-size: 1rem; }
  }
}