Sharp Select
AI Pass+input#select#multi-select
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 Sharp Select
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.
Features
- Three variants side by side: single select, multi select, and searchable multi select
- Sharp 0px corners everywhere — fields, dropdowns, checks and tags
- Carbon-style triggers: gray filled field, single ink underline, 2px blue outline while open
- Single select marks the chosen option with a blue checkmark and bold label
- Multi select uses square ink-filled checkboxes with select-all and partial (dash) states
- Ink count tag on multi triggers with a clear (×) affordance, hidden when nothing is selected
- Live search filtering inside the searchable variant
- Dark mode flipping onto the charcoal g100 stack
- Fully respects
prefers-reduced-motion
Accessibility
- Combobox trigger
- Buttons with
aria-haspopup="listbox",aria-expandedandaria-label - Listbox semantics
role="listbox"withrole="option"items carryingaria-selected- Multi-select
aria-multiselectable="true"on multi and search listboxes- Search labelling
- The filter input has an
aria-label - Focus indicators
:focus-visiblewith a 2px primary outline on interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Sharp 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
Model Select
ReactVanilla
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.
#input#select#dropdown
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
Context Picker
ReactVanilla
A bare token-driven context window size picker — a radiogroup of six options (4K, 16K, 32K, 128K, 256K, 1M tokens) where each option stacks miniature page bars that light up with the brand gradient when selected — themed by the AI Steppers design system in both light and dark.
#input#radio
Tone Pad
VanillaReact
A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.
#input#slider
Date Picker
ReactVanilla
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
#input#keyboard
Temperature Range
VanillaReact
A bare token-driven five-stop temperature slider from 0.0 Precise to 1.0 Creative with a gradient fill, snapping draggable thumb, clickable stops, and a rolling gradient digit readout — themed by the AI Steppers design system in both light and dark.
#input#slider#range
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
