TextareaControl

デザインガイドライン

使用法

TextareaControlを使用するタイミング

TextareaControlは、ユーザーが1行以上の長いテキストを入力することを促す必要がある場合に使用します。（大きなボックスは人々がより詳細に書くことを促し、小さなボックスは簡潔に書くことを促します。）

TextareaControlは次のことを行うべきです：

• ページの背景から目立ち、ユーザーが情報を入力できることを示す。
• アクティブ/非アクティブ状態を明確に区別し、フォーカススタイリングを含む。
• 明確で直接的なエラーメッセージを通じて、エラーを理解し対処しやすくする。
• 明確で説明的なラベルを使用して、要求される情報を理解しやすくする。

TextareaControlを使用しないタイミング

ユーザーが短い回答（1行以内）を入力する必要がある場合、例えば電話番号や名前などの場合はTextareaControlを使用しないでください。この場合はText Controlを使用するべきです。

するべきこと

TextareaControlを使用して、ユーザーが1行以上のテキストを入力できるようにします。

しないべきこと

短い回答にTextareaControlを使用しないでください。

構成

• 1. コンテナ
• 2. ラベル
  

コンテナ

コンテナは、テキストフィールドと周囲のコンテンツとのコントラストを作成することにより、テキストフィールドの発見性を向上させます。

するべきこと

コンテナの周りにストロークを使用し、ユーザーが情報を入力できることを明確に示します。

しないべきこと

テキストフィールドを示すために不明瞭な視覚マーカーを使用しないでください。

ラベルテキスト

ラベルテキストは、テキストフィールドに要求される情報をユーザーに通知するために使用されます。すべてのテキストフィールドにはラベルが必要です。ラベルテキストは入力フィールドの上にあり、常に表示されるべきです。ラベルは文の大文字で書いてください。

エラーテキスト

テキスト入力が受け入れられない場合、エラーメッセージは修正方法に関する指示を表示できます。エラーメッセージは入力行の下に表示され、修正されるまでヘルパーテキストを置き換えます。

開発ガイドライン

使用法

import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';
const MyTextareaControl = () => {
   const [ text, setText ] = useState( '' );
   return (
   <TextareaControl
   __nextHasNoMarginBottom
   label="Text"
   help="Enter some text"
   value={ text }
   onChange={ ( value ) => setText( value ) }
   />
   );
};

プロパティ

コンポーネントが受け入れるプロパティのセットは以下に示されます。

このセットに含まれていないプロパティは、テキストエリア要素に適用されます。

help: string | Element

このプロパティが追加されると、ヘルププロパティをコンテンツとして使用してヘルプテキストが生成されます。

• 必須: いいえ

hideLabelFromVision: boolean

trueの場合、ラベルはスクリーンリーダーにのみ表示されます。

• 必須: いいえ

label: string

このプロパティが追加されると、ラベルプロパティをコンテンツとして使用してラベルが生成されます。

• 必須: いいえ

onChange: ( value: string ) => void

テキストエリアが変更されるたびに新しい値を受け取る関数です。

• 必須: はい

rows: number

テキストエリアが含むべき行数です。

• 必須: いいえ
• デフォルト: 4

value: string

テキストエリアの現在の値です。

• 必須: はい

__nextHasNoMarginBottom: Boolean

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。

• 必須: いいえ
• デフォルト: false
  

関連コンポーネント

• ユーザーが1行のテキストのみを入力するフィールドには、TextControlコンポーネントを使用してください。