テキストエリア

React Ariaで実装した複数行の入力欄。Inputと同じ枠、ラベル、ヒント、状態に加え、メモ、メッセージ、設定画面に使える高さの自動調整と文字数表示を備えています。

Markdown is supported.

インストール

CLI または手動で textarea コンポーネントを追加できます。

ダークモード対応:この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add textarea

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー&ペーストの例は、標準のインポートを使います。

サイズ

medium そして、 small マッチング 入力's insets なので、2 つのコンポーネントはシームなしでフォームにスタックします。 rows 休息高さを設定します。

Medium is the default, 14px type in a 8px shell.
Small tightens the horizontal inset to match a small input.

自動リサイズ

autoResize フィールドをテキスト、一度に1行ずつ成長させる rows そして、 maxRows. それをスクロールする天井を過ぎて下さい。高さはあらゆる変更のゼロから測定されます、従ってテキストが取除かれるときフィールドは戻ります。

The field grows to eight lines, then scrolls.

キャラクターカウント

showCount ヒント列にカウンターを置きます。 maxLength 読み込まれる 12/160 そして、ブラウザは限界を強制します。 1つのだけカウントなしで。

Appears on your public profile.49/160

アメリカ

Hoverとフォーカスクロスフェードリング。 isDisabled そして、 isInvalid フィールド、ヒント、ラベルの両方をオーバーライドし、塗り直します。 resize="none" 固定高さが読者の快適さよりも重要であるとき、ネイティブグリップハンドルを削除します。

This is a hint about this field.
This is a hint about this field.
This is a hint about this field.
Please write at least 200 characters.