A modern segmented control for switching between two modes with a smooth, sliding highlight. The pill-shaped track supports filled and outlined styles, optional icons, and subtle haptics. Transitions are fluid, accessible, and responsive, making state changes unmistakable on touch or mouse.

Functionality

• Animated thumb/track with easing, color interpolation, and ripple/hover feedback

• Two visual styles: filled vs. outlined, with auto-contrast text

• Optional leading icons, badges (e.g., “new”), and disabled/loading states

• Keyboard support (Arrow/Home/End), focus ring, ARIA roles & semantics

• Binds to external state (forms, filters) with onChange/debounce

• RTL/LTR aware, responsive sizing, and reduced-motion fallback

• Theming controls: radius, spacing, elevation/shadow, borders, and color tokens

Use cases

• Media pickers (Photo vs. Video, Camera vs. Library)

• Mode switches (Light/Dark, Map/List, Monthly/Yearly)

• Filters in e-commerce or galleries (New/Popular)

• Step selectors in onboarding or settings

• Quick view toggles in dashboards and content tools

Keywords
segmented control, pill toggle, tab bar, two-state switch, animated slider, photo video picker, UI switcher, accessible navigation, ripple, hover, icons, badges, responsive, Flutter widget, FlutterFlow component, haptics, theming, RTL, stateful toggle.