Components · Form Controls
Select
Lets people choose one value from a list inside a form.
Component Workbench
Switch between the live interactive preview, syntax-highlighted implementation code, copyable AI coding agent prompt, and designer anatomy blueprint.
Select · Canonical Spec
<div class="as-form-field">
<label class="as-form-field__label" for="select-region">Region</label>
<div class="as-select-box">
<select class="as-select" id="select-region">
<option value="eu-west-1" selected>Europe (Ireland)</option>
<option value="us-east-1">US East (N. Virginia)</option>
</select>
<svg class="as-select-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 6 8 10 12 6"></polyline></svg>
</div>
</div># Aster Component Implementation Prompt — Select
## 1. Component Purpose & Canonical Role
- **Component:** Select (`select`)
- **Category:** Form Controls
- **Native Element:** `<select>`
- **Summary:** Lets people choose one value from a list inside a form.
- **When to Use:** Selecting regions, roles, or categories from a predefined list.
- **When Not to Use:** 2–3 options that benefit from immediate visibility (use Radio Group).
## 2. Authoritative Repository Files
- **Component CSS:** `components/select/select.css`
- **Component Spec:** `docs/components/select.md`
- **Agent Contract:** `skills/using-aster-components/SKILL.md`
- **Compiled Bundle:** `dist/css/aster.css` and `dist/js/aster.js`
## 3. Canonical HTML Structure & Classes
```html
<div class="as-form-field">
<label class="as-form-field__label" for="select-region">Region</label>
<div class="as-select-box">
<select class="as-select" id="select-region">
<option value="eu-west-1" selected>Europe (Ireland)</option>
<option value="us-east-1">US East (N. Virginia)</option>
</select>
<svg class="as-select-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 6 8 10 12 6"></polyline></svg>
</div>
</div>
```
## 4. Measured Geometry
Measured from the rendered component when this page loads.
## 5. Non-Negotiable Aster Constraints
1. **Zero Primitive Color Leaks:** Bind colors strictly to `--as-semantic-color-*` custom properties. Never use `--as-color-primitive-*` or hardcoded hex values in component usage.
2. **Minimum 4px Radius Policy:** Never use `2px` border-radius. Use `--as-radius-sm` (`4px`), `--as-radius-md` (`8px`), `--as-radius-lg` (`12px`), or `--as-radius-full` (`9999px`).
3. **Single Standard Density Mode:** Compact mode (`data-density="compact"` / `.as-*--compact`) is permanently retired. Do not emit compact classes or attributes.
4. **WCAG 2.2 AA Accessibility:** Maintain >= 4.5:1 text contrast, >= 3:1 UI/border contrast, >= 24x24px interactive hit targets, and full keyboard operability (`Tab`, `Enter`, `Space`, `Escape`, Arrow keys).
## 6. Verification Commands
```bash
npm run test:components
npm run test:contrast
npm run test:browser
``` When to use it
Do
- Use it for lists too long to show at once.
- Order options in a way people expect.
Don't
- Use it for actions. Use Dropdown instead.
- Use it for two or three options. Use Radio instead.
Variants & States
Every option, rendered live with real styles.
Accessibility & Keyboard Interaction
Requirements for using this component accessibly, following the W3C ARIA Authoring Practices Guide.
| Interaction / Key | Behavior & Compliance Requirement |
|---|---|
| Native Picker | Uses native OS selection dialogs and Up/Down arrow cycling. |
| Decorative Chevron | SVG chevron declares aria-hidden="true". |
Tokens
Values update with the current theme.
| Role | Token | Current value |
|---|---|---|
| Corner Radius | --as-radius-sm | |
| Border Strong | --as-semantic-color-border-strong |