Elastic segment
A compact selector whose thumb stretches between choices.
OVERVIEW / 202624,608 views
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type KeyboardEvent,9} from "react";10 11export type ElasticSegmentProps = {12 items: string[];13 value?: string;14 defaultValue?: string;15 onChange?: (value: string, index: number) => void;16 label?: string;17 disabled?: boolean;18 className?: string;19};20 21/** A compact single-choice control with a stretching selection trail. */22export function ElasticSegment({23 items,24 value,25 defaultValue,26 onChange,27 label = "View period",28 disabled = false,