Textarea

複数行のテキスト入力フィールドコンポーネント。長文の入力に適しています。

基本的な使い方

Preview

バリアント

Default

標準のTextarea。

Preview

Error

エラー状態のTextarea。

Preview

サイズ

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

Preview

行数の指定

rows 属性で初期の行数を指定できます。

Preview

無効状態

disabled 属性で無効化できます。

Preview

FormControlと組み合わせ

FormControlと組み合わせることで、ラベル、ヘルパーテキスト、エラーメッセージを表示できます。

Preview

エラー状態での使用

Preview

文字数カウント

最大文字数を制限し、文字数カウントを表示する例。

Preview

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'error'`	`'default'`	テキストエリアのスタイルバリアント
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	テキストエリアのサイズ
`rows`	`number`	-	表示する行数
`disabled`	`boolean`	`false`	無効状態
`placeholder`	`string`	-	プレースホルダーテキスト
`defaultValue`	`string`	-	デフォルト値
`value`	`string`	-	制御された値
`onChange`	`function`	-	値変更時のコールバック
`maxLength`	`number`	-	最大文字数
`className`	`string`	-	追加のCSSクラス

アクセシビリティ

セマンティックHTML: <textarea> 要素を使用
キーボード操作: ネイティブのテキストエリアのキーボード操作をサポート
フォーカスインジケータ: フォーカス時に明確なリングを表示
リサイズ可能: ユーザーが垂直方向にリサイズ可能（resize-y）
ラベル関連付け: FormControlと組み合わせることで適切なラベル関連付け

使用例

お問い合わせフォームでの使用例:

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

export function ContactForm() {
  const [message, setMessage] = useState('')
  const [error, setError] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()

    if (message.length < 10) {
      setError('メッセージは10文字以上必要です')
      return
    }

    console.log({ message })
    setError('')
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6 max-w-md">
      <FormControl
        label="お問い合わせ内容"
        htmlFor="message"
        required
        error={!!error}
        errorMessage={error}
        helperText={!error ? 'できるだけ詳しくご記入ください' : undefined}
      >
        <Textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          variant={error ? 'error' : 'default'}
          placeholder="お問い合わせ内容をご記入ください"
          rows={6}
          maxLength={500}
        />
      </FormControl>

      <div className="text-sm text-text-secondary text-right">
        {message.length} / 500文字
      </div>

      <Button type="submit" variant="primary" size="lg" className="w-full">
        送信
      </Button>
    </form>
  )
}