Switch branches/tags
@wordpress/wordcount@2.0.2 @wordpress/wordcount@2.0.1 @wordpress/wordcount@2.0.0 @wordpress/wordcount@1.1.3 @wordpress/wordcount@1.1.2 @wordpress/wordcount@1.1.1 @wordpress/wordcount@1.1.0 @wordpress/viewport@2.0.5 @wordpress/viewport@2.0.4 @wordpress/viewport@2.0.3 @wordpress/viewport@2.0.2 @wordpress/viewport@2.0.1 @wordpress/viewport@2.0.0 @wordpress/viewport@1.0.4 @wordpress/viewport@1.0.3 @wordpress/viewport@1.0.2 @wordpress/viewport@1.0.1 @wordpress/viewport@1.0.0 @wordpress/url@2.1.0 @wordpress/url@2.0.2 @wordpress/url@2.0.1 @wordpress/url@2.0.0 @wordpress/url@1.2.3 @wordpress/url@1.2.2 @wordpress/url@1.2.1 @wordpress/url@1.2.0 @wordpress/token-list@1.0.2 @wordpress/token-list@1.0.1 @wordpress/token-list@1.0.0 @wordpress/shortcode@2.0.2 @wordpress/shortcode@2.0.1 @wordpress/shortcode@2.0.0 @wordpress/shortcode@1.0.3 @wordpress/shortcode@1.0.2 @wordpress/shortcode@1.0.1 @wordpress/shortcode@1.0.0 @wordpress/shortcode@1.0.0-alpha.3 @wordpress/shortcode@1.0.0-alpha.2 @wordpress/scripts@2.4.0 @wordpress/scripts@2.3.1 @wordpress/scripts@2.3.0 @wordpress/scripts@2.2.1 @wordpress/scripts@2.2.0 @wordpress/scripts@2.1.0 @wordpress/scripts@2.0.3 @wordpress/scripts@2.0.2 @wordpress/scripts@2.0.1 @wordpress/scripts@2.0.0 @wordpress/rich-text@1.0.1 @wordpress/rich-text@1.0.0 @wordpress/rich-text@1.0.0-beta.2 @wordpress/rich-text@1.0.0-beta.1 @wordpress/redux-routine@3.0.3 @wordpress/redux-routine@3.0.2 @wordpress/redux-routine@3.0.1 @wordpress/redux-routine@3.0.0 @wordpress/redux-routine@2.0.0 @wordpress/redux-routine@1.0.0 @wordpress/postcss-themes@1.0.4 @wordpress/postcss-themes@1.0.3 @wordpress/postcss-themes@1.0.2 @wordpress/postcss-themes@1.0.1 @wordpress/postcss-themes@1.0.0 @wordpress/postcss-themes@1.0.0-alpha.3 @wordpress/postcss-themes@1.0.0-alpha.2 @wordpress/postcss-themes@1.0.0-alpha.1 @wordpress/postcss-themes@1.0.0-alpha.0 @wordpress/plugins@2.0.5 @wordpress/plugins@2.0.4 @wordpress/plugins@2.0.3 @wordpress/plugins@2.0.2 @wordpress/plugins@2.0.1 @wordpress/plugins@2.0.0 @wordpress/plugins@1.0.4 @wordpress/plugins@1.0.3 @wordpress/plugins@1.0.2 @wordpress/plugins@1.0.1 @wordpress/plugins@1.0.0 @wordpress/plugins@1.0.0-alpha.3 @wordpress/plugins@1.0.0-alpha.2 @wordpress/nux@2.0.5 @wordpress/nux@2.0.4 @wordpress/nux@2.0.3 @wordpress/nux@2.0.2 @wordpress/nux@2.0.1 @wordpress/nux@2.0.0 @wordpress/nux@1.1.1 @wordpress/nux@1.1.0 @wordpress/nux@1.0.2 @wordpress/nux@1.0.1 @wordpress/nux@1.0.0 @wordpress/npm-package-json-lint-config@1.1.5 @wordpress/npm-package-json-lint-config@1.1.4 @wordpress/npm-package-json-lint-config@1.1.3 @wordpress/npm-package-json-lint-config@1.1.2 @wordpress/npm-package-json-lint-config@1.1.1 @wordpress/npm-package-json-lint-config@1.1.0 @wordpress/list-reusable-blocks@1.1.3 @wordpress/list-reusable-blocks@1.1.2 @wordpress/list-reusable-blocks@1.1.1
Nothing to show
Find file History
mmtr and gziolo Add components examples in README.md files - Part 2 (#8338)
* Components examples: Modal

* Components examples: Modal

* Components examples assigned to const variables

* Components examples: Notice

* Components examples: Panel

* Components examples: Placeholder

* Components examples: Popover

* Components examples: QueryControls

* Components examples: RadioControl

* Components examples: RangeControl

* Components examples: ResponsiveWrapper

* Components examples: SandBox

* Components examples: ScrollLock

* Components examples: SelectControl

* Components examples: ServerSideRender

* Add metadata using YAML front matter so examples can be extracted
dynamically

* Add metadata using YAML front matter so examples can be extracted
dynamically

* Remove YAML front matter

* Components examples: SlotFill

* Components examples: Spinner

* Components examples: TabPanel

* Components examples: TextControl

* Components examples: TextareaControl

* Components examples: ToggleControl

* Components examples: Toolbar

* Components examples: Tooltip

* Components examples: TreeSelect

* Components examples: NavigableContainer

* Components examples: navigateRegions

* Components examples: withConstrainedTabbing

* Components examples: withContext

* Components examples: withFallbackStyles

* Components examples: withFilters

* Components examples: withFocusOutside

* Components examples: withFocusReturn

* Components examples: withNotices

* Components examples: withSpokenMessages

* Components examples: withAPIData

* Contributing guidelines for the components

* Contributing guidelines for the components

* Contributing guidelines for the components

* Add dummy attributes to ServerSideRender example
Latest commit 5b81cbc Aug 8, 2018

README.md

SelectControl

SelectControl component is used to generate select input fields.

Usage

Render a user interface to select the size of an image.

import { SelectControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MySelectControl = withState( {
	size: '50%',
} )( ( { size, setState } ) => ( 
	<SelectControl
		label="Size"
		value={ size }
		options={ [
			{ label: 'Big', value: '100%' },
			{ label: 'Medium', value: '50%' },
			{ label: 'Small', value: '25%' },
		] }
		onChange={ ( size ) => { setState( { size } ) } }
	/>
) );

Render a user interface to select multiple users from a list.

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

Props

The set of props accepted by the component will be specified below. Props not included in this set will be applied to the select element. One important prop to refer is value, if multiple is true, value should be an array with the values of the selected options. If multiple is false value should be equal to the value of the selected option.

label

If this property is added, a label will be generated using label property as the content.

  • Type: String
  • Required: No

help

If this property is added, a help text will be generated using help property as the content.

  • Type: String
  • Required: No

multiple

If this property is added, multiple values can be selected. The value passed should be an array.

  • Type: Boolean
  • Required: No

options

An array of objects containing the following properties:

  • label: (string) The label to be shown to the user.
  • value: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
  • Type: Array
  • Required: No

onChange

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.

  • Type: function
  • Required: Yes