Model Select
AI Pass+input#select#dropdown
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Input component
About 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.
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
MODELSarray 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 witharia-expanded,role="listbox"dropdown,aria-selectedoptions- 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"witharia-haspopup="listbox"and livearia-expanded - Listbox semantics
- Dropdown uses
role="listbox"; each option isrole="option"witharia-selected - Live readout
- Visually-hidden
role="status"witharia-live="polite"announces the chosen model - Labelled control
- The visually-hidden checkbox carries an explicit
aria-label; the field label is linked viaaria-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"witharia-checkedtoggled by JS, Enter/Space activation- Focus indicators
:focus-visibleoutlines on the trigger (via the hidden checkbox) and the toggle- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Model Select in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Sharp Select
VanillaReact
Sharp-cornered single, multi and searchable multi-select dropdowns in an IBM Carbon-inspired design system — filled triggers with an underline, square checkboxes, accent selection checkmarks, full keyboard support and a dark stack.
#input#select#multi-select
Confidence Meter
VanillaReact
A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
#input#slider
Floating Field
VanillaReact
A bare token-driven text input with a floating "Agent Name" label that rests inside the field and rises above it on focus or when filled, a design-system focus border, and readable accent label text in light and dark.
#input
Color Picker
ReactVanilla
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
#input
Quality Score
VanillaReact
A bare token-driven quality rating input — five ascending bars fill with the brand gradient up to the chosen score, native radio semantics, hover preview, Poor→Excellent hints, and a visible gradient readout backed by a polite live region — themed by the AI Steppers design system.
#input
Select
VanillaReact
Three token-driven listbox fields — single-select, multi-select with a Select all row, and a searchable multi-select — each a button trigger paired with a popup listbox, with full keyboard navigation, type-ahead, dark mode, and a responsive grid.
#input#combobox#multi-select
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
