Select

Selectコンポーネントは、ドロップダウンからの選択を提供します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• テーマ対応: ライトテーマとダークテーマの自動切り替え
• バリデーション: エラー表示とヘルパーテキスト
• プレースホルダー: 選択前の表示
• カスタムスタイル: デザイントークンベースのスタイリング
• アクセシビリティ: 適切なラベルとARIA属性

使用方法

---
import { Select } from '@karan-monorepo/ui-core';
---

<kds-select
  label="Country"
  placeholder="Select your country"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
label	string	''	ラベルテキスト
value	string	''	選択された値
placeholder	string	'Select an option'	プレースホルダーテキスト
options	SelectOption[]	[]	選択肢の配列
theme	'light' | 'dark'	'light'	カラーテーマ
disabled	boolean	false	無効状態
required	boolean	false	必須フィールド
error	string	''	エラーメッセージ
helper	string	''	ヘルパーテキスト

SelectOption型

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

イベント

• change: 選択が変更された時に発火（detail.valueで値を取得）

使用例

Select Component

ドロップダウン選択を提供するSelectコンポーネント。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

Basic Usage

Light Theme

Dark Theme

With Helper Text

With Error

States

Required

Disabled

Usage Note

Using with React

SelectコンポーネントをReactで使用する場合、オプションはrefを通じて設定する必要があります：

const selectRef = useRef(null);

useEffect(() => {
  if (selectRef.current) {
    selectRef.current.options = [
      { value: 'opt1', label: 'Option 1' },
      { value: 'opt2', label: 'Option 2' }
    ];
  }
}, []);

<kds-select ref={selectRef} ... />

Reactでの使用

Reactでは、optionsプロパティをrefを通じて設定する必要があります：

import { useRef, useEffect, useState } from 'react';
import { useTheme } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme } = useTheme();
  const selectRef = useRef<any>(null);
  const [value, setValue] = useState('');

  useEffect(() => {
    if (selectRef.current) {
      selectRef.current.options = [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ];
    }
  }, []);

  return (
    <kds-select
      ref={selectRef}
      label="Select Option"
      value={value}
      theme={theme}
      onChange={(e: CustomEvent) => setValue(e.detail.value)}
    />
  );
}

基本的な使用法

<kds-select
  label="Category"
  placeholder="Select category"
  theme="light"
/>

必須フィールド

<kds-select
  label="Priority"
  placeholder="Select priority"
  required
  theme="light"
/>

エラー表示

<kds-select
  label="Status"
  placeholder="Select status"
  error="Please select a status"
  theme="light"
/>

ヘルパーテキスト付き

<kds-select
  label="Language"
  placeholder="Select language"
  helper="Choose your preferred language"
  theme="light"
/>

スタイリング

Selectコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ
• カラー: ライト/ダークテーマに対応したカラートークン
• ボーダー: デザインシステムのボーダー半径
• アイコン: カスタム矢印アイコン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Selectコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLのselect要素を使用
• ラベルとフィールドの適切な関連付け
• 必須フィールドの視覚的およびプログラム的な表示
• エラーメッセージの適切な伝達
• キーボードナビゲーションサポート

ベストプラクティス

1. 明確なラベルを提供して選択内容を明確にする
2. プレースホルダーで選択を促す
3. ヘルパーテキストで追加情報を提供
4. エラーメッセージは具体的で解決方法を示す
5. オプション数が多い場合は検索機能を検討
6. 両方のテーマでテストして良好なコントラストを確保

ブラウザサポート

Selectコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox