Textarea

fandhe-frontend-pre-styled-ui の textarea mod が提供するスタイル済み Textarea 部品です。

Note

Anatomy は共有スコープ field のパーツ構成として導出されます。ラベル・補助テキスト・エラーテキスト・必須マークの型階層は Field が提供します。複数のフィールドをまとめるグループ化は Fieldset が提供します。入力欄の前後に addon（テキスト・アイコン・ボタン）を付ける合成は Input Group が提供します。

Demo

ブラウザネイティブ挙動をそのまま尊重する静的複数行テキスト入力部品。invalid/disabled 状態は headless field:: へ委譲した data-* 属性・aria-invalid で表現します。

This field is required.

Features

variant/size の 2 軸を持ち、headless-ui の field::textarea（data-scope="field"）へ委譲する。
autoresize フラグでコンテンツに応じた自動リサイズの意図を headless 側へ伝える。

Anatomy

textarea
error-text

API Reference

Arguments

Name	Type	Default	Description
`props`	`&TextareaProps`	—	`variant`・`size` を束ねる構造体。
`field`	`&FieldProps<'_>`	—	headless-ui `field` スコープ共通の状態。
`autoresize`	`bool`	`false`	自動リサイズを有効にするかどうかのヒント。
`extra_attrs`	`Vec<(&str, &str)>`	—	`<textarea>` へ合成する追加属性。
`children`	`Vec<Node>`	—	テキストコンテンツとなる子ノード。

Data Attributes

Part	Attribute	Observed Values
`error-text`	`data-invalid`	（値なし）
`textarea`	`data-disabled`	（値なし）
`textarea`	`data-invalid`	（値なし）

CSS Variables

Variable	Default
`--fandhe-field-label-bg`	`var(--fandhe-color-bg)`

Examples

ラベル・補助テキストとの組み合わせ

textarea はラベル・補助テキストの型階層を持たず、field（/themes/field/）が担う（INPUT の同種 Examples と同型の合成、イシュー #2022、shadcn/ui の label + textarea + description パターンを本リポジトリの既存 API で再現）。

MessageEnter your message below.