Segmented Morph Toggle
A segmented control where only the selected option expands to its label.
- Category
- Components
- Added
- 2026-09-20
- Deps
- 2
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Orbital Action Menu
componentsA radial menu that fans actions along an arc, evenly spaced at any count.
Avatar Orbit Cluster
componentsA team ring that redistributes at any size, lifting the hovered member out.