Segmented Morph Toggle
A segmented control where only the selected option expands to its label.
DOM + CSS1 dep1 file · 3 KB TSX
Props
"use client";
import { useEffect, useRef, useState } from "react";
import { motion } from "framer-motion";
import type { ReactNode } from "react";
type Option = { id: string; label: string; icon: ReactNode };
export function SegmentedMorphToggle({
options,
value,
onChange,
stiffness = 420,
showLabel = true,
pill = true,
}: {
options: Option[];
value: string;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
Expanding only the selected label keeps a control compact while still naming the current choice, which is the right trade for a toolbar where three icons alone would be ambiguous. It also breaks the standard way people build segmented thumbs. Dividing the track by the option count gives every segment the same width, and this control's whole premise is that they differ — so the thumb has to be positioned from the selected button's measured rect instead. That introduces a subtler problem: measuring once, on selection, reads the button mid-transition while its label is still expanding, and the thumb settles short of the final width. Measuring again after the transition has had time to finish fixes it, and a timeout is enough since the duration is known. The label animates its max-width rather than mounting and unmounting, because an unmount collapses the button in a single frame and leaves the spring chasing a box that has already stopped moving. Proper radiogroup semantics come free and matter more than the motion.
Curator’s note
Built for viberdy 2.1. Measuring twice — before and after the width transition — is the fix for a thumb that always lands slightly short.