MultiSelectControl

Usage

import { MultiSelectControl } = gumponents.components;

...

attributes: {
	simpsons: {
		type: 'array',
		default: [],
	},
},

...

const options = [
	{ value: 'bart', label: 'Bart' },
	{ value: 'homer', label: 'Homer' },
	{ value: 'marge', label: 'Marge' },
];

<MultiSelectControl
	label="Choose Simpsons"
	help="Choose your favorite characters."
	options={ options }
	value={ attributes.simpsons }
	onChange={ ( simpsons ) => setAttributes( { simpsons } ) }
	placeholder="D'oh"
/>

Props

label

The label for the control.

• Type: String
• Required: No

help

The help text for the control.

• Type: String
• Required: No

options

The select options for this control.

• Type: Array
• Required: Yes

value

The selected values for this control.

• Type: Array
• Required: Yes

onChange

A function that receives the values of the control.

• Type: Function
• Required: Yes

placeholder

The placeholder which displays within the control.

• Type: String
• Required: No