SelectControl 是 WordPress 组件库中的一个控件,用于创建单选或多选的下拉菜单,基于浏览器的原生
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 ) }
__next40pxDefaultSize
/>
);
};SelectControl allow users to select from a single or multiple option menu. It functions as a wrapper around the browser’s native <select> element.

Use a select control when:
If you have a shorter list of options, consider using RadioControl instead.

Do
Use selects when you have multiple options.

Don’t
Use selects for binary questions.
A SelectControl includes a double-arrow indicator. The menu appears layered over the select.
Once the menu is displayed onscreen, it remains open until the user chooses a menu item, clicks outside of the menu, or switches to another browser tab.
Label the SelectControl with a text label above it, or to its left, using sentence capitalization. Clicking the label allows the user to focus directly on the select.

Do
Position the label above, or to the left of, the select.

Don’t
Position the label centered over the select, or right aligned against the side of the select.
Menu Items

Do
Use short menu items.

Don’t
Use sentences in your menu.
Render a user interface to select the size of an image.
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 ) }
__next40pxDefaultSize
/>
);
};
Render a user interface to select multiple users from a list.
<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' },
] }
__next40pxDefaultSize
/>
Render a user interface to select items within groups
const [ item, setItem ] = useState( '' );
// ...
<SelectControl
label={ __( 'My dinosaur' ) }
value={ item } // e.g: value = 'a'
onChange={ ( selection ) => { setItem( selection ) } }
__next40pxDefaultSize
>
<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. If multiple is true, value should be an array with the values of the selected options.multiple is false, value should be equal to the value of the selected option.If this property is added, a label will be generated using label property as the content.
StringThe position of the label (top, side, or bottom).
StringIf true, the label will only be visible to screen readers.
BooleanIf this property is added, a help text will be generated using help property as the content.
String|ElementIf this property is added, multiple values can be selected. The value passed should be an array.
In most cases, it is preferable to use the FormTokenField or CheckboxControl components instead.
BooleanAn array of objects containing the following properties, as well as any other option element attributes:
label: (string) The label to be shown to the user.value: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.disabled: (boolean) Whether or not the option should have the disabled attribute.ArrayAn alternative to the options prop.
Use the children prop to have more control on the style of the items being rendered, like optgroups or options and possibly avoid re-rendering due to the reference update on the options prop.
– Type: ReactNode
– Required: No
A function that receives the value of the new option that is being selected as input.
If multiple is true the value received is an array of the selected value.
If multiple is false the value received is a single value with the new selected value.
functionThe value of the selected option. If multiple is true, the value should be an array with the values of the selected options.
String|String[]The style variant of the control.
'default' | 'minimal''default'Start opting into the larger default height that will become the default size in a future version.
BooleanfalseRadio component.CheckboxControl component.ToggleControl component.