7onicDESIGN SYSTEM

Textarea

テキストエリアは、複数行のテキストを入力するためのフォーム要素です。コメント、説明、メッセージなど、長文の入力に使用します。

2
Variants
2
Sizes
4
Resize
Field
Field

Playground

プレビュー
defaultstandard
Variant
Size
Radius
Resize
Rows
State
Field
Focus
<Textarea placeholder="Type your message..." />

Variants

Default
標準的なボーダースタイル。フォームの一般的な入力欄に使用。
一般的なフォーム
Filled
背景色付きスタイル。視覚的に目立たせたい入力欄に。
カード内フォーム

Sizes

Textareaの高さはrows属性で制御します。sizeプロパティはパディングとフォントサイズのみを調整します。

compact
パディング8px 12px
フォント14px
standard
パディング12px 16px
フォント16px

Features

Resize

None
none

リサイズ不可。固定サイズが必要な場合。

Vertical
vertical

縦方向のみ。最も一般的なオプション。

Horizontal
horizontal

横方向のみ。特殊なケース用。

Both
both

両方向。自由度が必要な場合。

States

Default通常

0/500

Errorエラー
Disabled無効

フォーカス状態

focusRing: false（デフォルト）: クリック時はボーダー変化のみ、キーボードTab時はフォーカスリング自動表示。focusRing: true: 常にフォーカスリングを表示。

API

Props

variant"default"
"default" | "filled"

テキストエリアの視覚スタイル

size"default"
"compact" | "default"

パディングとフォントサイズ（compact: 狭いスペース用）

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

resize"vertical"
"none" | "vertical" | "horizontal" | "both"

リサイズ方向

rows4
number

表示行数

focusRingfalse
boolean

カスタムフォーカスリング表示。falseでもキーボード操作時は自動表示

errorundefined
boolean

エラー状態（赤いボーダー）

disabledundefined
boolean

無効状態

placeholderundefined
string

プレースホルダーテキスト

Field

errorfalse
boolean

エラー状態。Field.Error と Textarea に自動伝播

disabledfalse
boolean

無効状態。Field.Label と Textarea に自動伝播

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

子要素間の間隔 (0 / 4 / 6 / 8 / 12px)

Field.Label

requiredfalse
boolean

必須マーク（*）をラベル末尾に表示

Anatomy

1
2
Comment
3
Share your thoughts or feedback.
The more detail you provide,
the faster we can respond.
4
52 / 200
1
Field
Field ラッパー
2
Label
ラベル
3
Textarea Area
テキスト入力エリア
4
Char Count
文字数（任意）

Best Practices

✓

推奨

  • ✓適切なrows属性で初期高さを設定
  • ✓文字数制限がある場合はカウンターを表示
  • ✓リサイズが不要な場合はresize="none"を設定
  • ✓プレースホルダーで入力例を示す
✕

避けるべき

  • ✗短いテキストにTextareaを使用しない（→ Input）
  • ✗極端に小さいrowsを設定しない
  • ✗文字数制限を事前に明示せずに切り捨てない
  • ✗ラベルなしで使用しない

Accessibility

キーボード操作

Tabフォーカス移動
Enter改行
Escフォーカス解除

WCAG 2.2 準拠

  • フォーカスインジケーター
  • aria-invalid（エラー時）
  • aria-describedby サポート
  • コントラスト比 4.5:1 以上