<label for="text-field-error" class="" aria-label="">
Label <span class="required-marker" aria-hidden="true">*</span>
<select id="select-field" class="is-inline" aria-describedby="select-note">
<option value="" disabled selected>Make your choice</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<em class="c-field__note " id="select-note">
Seleziona un'opzione dal menù a tendina
</em>
</label>
<label for="{{ label_id }}" class="{{ label_class }}" aria-label="{{ screen-reader-text }}">
{{ label_message }} {{#if atom-select.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
{{#if atom-select.hasIcon}}
<img src="{{ path atom-select.icon-path }}" alt="{{ atom-select.icon-alt }}" aria-hidden="true">
{{/if}}
<select
id="{{ atom-select.id }}"
class="{{ atom-select.class }}"
{{#if atom-select.hasNote}}
aria-describedby="{{ atom-select.describedby }}"
{{/if}}
{{#if atom-select.isInvalid}}
aria-invalid=”true”
{{/if}}
{{#if atom-select.isDisabled}}
disabled
{{/if}}
>
<option value="" disabled selected>{{ atom-select.placeholder }}</option>
{{#each atom-select.options }}
<option value="{{ this.value }}" {{#if selected}}selected{{/if}}>{{ this.text }}</option>
{{/each}}
</select>
{{#if atom-select.hasNote}}
<em class="c-field__note {{ note_class }}" id="{{ note_id }}">
{{{ note_message }}}
</em>
{{/if}}
</label>
{
"name": "default",
"label_id": "text-field-error",
"label_message": "Label",
"label_class": "",
"atom-select": {
"id": "select-field",
"class": "is-inline",
"required": true,
"hasNote": true,
"describedby": "select-note",
"placeholder": "Make your choice",
"options": [
{
"value": "option-1",
"text": "Option 1"
},
{
"value": "option-2",
"text": "Option 2"
},
{
"value": "option-3",
"text": "Option 3"
}
]
},
"note_id": "select-note",
"note_message": "Seleziona un'opzione dal menù a tendina",
"note_class": ""
}
No notes defined.