Select
Renders a dropdown select input and returns the value of the selected option.
Renders a dropdown select input and returns the value of the selected option. Use when presenting creators with a predefined set of choices.
Returns: The value of the selected option (a string).
Properties
| Property | Description | Required |
|---|---|---|
options | An array of label-value pairs defining the available choices. | Yes |
If no default is specified, the first option will be selected initially.
Example
---
attributes:
text_alignment:
type: select
label: Text alignment
default: center
options:
- label: Left
value: left
- label: Centre
value: center
- label: Right
value: right
---<div class="block__content" style="text-align: {{ text_alignment }};">
<!-- content -->
</div>Usage
Select variables are useful for controlling layout options, style variants or content configurations:
---
attributes:
card_style:
type: select
label: Card style
default: standard
options:
- label: Standard
value: standard
- label: Minimal
value: minimal
- label: Featured
value: featured
---<div class="card card--{{ card_style }}">
<!-- card content -->
</div>