Components / Form & Input / Select

Select beta

A native select, dressed in KATA tokens. The platform picker and keyboard support come free.

Preview

Plan Region

<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
  <label style="display:grid;gap:6px;font-size:12.5px;font-weight:550">Plan
    <span class="k-select"><select><option>Starter</option><option selected>Studio</option><option>Scale</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
  </label>
  <label style="display:grid;gap:6px;font-size:12.5px;font-weight:550">Region
    <span class="k-select"><select><option selected>Tokyo</option><option>Osaka</option><option>Remote</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
  </label>
  <span class="k-select"><select disabled><option>Locked</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
</div>

/* KATA Select — native <select>, token-styled. No JS. */
.k-select{position:relative;display:inline-block}
.k-select select{appearance:none;-webkit-appearance:none;height:38px;max-width:100%;padding:0 32px 0 12px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:13.5px;cursor:pointer;transition:border-color .15s}
.k-select select:hover{border-color:var(--k-border-strong)}
.k-select select:focus-visible{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-select select:disabled{opacity:.5;cursor:not-allowed}
.k-select svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--k-ink-3)}
.k-select[data-size="sm"] select{height:32px;font-size:12.5px}
.k-select[data-size="lg"] select{height:44px;font-size:14px}

Usage

Use for 4+ options where a native control is the honest tool. The chevron is decorative; the select itself carries the behavior.

Accessibility

Real <select> with a <label>. Keyboard, touch pickers and screen readers work exactly as the platform intends.

Segmented control

Slider