KARAKURIDESIGN SYSTEM

Textarea

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

2
Variants
2
Sizes
4
Resize
Field
Field

Playground

Preview
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無効

フォーカスStates

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

エラーStates（赤いボーダー）

disabledundefined
boolean

無効States

placeholderundefined
string

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

Field

errorfalse
boolean

エラー状態。FieldError と Textarea に自動伝播

disabledfalse
boolean

無効状態。FieldLabel と Textarea に自動伝播

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

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

FieldLabel

requiredfalse
boolean

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