Select field renders a native select element. Supports optgroups
and disabled
attributes.
...
array(
'title' => 'My select field title',
'id' => 'select-option',
'desc' => 'Short description for the field',
'tab' => 'main',
'type' => 'select',
'choices' => ['First option', 'Second option', 'Third option']
),
...
This will produce the following
It will use the option text as the value. If you wish to separate values from option texts use the following syntax for the choices
key:
...
'choices' => array(
array(
'value' => 'First value',
'label' => 'First option',
),
array(
'value' => 'Second value',
'label' => 'Second option',
),
array(
'value' => 'Third value',
'label' => 'Third option',
),
)
...
If disabled
keys are specified, they'll be respected. E.g:
...
'choices' => array(
array(
'value' => 'First value',
'label' => 'First option',
),
array(
'value' => 'Second value',
'label' => 'Second option',
),
array(
'value' => 'Third value',
'label' => 'Third option',
'disabled' => true,
),
)
...
will result in the following
Notice that the third option is not selectable.
You can create complex select elements with optgroups
. To do that, use the optgroups
key instead of choices
. Each optgroup
has the following signature:
array(
'label' => 'Label text',
'choices' => array(),
),
where label
will store the text for the label
attribute and choices
is an array of options like in the example configuration.
The following configuration
...
'optgroups' => array(
array(
'label' => 'Label one',
'choices' => array(
array(
'value' => 'Label one first',
'label' => 'First option',
),
array(
'value' => 'Label one second',
'label' => 'Second option',
'disabled' => true,
),
array(
'value' => 'Label one third',
'label' => 'Third option',
),
),
),
array(
'label' => 'Label two',
'disabled' => true,
'choices' => ['one', 'two', 'three'],
),
array(
'label' => 'Label three',
'choices' => array(
array(
'value' => 'Label three first',
'label' => 'First option',
),
array(
'value' => 'Label three first',
'label' => 'Second option',
'disabled' => true,
),
),
),
),
...
will result in the following
Note that the whole second optgroup
is disabled because the disabled
key is specified for the optgoup
itself, not like individual disabled
keys in groups 1 and 3.
Name | Type | Description |
---|---|---|
type |
string | select (required) |
id |
string | Unique ID that will be used to retrieve the value (required) |
tab |
string | Specifies in which tab this option will be rendered |
title |
string | Shows a heading to the left of the field |
desc |
string | Shows a description text (can have HTML) |
choices |
array | Can be an array of strings or an array of arrays with value and label keys. See examples above. |
optgroups |
array | Array of arrays with label and choices keys. See optgroups above. |