Documentation

RadioGroup

Radio group with black-bordered options and an 8×8 white square indicator.

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

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>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/radio-group

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

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

CLI copy import

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

No public props.

Source

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

The npm package keeps the source tree, so you can copy and adapt it directly.