CDLIB UI

Select 

<label class="o-label2" for="select">Label</label>
<select class="o-select" name="name" id="select" aria-labelledby="labelledby">
    <option value="">Choose Your Option</option>
    <option value="1">Awesome Rubber Computer</option>
    <option value="2">Electronic Granite Shoes</option>
    <option value="3">Ergonomic Soft Hat</option>
    <option value="4">Ergonomic Rubber Pizza</option>
    <option value="5">Electronic Granite Cheese</option>
    <option value="6">Tasty Concrete Chair</option>
    <option value="7">Bespoke Granite Hat</option>
    <option value="8">Fantastic Fresh Shoes</option>
    <option value="9">Small Cotton Tuna</option>
    <option value="10">Bespoke Metal Table</option>
</select>
 
{{> @label--2 }}
<select class="o-select" {{#if select.name}}name="{{ select.name }}"{{/if}} {{#if select.id}}id="{{ select.id }}"{{/if}} {{#if select.labelledby}}aria-labelledby="{{ select.labelledby }}"{{/if}}>
  {{#if select.placeholder.exists}}<option value="">{{ select.placeholder.label }}</option>{{/if}}
  {{#each selectoption}}
  <option value="{{ select.option.value }}">{{ select.option.label }}</option>
  {{/each}}
</select>
 
{
  "label": {
    "exists": true,
    "for": "select",
    "text": "Label"
  },
  "select": {
    "name": "name",
    "id": "select",
    "labelledby": "labelledby",
    "placeholder": {
      "exists": true,
      "label": "Choose Your Option"
    }
  },
  "selectoption": [
    {
      "select": {
        "option": {
          "value": 1,
          "label": "Awesome Rubber Computer"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 2,
          "label": "Electronic Granite Shoes"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 3,
          "label": "Ergonomic Soft Hat"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 4,
          "label": "Ergonomic Rubber Pizza"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 5,
          "label": "Electronic Granite Cheese"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 6,
          "label": "Tasty Concrete Chair"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 7,
          "label": "Bespoke Granite Hat"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 8,
          "label": "Fantastic Fresh Shoes"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 9,
          "label": "Small Cotton Tuna"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 10,
          "label": "Bespoke Metal Table"
        }
      }
    }
  ]
}

No notes defined.