按鈕與切換
分段流體切換
選中底塊以 spring 流動變形至新選項的分段控制。
分段控制（Segmented Control）元件：選中底塊以 layoutId 共享元素搭配 spring 在選項間流動，移動時沿方向輕微拉伸再回彈，像液體一樣滑到定位；支援受控／非受控、三種尺寸、圖示與停用選項，並內建完整鍵盤操作。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add segmented-morph-togglePlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<SegmentedMorphToggle/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/segmented-morph-toggle.json或在 components.json 設定 registries 後，改用 @webberui/segmented-morph-toggle 安裝。
使用
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為群組命名，讓螢幕閱讀器朗讀切換用途