A select component to display a list of items.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

disabledboolean

If select is disabled.

helpTextAttributesstring

Custom attribute for the help text.

helpTextPositionstring

The position of the help text. Above or below.

idstring

Optional id. Auto generated if not passed.

initialValuestring

Initial value for the select.

labelAttributesstring

Any custom attributes for the label.

namestring

The name attribute for the select.

onBlurfunction

On blur function handler.

onChangefunction

On change function handler.

onFocusfunction

On focus function handler.

optionsArray

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. }

sizestring

The select size. Regular (size-r), large (size-l), or extra large (size-xl).

spacingstring | number | Array | object

The spacing for the component, as a string, number, array, or object.

themestring

The theme of the select.

wrapperAttributesobject

Custom attributes for the wrapper element.

wrapperClassesstring | Array | object

Custom classes for the wrapper element.

wrapperTagNameobject

Tag to use for the textarea wrapper. Defaults to div.

ariaLabelstring

The aria-label text for the select element.

refobject | null

Ref to the component.

Since
  • 1.1.15
Source
Returns:

The select component.

Type: 
JSX.Element
Example
import Select from '@gravityforms/components/react/admin/elements/Select';

return (
    <Select
        name="select-name"
        onChange={ () => {} }
        options={ [
            {
                label: 'Option 1',
                value: 'option-1',
            },
            {
                label: 'Option 2',
                value: 'option-2',
            },
            {
                label: 'Option 3',
                value: 'option-3',
            },
        ] }
    />
);