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">Refined Granite Towels</option>
    <option value="2">Incredible Wooden Pants</option>
    <option value="3">Practical Plastic Bike</option>
    <option value="4">Incredible Soft Shoes</option>
    <option value="5">Elegant Concrete Mouse</option>
    <option value="6">Fantastic Rubber Bike</option>
    <option value="7">Handcrafted Plastic Keyboard</option>
    <option value="8">Awesome Granite Shoes</option>
    <option value="9">Sleek Steel Chair</option>
    <option value="10">Ergonomic Fresh Salad</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": "Refined Granite Towels"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 2,
          "label": "Incredible Wooden Pants"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 3,
          "label": "Practical Plastic Bike"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 4,
          "label": "Incredible Soft Shoes"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 5,
          "label": "Elegant Concrete Mouse"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 6,
          "label": "Fantastic Rubber Bike"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 7,
          "label": "Handcrafted Plastic Keyboard"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 8,
          "label": "Awesome Granite Shoes"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 9,
          "label": "Sleek Steel Chair"
        }
      }
    },
    {
      "select": {
        "option": {
          "value": 10,
          "label": "Ergonomic Fresh Salad"
        }
      }
    }
  ]
}

No notes defined.