Svelte 5 Custom Select – Dropdown Control

Custom dropdown select with keyboard navigation and click-outside handling. Industrial styling with consistent design language.

Svelte 5 form handling best practicesweb design systemaccessible svelte components aria

Preview

Use Case

This custom select provides a consistent look across browsers while maintaining full keyboard accessibility. Features smooth open/close transitions and clear visual feedback.

Props API

Select component props
PropTypeDefaultDescription
value string''Bindable selected value
options SelectOption[] | string[][]Array of options (string or {value, label})
class string—Additional CSS classes

Related Components

InputToolbarToggle

See it in Action

Explore the Select in an interactive dashboard environment.

Customize in Showroom

More Inputs Components

Toggle

Designed for high-contrast visibility in Logistics control panels, this Svelte 5 switch uses strict ARIA roles for accessibility.

Button

Inspired by the Braun ET66 calculator, this button features a satisfying press animation and gradient shading that creates depth.

Input

Designed to feel carved into the interface rather than sitting on top, this input uses inner shadows to create depth.