Select

ドロップダウン選択コンポーネント。リストから1つの値を選択する際に使用します。Radix UIベースで実装されています。

基本的な使い方

Preview

ラベル付き

Preview

必須フィールド

Preview

ヘルパーテキスト

Preview

エラー状態

Preview

無効状態

Preview

サイズ

3つのサイズを提供します。

Preview

グループ化された選択肢

groups propを使用して、選択肢をグループ化できます。

Preview

無効な選択肢

個別の選択肢を無効にできます。

Preview

Props

Prop	Type	Default	Description
`options`	`SelectOption[]`	`[]`	選択肢の配列
`groups`	`SelectGroup[]`	`[]`	グループ化された選択肢
`placeholder`	`string`	`'選択してください'`	プレースホルダー
`value`	`string`	-	選択された値（制御コンポーネント）
`defaultValue`	`string`	-	初期値
`onChange`	`(value: string) => void`	-	値が変更されたときのコールバック
`label`	`string`	-	ラベル
`helperText`	`string`	-	ヘルパーテキスト
`errorMessage`	`string`	-	エラーメッセージ
`error`	`boolean`	`false`	エラー状態
`disabled`	`boolean`	`false`	無効状態
`required`	`boolean`	`false`	必須フィールド
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	サイズ
`className`	`string`	-	追加のCSSクラス

SelectOption Type

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

SelectGroup Type

interface SelectGroup {
  label: string
  options: SelectOption[]
}

アクセシビリティ

キーボードナビゲーション: 矢印キーで選択肢を移動
Enter/Spaceキー: 選択肢を選択
ESCキー: ドロップダウンを閉じる
検索: タイプして選択肢を絞り込み
ARIA属性: 適切なARIA属性が自動的に付与される

使用例

フォームでの使用:

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

export function SignupForm() {
  const [country, setCountry] = useState('')

  return (
    <form className="space-y-6">
      <Select
        label="国"
        required
        value={country}
        onChange={setCountry}
        options={[
          { value: 'jp', label: '日本' },
          { value: 'us', label: 'アメリカ' },
          { value: 'uk', label: 'イギリス' },
          { value: 'fr', label: 'フランス' },
          { value: 'de', label: 'ドイツ' },
        ]}
        placeholder="国を選択"
      />

      <Button type="submit" variant="primary">
        登録
      </Button>
    </form>
  )
}

動的な選択肢の読み込み:

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

export function DynamicSelect() {
  const [options, setOptions] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/categories')
      .then(res => res.json())
      .then(data => {
        setOptions(data.map(item => ({
          value: item.id,
          label: item.name,
        })))
        setLoading(false)
      })
  }, [])

  return (
    <Select
      label="カテゴリー"
      options={options}
      disabled={loading}
      placeholder={loading ? '読み込み中...' : 'カテゴリーを選択'}
    />
  )
}