CodeConnect Design System

Switch

トグルスイッチコンポーネント。オン/オフの2つの状態を切り替える際に使用します。Radix UIベースで実装されています。

基本的な使い方

Preview

ラベル付き

label propでラベルを追加できます。

Preview

オン/オフ状態

Preview

無効状態

Preview

エラー状態

Preview

複数のスイッチ

Preview

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

Preview

Props

PropTypeDefaultDescription
labelstring-スイッチのラベル
checkedboolean-チェック状態（制御コンポーネント）
defaultCheckedboolean-初期チェック状態
onCheckedChange(checked: boolean) => void-チェック状態が変更されたときのコールバック
disabledbooleanfalse無効状態
variant'default' | 'error''default'バリアント
idstring-HTML id属性
namestring-HTML name属性
valuestring-HTML value属性
requiredbooleanfalse必須フィールド
classNamestring-追加のCSSクラス

アクセシビリティ

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

使用例

通知設定:

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


export function NotificationSettings() {
  const [emailNotifications, setEmailNotifications] = useState(true)
  const [pushNotifications, setPushNotifications] = useState(true)
  const [smsNotifications, setSmsNotifications] = useState(false)


  return (
    <div className="space-y-6">
      <h2 className="text-xl font-bold">通知設定</h2>


      <div className="space-y-4">
        <Switch
          label="メール通知"
          checked={emailNotifications}
          onCheckedChange={setEmailNotifications}
        />
        <Switch
          label="プッシュ通知"
          checked={pushNotifications}
          onCheckedChange={setPushNotifications}
        />
        <Switch
          label="SMS通知"
          checked={smsNotifications}
          onCheckedChange={setSmsNotifications}
        />
      </div>
    </div>
  )
}

プライバシー設定:

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


export function PrivacySettings() {
  const [settings, setSettings] = useState({
    profilePublic: true,
    showEmail: false,
    showPhoneNumber: false,
    allowMessages: true,
  })


  const updateSetting = (key: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }))
  }


  return (
    <div className="space-y-6">
      <h2 className="text-xl font-bold">プライバシー設定</h2>


      <div className="space-y-4">
        <div>
          <Switch
            label="プロフィールを公開"
            checked={settings.profilePublic}
            onCheckedChange={(checked) => updateSetting('profilePublic', checked)}
          />
          <p className="text-sm text-text-secondary ml-14 mt-1">
            他のユーザーがあなたのプロフィールを閲覧できます
          </p>
        </div>


        <div>
          <Switch
            label="メールアドレスを表示"
            checked={settings.showEmail}
            onCheckedChange={(checked) => updateSetting('showEmail', checked)}
          />
          <p className="text-sm text-text-secondary ml-14 mt-1">
            プロフィールにメールアドレスを表示します
          </p>
        </div>


        <div>
          <Switch
            label="電話番号を表示"
            checked={settings.showPhoneNumber}
            onCheckedChange={(checked) => updateSetting('showPhoneNumber', checked)}
          />
          <p className="text-sm text-text-secondary ml-14 mt-1">
            プロフィールに電話番号を表示します
          </p>
        </div>


        <div>
          <Switch
            label="メッセージを許可"
            checked={settings.allowMessages}
            onCheckedChange={(checked) => updateSetting('allowMessages', checked)}
          />
          <p className="text-sm text-text-secondary ml-14 mt-1">
            他のユーザーからメッセージを受け取ります
          </p>
        </div>
      </div>
    </div>
  )
}

機能の有効化/無効化:

import { Switch, Alert } from '@codeconnect-llc/design-system'
import { useState } from 'react'


export function FeatureToggles() {
  const [darkMode, setDarkMode] = useState(false)
  const [betaFeatures, setBetaFeatures] = useState(false)


  return (
    <div className="space-y-6">
      <h2 className="text-xl font-bold">機能設定</h2>


      <div className="space-y-4">
        <Switch
          label="ダークモード"
          checked={darkMode}
          onCheckedChange={setDarkMode}
        />


        <Switch
          label="ベータ機能を有効にする"
          checked={betaFeatures}
          onCheckedChange={setBetaFeatures}
        />


        {betaFeatures && (
          <Alert variant="warning" title="ベータ機能について">
            ベータ機能は開発中のため、予期しない動作が発生する可能性があります。
          </Alert>
        )}
      </div>
    </div>
  )
}

自動保存の制御:

import { Switch, useToast } from '@codeconnect-llc/design-system'
import { useState, useEffect } from 'react'


export function AutoSaveToggle() {
  const [autoSave, setAutoSave] = useState(true)
  const { toast } = useToast()


  useEffect(() => {
    if (autoSave) {
      toast({
        variant: 'success',
        title: '自動保存が有効になりました',
        duration: 2000,
      })
    }
  }, [autoSave])


  return (
    <div className="space-y-4">
      <Switch
        label="自動保存"
        checked={autoSave}
        onCheckedChange={setAutoSave}
      />
      <p className="text-sm text-text-secondary">
        {autoSave
          ? '変更は自動的に保存されます'
          : '手動で保存ボタンを押す必要があります'}
      </p>
    </div>
  )
}

フォーム内での使用:

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


export function SubscriptionForm() {
  const [newsletter, setNewsletter] = useState(false)
  const [marketing, setMarketing] = useState(false)


  const handleSubmit = (e) => {
    e.preventDefault()
    console.log({
      newsletter,
      marketing,
    })
  }


  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <h2 className="text-xl font-bold">購読設定</h2>


      <div className="space-y-4">
        <Switch
          label="ニュースレターを受け取る"
          checked={newsletter}
          onCheckedChange={setNewsletter}
        />


        <Switch
          label="マーケティングメールを受け取る"
          checked={marketing}
          onCheckedChange={setMarketing}
        />
      </div>


      <Button type="submit" variant="primary">
        設定を保存
      </Button>
    </form>
  )
}