文档目录

单选组

黑框选项 + 8×8 白色方块指示器的单选组。

和平简单普通（当前）困难

import { useState } from "react";

import { Radio, RadioGroup } from "./index";

const DIFFICULTIES = ["和平", "简单", "普通", "困难"] as const;

/**
 * RadioGroup 预览用例：难度选择
*/
export function RadioGroupDemo() {
  const [difficulty, setDifficulty] = useState("普通");

  return (
    <RadioGroup
      aria-label="游戏难度"
      onValueChange={(value) => {
        setDifficulty(value as string);
      }}
      value={difficulty}
    >
      {DIFFICULTIES.map(name => (
        <label className="flex items-center gap-4" key={name}>
          <Radio value={name} />
          <span className="font-mc mc-text">
            {name}
            {difficulty === name ? "（当前）" : ""}
          </span>
        </label>
      ))}
    </RadioGroup>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/radio-group

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Radio, RadioGroup } from "@tennantite/ui";

CLI 拷贝导入

import { Radio, RadioGroup } from "@/components/tennantite/radio-group";

import { useState } from "react";

import { Radio, RadioGroup } from "./index";

const DIFFICULTIES = ["和平", "简单", "普通", "困难"] as const;

/**
 * RadioGroup 预览用例：难度选择
*/
export function RadioGroupDemo() {
  const [difficulty, setDifficulty] = useState("普通");

  return (
    <RadioGroup
      aria-label="游戏难度"
      onValueChange={(value) => {
        setDifficulty(value as string);
      }}
      value={difficulty}
    >
      {DIFFICULTIES.map(name => (
        <label className="flex items-center gap-4" key={name}>
          <Radio value={name} />
          <span className="font-mc mc-text">
            {name}
            {difficulty === name ? "（当前）" : ""}
          </span>
        </label>
      ))}
    </RadioGroup>
  );
}

API Reference

无公开 props。

源码

packages/ui/src/primitives/radio-group/index.tsx

npm 包保留源码目录，可直接复制改造。