Svelte 5 Period Selector – Segmented Control

Physical radio-button style segmented control for time range selection. Tactile feedback with active state handling.

segmented control svelteradio group stylingfinancial dashboard ui

Preview

Component preview

Use Case

Provides immediate time-span switching for financial charts. The physical button aesthetic gives clear affordance for interaction.

Props API

Period Selector component props
PropTypeDefaultDescription
value string'1D'Bindable selected value
options string[]['1H', '1D', '1W', '1M']Array of option labels
class string—Additional CSS classes

Related Components

PlotToolbar

See it in Action

Explore the Period Selector 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.