分段流體切換
選中底塊以 spring 流動變形至新選項的分段控制。
分段控制（Segmented Control）元件：選中底塊以 layoutId 共享元素搭配 spring 在選項間流動，移動時沿方向輕微拉伸再回彈，像液體一樣滑到定位；支援受控／非受控、三種尺寸、圖示與停用選項，並內建完整鍵盤操作。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<SegmentedMorphToggle />
安裝
npx shadcn@latest add https://webberui.com/r/segmented-morph-toggle.json或在 components.json 設定 registries 後，改用 @webberui/segmented-morph-toggle 安裝。
安裝依賴後，從 registry JSON（/r/segmented-morph-toggle.json 的 files[0].content）複製 segmented-morph-toggle.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { SegmentedMorphToggle } from "@/components/ui/segmented-morph-toggle";
const [period, setPeriod] = React.useState("monthly");
<SegmentedMorphToggle
ariaLabel="訂閱週期"
value={period}
onChange={setPeriod}
options={[
{ value: "monthly", label: "月繳" },
{ value: "quarterly", label: "季繳" },
{ value: "yearly", label: "年繳" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
options | SegmentedMorphOption[] | — | 選項清單，每項含唯一 value 與 label，可選 icon、disabled |
value | string | — | 受控模式的當前值，提供後由外部完全控制 |
defaultValue | string | 第一個選項 | 非受控模式的初始值 |
onChange | (value: string) => void | — | 選中值變更時的回呼 |
size | "sm" | "md" | "lg" | "md" | 尺寸（內距與字級） |
ariaLabel | string | — | 提供給輔助科技的群組標籤 |
className | string | — | 透傳到最外層容器 |
可及性
- 使用
role="radiogroup"與role="radio"，選中狀態以aria-checked標示 - roving tabindex：Tab 只停留在選中項，
←/→/↑/↓方向鍵在群組內循環切換，Home/End跳至首尾 - 停用選項標記
disabled，鍵盤導覽自動跳過，滑鼠亦不可點擊 - 使用者系統開啟「減少動態效果」時，底塊直接跳至新位置，不播放液體拉伸動畫
- 建議透過
ariaLabel為群組命名，讓螢幕閱讀器朗讀切換用途