Class: Select

new Select(options) → {Class}

A select component to use wherever a simple select is needed.

Parameters:

Name Type Description

options

object

Component options.

Properties

Name	Type	Description
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`disabled`	boolean	If select is disabled.
`helpTextAttributes`	string	Custom attribute for the help text.
`helpTextPosition`	string	The position of the help text. Above or below.
`id`	string	Optional id. Auto generated if not passed.
`initialValue`	string	Initial value for the select.
`labelAttributes`	string	Any custom attributes for the label.
`name`	string	The name attribute for the select.
`options`	Array	An array of options, each option as an object in the following structure: { customOptionAttrs: {}, // Key-value pairs of custom attributes. customOptionClasses: [], // Array of strings of custom classes. label: '', // Label as a string. value: '', // Value as a string. }
`size`	string	The select size. Regular (size-r) or extra large (size-xl).
`rendered`	boolean	Is this select already rendered in the dom, eg by php?
`renderOnInit`	boolean	Render the select on init of the class?
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`theme`	string	The theme of the select.
`target`	string	The target to render to. Any valid css selector string.
`targetPosition`	string	The insert position for the target.
`wrapperAttributes`	object	Custom attributes for the wrapper element.
`wrapperClasses`	string \| Array \| object	Custom classes for the wrapper element.
`wrapperTagName`	object	Tag to use for the textarea wrapper. Defaults to `div`.
`ariaLabel`	string	The aria-label text for the select element.

Since: 2.2.0
Source: elements/Select/index.js, line 170

Returns:

The select instance.

Type:: Class

Example

import Select from '@gravityforms/components/html/admin/elements/Select';

function Example() {
     const selectInstance = new Select( {
         name: 'select-name'
         options: { [
            {
                label: 'Option 1',
                value: 'option-1',
            },
            {
                label: 'Option 2',
                value: 'option-2',
            },
            {
                label: 'Option 3',
                value: 'option-3',
            },
        ] },
        target: '#select-target'
     } );
}