# Model Select

> A bare token-driven custom select for picking an AI model — a checkbox-toggled dropdown with a gradient-ringed trigger, colored brand dots per model, staggered option reveal, backdrop click-away, and full keyboard support — themed by the AI Steppers design system in both light and dark.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: select, dropdown
- Page: https://builder.atheros.ai/components/model-select
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_model_select/preview-ed7755f6843b.webp

## Features

- Bare centered select with a small on-brand title group — no panel card or extra chrome
- Custom dropdown driven by a visually-hidden checkbox, so open/close works without JS
- Trigger paints a two-color gradient border ring and soft focus halo while open
- Rounded trigger corners flatten into the dropdown for a seamless connected sheet
- Options render from a `MODELS` array in JS and clone a hidden `<template>`
- Each model carries a colored brand dot; the chosen color echoes in the trigger dot
- Options stagger in with a translate/opacity cascade; the reveal animates transform and opacity only
- Selected option shows a spring-scaled gradient checkmark and bold text
- Fixed full-viewport backdrop label closes the dropdown on any outside click
- ArrowUp/ArrowDown move a focused option, Enter/Space select it, Escape closes
- `role="combobox"` trigger with `aria-expanded`, `role="listbox"` dropdown, `aria-selected` options
- Visually-hidden live region announces the chosen model to assistive technology
- Dark and light themes flip the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Combobox semantics** — Trigger label has `role="combobox"` with `aria-haspopup="listbox"` and live `aria-expanded`
- **Listbox semantics** — Dropdown uses `role="listbox"`; each option is `role="option"` with `aria-selected`
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces the chosen model
- **Labelled control** — The visually-hidden checkbox carries an explicit `aria-label`; the field label is linked via `aria-labelledby`
- **Keyboard navigation** — ArrowUp/ArrowDown move option focus, Enter/Space select, Escape closes
- **Backdrop dismissal** — Full-viewport backdrop label closes the dropdown on outside click
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS, Enter/Space activation
- **Focus indicators** — `:focus-visible` outlines on the trigger (via the hidden checkbox) and the toggle
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown` — Focus the next option while open
- `ArrowUp` — Focus the previous option while open
- `Enter` — Select the focused option (or activate the theme toggle)
- `Space` — Toggle the dropdown; select the focused option while open
- `Escape` — Close the dropdown without selecting
- `Tab` — Move focus between the theme toggle and the select

## Common questions

**Which frameworks is Model Select available in?**

Model Select ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Model Select input component free?**

Model Select is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Model Select support dark mode?**

Yes. Model Select ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Model Select live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/model-select

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt