Select

Supports responsive values

Displays a select box, also known as a dropdown menu. A select box can be responsive or non-responsive and has two or more items to choose from.

Property Schema

Key	Value	Notes
title	string	See Title for more information
id	string	See ID for more information
format	string	See Format for more information
visible	string	See Visible for more information
enabled	string	See Enabled for more information
responsive	boolean	See Responsive for more information, default: true
select	object	See Select Schema below

Select Schema

Key	Value	Notes
default	string	Value of the default item to be selected
items	array	See Item Schema below

Item Schema

Key	Value	Notes
title	string	The item title to be displayed in the dropdown
value	string	The value to be returned

Return Value

The returned value is dependent on the responsive setting and either returns a string of tailwind classes or the raw value.

Responsive	Return Value
true	string of tailwind classes
false	raw string value

Example

Below is an example of a typical responsive dropdown that returns one or more tailwind text transform classes, one for each device breakpoint.

Control Example

{
    "title": "Case",
    "id": "headingTextTransform",
    "select": {
        "default": "normal-case",
        "items": [{
            "value": "normal-case",
            "title": "None"
        }, {
            "value": "uppercase",
            "title": "Uppercase"
        }, {
            "value": "lowercase",
            "title": "Lowercase"
        }, {
            "value": "capitalize",
            "title": "Capitalize"
        }]
    }
}

Group Example

{
    "groups": [{
        "title": "Select Example",
        "properties": [{
            "title": "Case",
            "id": "headingTextTransform",
            "select": {
                "default": "normal-case",
                "items": [{
                    "value": "normal-case",
                    "title": "None"
                }, {
                    "value": "uppercase",
                    "title": "Uppercase"
                }, {
                    "value": "lowercase",
                    "title": "Lowercase"
                }, {
                    "value": "capitalize",
                    "title": "Capitalize"
                }]
            }
        }]
    }]
}