A premium segmented control where a soft glassy highlight slides between options with spring physics. The active segment lifts subtly, the fill gains a neon green glow, and the label (with optional ♂/♀ icon) increases contrast for instant readability. Built for mobile-first forms and filters, it’s fully themeable, keyboard-accessible, and scales from binary to N-way choices without jank.

Functionality

• Single-select segmented control (2…N options) with sliding highlight and spring easing

• Icon + label, icon-only, or label-only modes; badges/tooltips; disabled & readonly states

• Ripple/hover/pressed feedback, haptic vibration on commit, focus ring for keyboard users

• Form bindings: initial value, validation, error text, onChanged / onSubmitted

• Layout options: equal or intrinsic widths, leading/center alignment, compact/dense density

• Theming tokens: radius, elevation/shadow, border & glow, typography, color states (idle/hover/active/disabled)

• Smooth performance (layer caching, 60fps), safe-area aware, dark/light themes

• Accessibility: ARIA radiogroup semantics, arrow/Space/Enter navigation, screen-reader labels, RTL + Reduce Motion support

Use cases

• Onboarding/profile inputs (gender, role, experience level)

• Quick view toggles and filters (List/Grid, Light/Dark, Delivery/Pickup, Monthly/Yearly)

• Pricing toggles on paywalls with standout active state

• Mode switches in dashboards (Live/Historic, Basic/Advanced)

• Mobile forms replacing small radio buttons with large touch targets

• A/B feature selectors, preference cards, and settings pages

Keywords
segmented control, segmented toggle, pill selector, sliding highlight, neon glow, glassy fill, icon with label, haptic feedback, spring animation, radio group, single select, badges, tooltip, disabled state, validation, form field, keyboard navigation, ARIA radiogroup, RTL, reduce motion, theming tokens, elevation, dark mode, responsive UI, mobile friendly, Flutter widget, FlutterFlow component, premium UI, high performance.