デザインガイドライン

使用法

TextControlsを使用するタイミング

TextControlsは自由なテキスト入力に最適です。ユーザーに選択してもらいたい事前定義されたオプションがある場合は、SelectControl、RadioControl、CheckboxControl、またはRangeControlなど、より制約のあるコンポーネントを使用するのが最適です。

TextControlsは単一行のフィールドであるため、長い回答を収集するには適していません。その場合は、テキストエリアを使用してください。

TextControlsは次のことを満たすべきです：

  • 目立ち、ユーザーが情報を入力できることを示す。
  • 明確に区別された状態（選択済み/未選択、アクティブ/非アクティブ）を持つ。
  • 要求された情報を理解しやすくし、エラーに対処しやすくする。
  • 可視ラベルを持つ；プレースホルダーテキストは、ユーザーが入力を開始すると消えるため、ラベルの代わりにはなりません。

構成

番号付きラベルのあるTextControlコンポーネントの特徴

  • 1. ラベル
  • 2. 入力コンテナ
  • 3. 入力テキスト

ラベルテキスト

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

コンテナ

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

入力エリアを明確に示すためにコンテナの周りにストロークがあるTextControl

するべきこと

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

入力エリアを示す明確な視覚マーカーがないTextControl

しないべきこと

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

開発ガイドライン

使用法

追加のCSSクラスの名前を入力するためのユーザーインターフェースをレンダリングします。 

  1. import { useState } from 'react';
  2. import { TextControl } from '@wordpress/components';
  4. const MyTextControl = () => {
  5.    const [ className, setClassName ] = useState( '' );
  7.    return (
  8.    <TextControl
  9.    __nextHasNoMarginBottom
  10.    label="Additional CSS Class"
  11.    value={ className }
  12.    onChange={ ( value ) => setClassName( value ) }
  13.    />
  14.    );
  15. };

プロパティ

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

このセットに含まれていないプロパティは、入力要素に適用されます。

label

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

  • タイプ: String
  • 必須: いいえ

hideLabelFromVision

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

  • タイプ: Boolean
  • 必須: いいえ

help

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

  • タイプ: String
  • 必須: いいえ

type

レンダリングする入力要素のタイプ。デフォルトは「text」です。

  • タイプ: String
  • 必須: いいえ
  • デフォルト: 「text」

value

入力の現在の値。

  • タイプ: String | Number
  • 必須: はい

className

「components-base-control」とともにラッパーdivのクラスに追加されるクラス。

クラス名が渡されない場合は、components-base-controlのみが使用されます。

  • タイプ: String
  • 必須: いいえ

onChange

入力の値を受け取る関数。

  • タイプ: function
  • 必須: はい

__next40pxDefaultSize

将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。

  • タイプ: Boolean
  • 必須: いいえ
  • デフォルト: false

関連コンポーネント

  • ユーザーにより制約のある入力オプションを提供するには、SelectControl、RadioControl、CheckboxControl、またはRangeControlを使用します。