QiuYe UI
选择与切换

Segmented Control

ChatGPT 风格的分段单选控件：使用 Motion layoutId 与 spring 弹性滑块过渡，提供内嵌与悬浮两种风格及中、小两档尺寸，并支持受控/非受控状态、键盘导航、禁用项与表单提交。

segmented-controlradio-grouptabsswitchermotionspringlayout-idfloatingkeyboardformchatgpt

快速预览

查看 Segmented Control 组件的基本效果

Current: chat

基本用法

使用 Segmented Control 组件的基础示例

导入组件

1import { SegmentedControl } from "@/components/qiuye-ui/segmented-control";
2import { useState } from "react";

使用组件

1const [mode, setMode] = useState("chat");
2

3return (
4  <SegmentedControl
5    aria-label="工作模式"
6    value={mode}
7    onValueChange={setMode}
8    items={[
9      { value: "chat", label: "Chat" },
10      { value: "work", label: "Work" },
11    ]}
12  />
13);

组件演示

查看组件的各种使用方式和效果

Variant 模式
contained 保留内嵌胶囊，floating 让白色滑块外扩并悬浮在轨道之上
containedchat
floatingchat
两种尺寸
md 用于局部内容切换，sm 用于紧凑配置项
md

floating · default

contained

sm

floating · default

contained

非受控、表单与禁用项
可通过 defaultValue 独立管理状态，并用 name 参与表单提交
Detailed disabled