Segmented Control

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useId, useRef, useState } from "react";4 5/**6 * A segmented control with an indicator that slides between options.7 *8 * The interesting part is not the slide, it is the keyboard model. This is a9 * real radio group: arrow keys move between options and change the selection,10 * Home and End jump to the ends, and the group holds ONE tab stop so a11 * keyboard user tabs past it in one press instead of once per option. That is12 * the WAI-ARIA radiogroup pattern, and it is what almost every pretty13 * segmented control on the internet gets wrong.14 *15 * The indicator is measured from the live DOM rather than computed from16 * index × width, so options of different widths work. Percentage maths only17 * looks right when every label happens to be the same length.18 */19 20export interface SegmentedOption {21  value: string;22  label: string;23}24 25export interface SegmentedProps {26  options: SegmentedOption[];27  value?: string;28  onChange?: (value: string) => void;29  /** Accessible name for the group. Required — it has no visible label. */30  label: string;31  accent?: string;32  /** Slide duration in ms. */33  duration?: number;34  size?: "sm" | "md";35  /** Force an instant move rather than a slide. */36  still?: boolean;37  className?: string;38}39 40export function Segmented({41  options,42  value,43  onChange,44  label,45  accent = "#c3f53c",46  duration = 320,47  size = "md",48  still = false,49  className = "",50}: SegmentedProps) {51  const groupId = useId();52  // Uncontrolled by default so it is useful straight out of the box, but a53  // `value` prop takes over the moment one is supplied.54  const [internal, setInternal] = useState(options[0]?.value ?? "");55  const selected = value ?? internal;56 57  const listRef = useRef<HTMLDivElement>(null);58  const [indicator, setIndicator] = useState({ left: 0, width: 0, ready: false });59 60  const select = (next: string) => {61    if (value === undefined) setInternal(next);62    onChange?.(next);63  };64 65  // Measured from the DOM, so unequal label widths land correctly.66  useEffect(() => {67    const list = listRef.current;68    if (!list) return;69 70    const measure = () => {71      const active = list.querySelector<HTMLElement>(`[data-value="${CSS.escape(selected)}"]`);72      if (!active) return;73      setIndicator({74        left: active.offsetLeft,75        width: active.offsetWidth,76        ready: true,77      });78    };79 80    measure();81 82    // Fonts land after first paint and change label widths; without this the83    // indicator sits slightly wrong until the next interaction.84    const observer = new ResizeObserver(measure);85    observer.observe(list);86    document.fonts?.ready.then(measure).catch(() => {});87 88    return () => observer.disconnect();89  }, [selected, options]);90 91  const onKeyDown = (event: React.KeyboardEvent) => {92    const index = options.findIndex((o) => o.value === selected);93    let next = index;94 95    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = index + 1;96    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = index - 1;97    else if (event.key === "Home") next = 0;98    else if (event.key === "End") next = options.length - 1;99    else return;100 101    event.preventDefault();102    // Wraps, which the radiogroup pattern expects.103    const wrapped = (next + options.length) % options.length;104    select(options[wrapped].value);105    listRef.current106      ?.querySelector<HTMLElement>(`[data-value="${CSS.escape(options[wrapped].value)}"]`)107      ?.focus();108  };109 110  const pad = size === "sm" ? "px-3 py-1.5 text-[0.75rem]" : "px-4 py-2 text-sm";111 112  return (113    <div114      ref={listRef}115      role="radiogroup"116      aria-label={label}117      onKeyDown={onKeyDown}118      className={`relative inline-flex rounded-full border border-ink-600 bg-ink-800 p-1 ${className}`}119    >120      {/* Purely decorative; the selected state is carried by aria-checked. */}121      <span122        aria-hidden123        className="absolute top-1 bottom-1 rounded-full"124        style={{125          left: indicator.left,126          width: indicator.width,127          background: accent,128          transition:129            still || !indicator.ready130              ? "none"131              : `left ${duration}ms cubic-bezier(0.16,1,0.3,1), width ${duration}ms cubic-bezier(0.16,1,0.3,1)`,132          // Hidden until measured, or it animates in from the left edge on mount.133          opacity: indicator.ready ? 1 : 0,134        }}135      />136 137      {options.map((option) => {138        const isSelected = option.value === selected;139        return (140          <button141            key={option.value}142            type="button"143            role="radio"144            aria-checked={isSelected}145            data-value={option.value}146            id={`${groupId}-${option.value}`}147            // One tab stop for the whole group: tab enters, arrows navigate.148            tabIndex={isSelected ? 0 : -1}149            onClick={() => select(option.value)}150            className={`relative z-10 rounded-full font-mono tracking-[0.04em] whitespace-nowrap transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current ${pad} ${151              isSelected ? "text-ink-900" : "text-bone-400 hover:text-bone-100"152            }`}153          >154            {option.label}155          </button>156        );157      })}158    </div>159  );160}161