About this set
Selects for dark dashboards and developer tools, where light-theme controls lose their borders. Native selects on a dark surface pairs a log level and an environment select that set color-scheme: dark, so the browser’s own option list opens dark too. Multiselect with select all and a count is a deploy-to-regions picker listing seven regions with their codes and latency, with a Select all row, a count badge and a summary that switches from names to All regions. Grouped single select with specs and prices picks an instance size from three families, each option showing a coloured icon, its vCPU and memory and an hourly price, with the choice copied into the closed field. The two custom menus use the WAI-ARIA select-only combobox pattern with a listbox, so arrow keys, Home, End, Space, Enter, type-ahead and Escape all work, and hidden select elements keep the real values for the form. Borders stay at 3:1 against the card and the focus ring is a light indigo that shows on the dark field.
What’s included
- color-scheme: dark for native option lists
- Multi-select with Select all, count badge and summary
- Grouped single select with specs and prices
- WAI-ARIA select-only combobox and listbox
- Bootstrap version on data-bs-theme="dark"
Accessibility
Native selects keep their labels and browser behaviour; the custom menus are role="combobox" fields labelled by their visible labels, with aria-expanded and aria-activedescendant pointing into listboxes that report aria-selected, and the size list uses labelled groups. Text reaches 4.5:1 and field borders 3:1 on the dark card, the focus ring is light indigo, and transitions stop under prefers-reduced-motion.
Customise it
Change --dk-accent, --dk-field, --dk-pop, --dk-active and --dk-line on .dk; in Tailwind edit the --color-dk-* theme colours. The Bootstrap version sets data-bs-theme="dark" on each component, so it follows Bootstrap's dark colour mode.
