Aeroporto di Bologna - Design System

Select 

<!-- Default -->
<label for="select-field" class="" aria-label="">
    Label: <span class="required-marker" aria-hidden="true">*</span>
    <select id="select-field" class="" 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 una opzione dal menù a tendina
    </em>
</label>


<!-- Disabled -->
<label for="select-field" class="" aria-label="">
    Label: <span class="required-marker" aria-hidden="true">*</span>
    <select id="select-field" class="" aria-describedby="select-note" disabled>
        <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 una opzione dal menù a tendina
    </em>
</label>


<!-- Negative -->
<label for="text-field-error" class="is-negative" aria-label="">
    Label <span class="required-marker" aria-hidden="true">*</span>
    <select id="select-field" class="" 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="email-note">
        Seleziona un'opzione dal menù a tendina
    </em>
</label>


<!-- Positive -->
<label for="text-field-error" class="is-positive" aria-label="">
    Label <span class="required-marker" aria-hidden="true">*</span>
    <select id="select-field" class="" 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>


<!-- Inline -->
<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>


<!-- Small -->
<label for="text-field-error" class="" aria-label="">
    Label <span class="required-marker" aria-hidden="true">*</span>
    <select id="select-field" class="is-small 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>
 
/* Default */
{
  "name": "default",
  "label_id": "select-field",
  "label_message": "Label:",
  "label_class": "",
  "atom-select": {
    "id": "select-field",
    "class": "",
    "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 una opzione dal menù a tendina",
  "note_class": ""
}


/* Disabled */
{
  "name": "default",
  "label_id": "select-field",
  "label_message": "Label:",
  "label_class": "",
  "atom-select": {
    "id": "select-field",
    "class": "",
    "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"
      }
    ],
    "isDisabled": true
  },
  "note_id": "select-note",
  "note_message": "Seleziona una opzione dal menù a tendina",
  "note_class": ""
}


/* Negative */
{
  "name": "default",
  "label_id": "text-field-error",
  "label_message": "Label",
  "label_class": "is-negative",
  "atom-select": {
    "id": "select-field",
    "class": "",
    "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": "email-note",
  "note_message": "Seleziona un'opzione dal menù a tendina",
  "note_class": ""
}


/* Positive */
{
  "name": "default",
  "label_id": "text-field-error",
  "label_message": "Label",
  "label_class": "is-positive",
  "atom-select": {
    "id": "select-field",
    "class": "",
    "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": ""
}


/* Inline */
{
  "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": ""
}


/* Small */
{
  "name": "default",
  "label_id": "text-field-error",
  "label_message": "Label",
  "label_class": "",
  "atom-select": {
    "id": "select-field",
    "class": "is-small 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.