Browse Components
Select
Animated choices with optional search and native form support.
Searchable options
Add data-select-search to filter a longer list without changing the native form value.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control" data-select-search>
<select id="status" name="status" aria-describedby="status-help">
<option value="planning">
Planning
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
<option value="paused">
Paused
</option>
<option value="archived">
Archived
</option>
<option value="cancelled" disabled>
Cancelled (unavailable)
</option>
</select>
</div>
<small class="muted" id="status-help">
Choose your current project stage.
</small>
</div>Basic
A labeled single choice with helpful context.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select id="status" name="status" aria-describedby="status-help">
<option value="planning">
Planning
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</select>
</div>
<small class="muted" id="status-help">
Choose your current project stage.
</small>
</div>Grouped options
Use native optgroup labels to organize related choices.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select id="status" name="status" aria-describedby="status-help">
<optgroup label="Upcoming">
<option value="planning">
Planning
</option>
</optgroup>
<optgroup label="Active">
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</optgroup>
</select>
</div>
<small class="muted" id="status-help">
Choose your current project stage.
</small>
</div>Disabled
Explain why the field is unavailable. Disabled values are not submitted.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select disabled id="status" name="status" aria-describedby="status-help">
<option value="planning">
Planning
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</select>
</div>
<small class="muted" id="status-help">
Only project owners can change the status.
</small>
</div>Required and invalid
Show a useful error message, not just a colored border.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select
required
aria-invalid="true"
id="status"
name="status"
aria-describedby="status-help"
>
<option value="" selected>
Choose a status
</option>
<option value="planning">
Planning
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</select>
</div>
<small class="field-error" id="status-help">
Choose a project status before continuing.
</small>
</div>Long options
The closed control stays within its container. Keep labels concise where possible.
View Code
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select id="status" name="status" aria-describedby="status-help">
<option value="planning">
Planning — waiting for the next project review
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</select>
</div>
<small class="muted" id="status-help">
Choose your current project stage.
</small>
</div>Right-to-left
Logical spacing places the chevron at the reading-direction end.
View Code
<div dir="rtl">
<div class="stack" style="gap:8px;max-width:360px;width:100%">
<label for="status">
Project status
</label>
<div class="select-control">
<select id="status" name="status" aria-describedby="status-help">
<option value="planning">
Planning
</option>
<option value="progress">
In progress
</option>
<option value="review">
In review
</option>
<option value="complete">
Complete
</option>
</select>
</div>
<small class="muted" id="status-help">
Choose your current project stage.
</small>
</div>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/select.css">
<script defer src="/library/assets/select.js"></script>13,214 bytes CSS including base · 10,532 bytes runtime JavaScript
Usage
Offer a clear choice
Use Select for one value from a known list. Keep option names short and distinguishable. Search appears automatically for ten or more options. Add data-select-search to enable it for shorter lists, or data-select-search="false" to disable it.
Label the field
Associate a visible label with the select ID. Put help text outside select-control and connect it with aria-describedby.
Explain errors
Use required for native validation. When presenting an error, add aria-invalid="true" and reference the visible error message. Do not rely on color alone.
Let the browser help
Load select.js for themed animated menus, keyboard navigation and optional search. Native form submission and reset remain intact. Without JavaScript or Popover support the native picker remains available.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.