Labeled Mode Switch

A text switch with exactly two options: a pill track holds one label on each side, and a translucent glass thumb covers the selected one. Click, use the arrow keys or drag the thumb to switch; the thumb springs across and gives a small jelly squish when it lands. Both labels' color and opacity are interpolated continuously from the thumb position instead of flipping only on selection. The thumb is as wide as the label it covers and eases between the two widths mid-drag. Good for operating modes like Ask | Auto, Monthly | Yearly, or Preview | Edit.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<LabeledModeSwitch/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/labeled-mode-switch.en.json

Usage

import { MessageCircleQuestion, Zap } from "lucide-react";
import { LabeledModeSwitch } from "@/components/ui/labeled-mode-switch";

const [mode, setMode] = React.useState("ask");

<LabeledModeSwitch
  aria-label="Assistant run mode"
  value={mode}
  onValueChange={setMode}
  options={[
    { value: "ask", label: "Ask", icon: <MessageCircleQuestion /> },
    { value: "auto", label: "Auto", icon: <Zap /> },
  ]}
/>

Props

LabeledModeSwitchOption

CSS variables

How it works

• Thumb width: after mount the component measures both labels' position and width (a ResizeObserver tracks font loading and text changes), and the thumb width is interpolated between the two by position, so labels of different lengths are always covered exactly. The thumb stays hidden until measured, so the server-rendered first paint never shows it misplaced.
• Dragging: press on the side under the thumb to drag horizontally, constrained to the track (dragElastic 0.1). On release the side past the midpoint wins; otherwise the thumb springs back. Dragging is an enhancement only — click and keyboard are fully equivalent.
• Clicking: click the other side to select it; click the selected side to toggle to the other one.
• Motion: the offset uses a spring (default stiffness 500, damping 32), and on each switch the thumb plays a single scaleX 1 → 1.08 → 1 jelly squish.
• Label cross-fade: each label stacks a muted layer and a foreground layer; the foreground opacity follows the thumb position continuously and the label's overall opacity is interpolated between 0.55 and 1. Icons use currentColor, so they change color along with the text.

Accessibility

• Uses role="radiogroup" with two role="radio" items (aria-checked) rather than role="switch": both sides carry their own meaningful label, and radios let screen readers announce the full state (e.g. "Ask, selected"). Name the group with aria-label
• Roving tabindex: Tab stops only on the selected item; Left/Right arrows select the left/right side, Up/Down and Space toggle to the other side, and focus follows
• The whole track shows a ring on focus-visible
• With disabled, both buttons are disabled and dragging is turned off
• When the user's system has reduce motion enabled, the thumb jumps straight to the new position (no spring, no jelly squish) and the labels change color instantly