Neumorphism UI

Radio Group

少数の見える選択肢から一つだけ選ぶ場合に使います。

プレビュー

表示密度の選択

説明付きの Compact、Comfortable、Spacious の 3 つから表示密度を選びます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

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

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

表示密度の選択

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/radio-group
Registry JSON

使い方

グループに名前を付け、各 RadioGroupItem に固有の value とラベルを指定します。defaultValue で初期値を設定するか、onValueChange で値を制御します。

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Example() {
  const id = useId();
  return (
    <RadioGroup defaultValue="standard" aria-label="Delivery method">
      <Label htmlFor={id + "-standard"} className="flex items-center gap-2">
        <RadioGroupItem id={id + "-standard"} value="standard" />Standard
      </Label>
      <Label htmlFor={id + "-express"} className="flex items-center gap-2">
        <RadioGroupItem id={id + "-express"} value="express" />Express
      </Label>
    </RadioGroup>
  );
}

API リファレンス

各項目を実際の input[type=radio] としてレンダリングし、React context を通じて name と選択状態を共有します。制御・非制御の値、水平・垂直 layout、disabled、required に対応します。

コンポーネントプロパティ型デフォルト説明
RadioGroupvalue / defaultValuestring—制御された選択値、または非制御時の初期値です。
RadioGrouponValueChange(value: string) => void—選択値が変わったときに呼び出されます。
RadioGrouporientation"horizontal" | "vertical""vertical"layout の向きと aria-orientation を設定します。
RadioGroupnamestringgenerated idすべての項目で共有する native radio name です。
RadioGroupdisabled / requiredbooleanfalseすべての項目に input の制約を設定します。
RadioGroupItemvalue必須string—項目が選択されたときに group へ渡す値です。

アクセシビリティ

  • 01

    RadioGroup の root には aria-label または aria-labelledby でアクセシブルな group 名を指定してください。

  • 02

    各 RadioGroupItem の id と Label の htmlFor を関連付けてください。

  • 03

    実際の radio input により、native form 送信とキーボードによる選択動作が維持されます。