Textarea

Textareaコンポーネントは、複数行のテキスト入力を提供します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• テーマ対応: ライトテーマとダークテーマの自動切り替え
• バリデーション: エラー表示とヘルパーテキスト
• 文字数制限: maxlength属性で文字数制限と自動カウント
• リサイズ制御: ユーザーによるリサイズの有効/無効
• アクセシビリティ: 適切なラベルとARIA属性

使用方法

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

<kds-textarea
  label="Message"
  placeholder="Enter your message..."
  rows={4}
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
label	string	''	ラベルテキスト
placeholder	string	''	プレースホルダーテキスト
value	string	''	テキストエリアの値
rows	number	4	表示行数
theme	'light' | 'dark'	'light'	カラーテーマ
disabled	boolean	false	無効状態
required	boolean	false	必須フィールド
error	string	''	エラーメッセージ
helper	string	''	ヘルパーテキスト
maxlength	number	undefined	最大文字数
resize	boolean	true	リサイズ可否

イベント

• input: テキスト入力時に発火（detail.valueで値を取得）
• change: フォーカスが外れた時に発火（detail.valueで値を取得）

使用例

Textarea Component

複数行のテキスト入力を提供するTextareaコンポーネント。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

Basic Usage

Light Theme

Dark Theme

With Helper Text

With Error

With Character Limit

States

Required

Disabled

No Resize

基本的な使用法

<kds-textarea
  label="Description"
  placeholder="Enter description..."
  rows={4}
  theme="light"
/>

必須フィールド

<kds-textarea
  label="Required Field"
  placeholder="This field is required"
  required
  theme="light"
/>

エラー表示

<kds-textarea
  label="Content"
  placeholder="Enter content..."
  error="This field is required"
  theme="light"
/>

文字数制限付き

<kds-textarea
  label="Bio"
  placeholder="Tell us about yourself..."
  maxlength={200}
  theme="light"
/>

Reactでの使用

import { useTheme } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme } = useTheme();
  const [value, setValue] = useState('');

  return (
    <kds-textarea
      label="Message"
      placeholder="Enter message..."
      value={value}
      theme={theme}
      onInput={(e: CustomEvent) => setValue(e.detail.value)}
    />
  );
}

スタイリング

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

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

アクセシビリティ

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

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

ベストプラクティス

1. 明確なラベルを提供して入力内容を明確にする
2. プレースホルダーで入力例を示す
3. ヘルパーテキストで追加情報を提供
4. エラーメッセージは具体的で解決方法を示す
5. 文字数制限がある場合は明示的に表示
6. 両方のテーマでテストして良好なコントラストを確保

ブラウザサポート

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

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