SelectControl

デザインガイドライン

使用法

セレクトコントロールを使用するタイミング

リストから1つまたは複数のオプションを選択させたい場合にセレクトコントロールを使用します。

• 強いデフォルトオプションがある場合。
• 利用可能なスペースが少ない場合。
• メニューの隠れた部分の内容がラベルと選択された項目から明らかである場合。たとえば、「月:」というラベルのオプションメニューがあり、「1月」が選択されている場合、ユーザーはメニューに12か月が含まれていると合理的に推測できます。

オプションのリストが短い場合は、代わりにRadioControlを使用することを検討してください。

するべきこと

複数のオプションがある場合はセレクトを使用します。

しないべきこと

バイナリ質問にセレクトを使用しないでください。

動作

SelectControlには二重矢印インジケーターが含まれています。メニューはセレクトの上に重ねて表示されます。

開閉

メニューが画面に表示されると、ユーザーがメニュー項目を選択するか、メニューの外をクリックするか、別のブラウザタブに切り替えるまで開いたままになります。

コンテンツガイドライン

ラベル

SelectControlには、上または左にテキストラベルを使用してラベルを付けます。ラベルをクリックすると、ユーザーは直接セレクトにフォーカスできます。

するべきこと

ラベルをセレクトの上または左に配置します。

しないべきこと

ラベルをセレクトの中央に配置したり、セレクトの側に右揃えにしたりしないでください。

メニュー項目

• メニュー項目は短くする必要があります — 理想的には単語1つ — そして文の大文字小文字を使用します。
• メニュー項目内で完全な文を使用しないでください。
• メニュー項目は、ユーザーにとって最も便利な方法で順序付けされていることを確認してください。アルファベット順または最近の順序が好まれます。

するべきこと

短いメニュー項目を使用します。

しないべきこと

メニュー内で文を使用しないでください。

開発ガイドライン

使用法

画像のサイズを選択するためのユーザーインターフェースをレンダリングします。

import { useState } from 'react';
import { SelectControl } from '@wordpress/components';
const MySelectControl = () => {
   const [ size, setSize ] = useState( '50%' );
   return (
   <SelectControl
   label="Size"
   value={ size }
   options={ [
   { label: 'Big', value: '100%' },
   { label: 'Medium', value: '50%' },
   { label: 'Small', value: '25%' },
   ] }
   onChange={ ( newSize ) => setSize( newSize ) }
   __nextHasNoMarginBottom
   />
   );
};

リストから複数のユーザーを選択するためのユーザーインターフェースをレンダリングします。

<SelectControl
   multiple
   label={ __( 'User' ) }
   value={ this.state.users } // e.g: value = [ 'a', 'c' ]
   onChange={ ( users ) => {
   this.setState( { users } );
   } }
   options={ [
   { value: '', label: 'Select a User', disabled: true },
   { value: 'a', label: 'User A' },
   { value: 'b', label: 'User B' },
   { value: 'c', label: 'User c' },
   ] }
   __nextHasNoMarginBottom
/>

グループ内のアイテムを選択するためのユーザーインターフェースをレンダリングします。

const [ item, setItem ] = useState( '' );
// ...
<SelectControl
   label={ __( 'My dinosaur' ) }
   value={ item } // e.g: value = 'a'
   onChange={ ( selection ) => { setItem( selection ) } }
   __nextHasNoMarginBottom
>
   <optgroup label="Theropods">
   <option value="Tyrannosaurus">Tyrannosaurus</option>
   <option value="Velociraptor">Velociraptor</option>
   <option value="Deinonychus">Deinonychus</option>
   </optgroup>
   <optgroup label="Sauropods">
   <option value="Diplodocus">Diplodocus</option>
   <option value="Saltasaurus">Saltasaurus</option>
   <option value="Apatosaurus">Apatosaurus</option>
   </optgroup>
</SelectControl>

プロパティ

• コンポーネントが受け入れるプロパティのセットは以下に指定されます。
• このセットに含まれていないプロパティはセレクト要素に適用されます。
• 参照すべき重要なプロパティはvalueです。multipleがtrueの場合、valueは選択されたオプションの値の配列である必要があります。
• multipleがfalseの場合、valueは選択されたオプションの値と等しくする必要があります。

ラベル

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

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

ラベル位置

ラベルの位置（top、side、またはbottom）。

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

視覚からラベルを隠す

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

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

ヘルプ

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

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

複数

このプロパティが追加されると、複数の値を選択できます。渡されるvalueは配列である必要があります。

ほとんどの場合、FormTokenFieldまたはCheckboxControlコンポーネントを使用することが好ましいです。

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

オプション

次のプロパティを含むオブジェクトの配列、および他のoption要素属性:

• label: (文字列) ユーザーに表示されるラベル。
• value: (文字列) 選択された値を選択するために使用される内部値。これは、オプションが選択されたときにonChangeに渡される値でもあります。
• disabled: (ブール値) オプションが無効属性を持つべきかどうか。
• タイプ: Array
• 必須: いいえ

子要素

 `````children`````プロパティを使用して、`````optgroup`````や`````options`````のようなレンダリングされるアイテムのスタイルをより制御し、`````options`````プロパティの参照更新による再レンダリングを回避することができます。  
 – タイプ: `````ReactNode

– 必須: いいえ

onChange

新しく選択されるオプションの値を入力として受け取る関数。

複数がtrueの場合、受け取る値は選択された値の配列です。

複数がfalseの場合、受け取る値は新しく選択された値の単一の値です。

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

値

選択されたオプションの値。multipleがtrueの場合、valueは選択されたオプションの値の配列である必要があります。

• タイプ: String|String[]
• 必須: いいえ

バリアント

コントロールのスタイルバリアント。

• タイプ: 'default' | 'minimal'
• 必須: いいえ
• デフォルト: 'default'
  

__next40pxDefaultSize

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

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

__nextHasNoMarginBottom

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

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

関連コンポーネント

• セットから1つのオプションを選択し、すべての利用可能なオプションを一度に表示したい場合は、Radioコンポーネントを使用します。
• セットから1つまたは複数のアイテムを選択するには、CheckboxControlコンポーネントを使用します。
• 単一の設定をオンまたはオフに切り替えるには、ToggleControlコンポーネントを使用します。