<div class="form-block form-block--select form-block--select-example">
<label for="select-example">This is a select</label>
<div class="form-select">
<select id="select-example" name="select-example" disabled>
<option value="">Car Brand</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="Longer">Longer option here</option>
</select>
</div>
</div>
<div class="form-block form-block--select form-block--{{ formBlockName }}{% if formBlockValidationMessage %} has-error{% endif %}">
<label for="{{ formBlockId|default(formBlockName) }}">{{ formBlockLabel }}</label>
<div class="form-select">
<select id="{{ formBlockId|default(formBlockName) }}" name="{{ formBlockName }}"{{ formBlockDisabled ? ' disabled' : '' }}>
{% for option in formBlockOptions %}
<option value="{{ option.value }}"{{ option.selected ? ' selected' : '' }}>{{ option.label }}</option>
{% endfor %}
</select>
</div>
{% if formBlockValidationMessage %}
<div class="form-block-validation-message">
<p>{{ formBlockValidationMessage }}</p>
</div>
{% endif %}
</div>
{
"formBlockLabel": "This is a select",
"formBlockName": "select-example",
"formBlockOptions": [
{
"value": "",
"label": "Car Brand"
},
{
"value": "option-2",
"label": "Option 2"
},
{
"value": "option-3",
"label": "Option 3"
},
{
"value": "option-4",
"label": "Option 4"
},
{
"value": "Longer",
"label": "Longer option here"
}
],
"formBlockDisabled": true
}
Purpose: Used to allow the user to input information.