125k

Radio Group

PreviousNext

ラジオボタンと呼ばれる、同時に1つまで選択できるチェック可能なボタンのセット。

BaseRadixReact Aria
import { Label } from "@/components/ui/radix/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radix/radio-group"

インストール

pnpm dlx shadcn@latest add radio-group

使い方

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

構成

次の構成を使用して、RadioGroup を構築します。

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

説明

Field コンポーネントを使用して、説明付きのラジオグループ項目を表示します。

ほとんどの用途に適した標準的な間隔です。

要素間の間隔を広くします。

密度の高いレイアウト向けの最小限の間隔です。

import {
  Field,
  FieldContent,

選択カード

FieldLabel を使用して Field 全体をラップし、クリック可能なカードスタイルの選択を行います。

import {
  Field,
  FieldContent,

フィールドセット

FieldSet と FieldLegend を使用して、ラベルと説明付きでラジオ項目をグループ化します。

サブスクリプションプラン

年間プランと生涯プランは大幅な割引が受けられます。

import {
  Field,
  FieldDescription,

無効

RadioGroupItem で disabled プロパティを使用して、個々の項目を無効にします。

import { Field, FieldLabel } from "@/components/ui/radix/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radix/radio-group"

無効な状態

RadioGroupItem では aria-invalid を、Field では data-invalid を使用して検証エラーを表示します。

通知設定

通知の受け取り方法を選択してください。

import {
  Field,
  FieldDescription,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

تباعد قياسي لمعظم حالات الاستخدام.

مساحة أكبر بين العناصر.

تباعد أدنى للتخطيطات الكثيفة.

"use client"

import * as React from "react"

API リファレンス

詳細については、Radix UI Radio Group のドキュメントを参照してください。