Module: Select

A select component to display a list of items.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`ariaLabel`	string	The aria-label text for the select element.
`controlled`	boolean	Whether the select is controlled or not.
`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.
`onBlur`	function	On blur function handler.
`onChange`	function	On change function handler.
`onFocus`	function	On focus function handler.
`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`), large (`size-l`), or extra large (`size-xl`).
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`theme`	string	The theme of the select.
`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`.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: elements/Select/index.js, line 9

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',
            },
        ] }
    />
);