CodeConnect Design System

RadioGroup

ラジオボタングループコンポーネント。複数の選択肢から1つだけを選択する際に使用します。Radix UIベースで実装されています。

基本的な使い方

Preview

縦並び（デフォルト）

Preview

横並び

Preview

デフォルト値

Preview

無効状態

Preview

個別の選択肢を無効化

Preview

エラー状態

Preview

制御されたコンポーネント

Preview

Props

PropTypeDefaultDescription
optionsRadioOption[]-ラジオボタンの選択肢（必須）
valuestring-選択された値（制御コンポーネント）
defaultValuestring-初期値
onValueChange(value: string) => void-値が変更されたときのコールバック
direction'vertical' | 'horizontal''vertical'並び方向
variant'default' | 'error''default'バリアント
disabledbooleanfalse全体の無効状態
namestring-HTML name属性
requiredbooleanfalse必須フィールド
classNamestring-追加のCSSクラス

RadioOption Type

interface RadioOption {
  value: string
  label: string
  disabled?: boolean
}

アクセシビリティ

  • キーボード対応: 矢印キーで選択肢を移動
  • フォーカスインジケータ: フォーカス時に明確な視覚的フィードバック
  • ラベルクリック: ラベルをクリックしても選択できる
  • ARIA属性: 適切なARIA属性が自動的に付与される
  • スクリーンリーダー: 選択状態が正確に伝わる

使用例

支払い方法の選択:

import { RadioGroup, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'


export function PaymentMethod() {
  const [method, setMethod] = useState('card')


  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold mb-4">支払い方法</h3>
        <RadioGroup
          value={method}
          onValueChange={setMethod}
          options={[
            { value: 'card', label: 'クレジットカード' },
            { value: 'bank', label: '銀行振込' },
            { value: 'convenience', label: 'コンビニ決済' },
          ]}
        />
      </div>


      <Button variant="primary">
        {method === 'card' && 'カード情報を入力'}
        {method === 'bank' && '振込先を確認'}
        {method === 'convenience' && 'コンビニを選択'}
      </Button>
    </div>
  )
}

配送オプションの選択:

import { RadioGroup } from '@codeconnect-llc/design-system'
import { useState } from 'react'


export function ShippingOptions() {
  const [shipping, setShipping] = useState('standard')


  const options = [
    {
      value: 'standard',
      label: '通常配送（3-5営業日） - 無料'
    },
    {
      value: 'express',
      label: 'お急ぎ便（1-2営業日） - ¥500'
    },
    {
      value: 'overnight',
      label: '翌日配送 - ¥1,000',
      disabled: false // 在庫状況により有効/無効を切り替え
    },
  ]


  return (
    <div className="space-y-4">
      <h3 className="font-semibold">配送方法を選択</h3>
      <RadioGroup
        value={shipping}
        onValueChange={setShipping}
        options={options}
      />
    </div>
  )
}

アンケートフォーム:

import { RadioGroup, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'


export function SurveyForm() {
  const [satisfaction, setSatisfaction] = useState('')
  const [submitted, setSubmitted] = useState(false)


  const handleSubmit = (e) => {
    e.preventDefault()
    setSubmitted(true)
    if (!satisfaction) {
      return
    }
    // 送信処理
  }


  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <h3 className="font-semibold mb-4">
          サービスの満足度を教えてください
          <span className="text-error ml-1">*</span>
        </h3>
        <RadioGroup
          value={satisfaction}
          onValueChange={setSatisfaction}
          variant={submitted && !satisfaction ? 'error' : 'default'}
          options={[
            { value: 'very-satisfied', label: '非常に満足' },
            { value: 'satisfied', label: '満足' },
            { value: 'neutral', label: 'どちらでもない' },
            { value: 'dissatisfied', label: '不満' },
            { value: 'very-dissatisfied', label: '非常に不満' },
          ]}
        />
        {submitted && !satisfaction && (
          <p className="text-sm text-error mt-2">
            満足度を選択してください
          </p>
        )}
      </div>


      <Button type="submit" variant="primary">
        送信
      </Button>
    </form>
  )
}

設定画面:

import { RadioGroup } from '@codeconnect-llc/design-system'
import { useState } from 'react'


export function Settings() {
  const [theme, setTheme] = useState('system')
  const [notifications, setNotifications] = useState('all')


  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-lg font-semibold mb-4">テーマ</h3>
        <RadioGroup
          direction="horizontal"
          value={theme}
          onValueChange={setTheme}
          options={[
            { value: 'light', label: 'ライト' },
            { value: 'dark', label: 'ダーク' },
            { value: 'system', label: 'システム設定' },
          ]}
        />
      </div>


      <div>
        <h3 className="text-lg font-semibold mb-4">通知設定</h3>
        <RadioGroup
          value={notifications}
          onValueChange={setNotifications}
          options={[
            { value: 'all', label: 'すべての通知を受け取る' },
            { value: 'important', label: '重要な通知のみ' },
            { value: 'none', label: '通知を受け取らない' },
          ]}
        />
      </div>
    </div>
  )
}