Neumorphism UI

Toggle Group

用于对齐或格式等一组相关的按下选项。

预览

文字对齐

选择左、中、右对齐，并显示当前受控选择。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/toggle-group

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

为组提供名称，为每个 ToggleGroupItem 指定唯一 value。选择值以数组保存，允许同时选中多个时设置 multiple。

"use client";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Example() {
  return (
    <ToggleGroup defaultValue={["left"]} aria-label="Text alignment">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  );
}

API 参考

可通过键盘导航的单选或多选切换组。 标记组和每个选项。区分方向键焦点移动与选择状态。

组件属性类型默认值说明
ToggleGroupvalue / defaultValuereadonly string[]—设置受控状态或初始状态。
ToggleGroupmultipleboolean—允许多项选择。
ToggleGrouporientation"horizontal" | "vertical"—设置布局和键盘导航方向。

无障碍

  • 01

    标记组和每个选项。区分方向键焦点移动与选择状态。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。