UHasselt Component Library

Select 

<!-- Default -->
<select class="form-select " name="select" id="select">
    <option value="1">One</option>
    <option value="2" selected>Two</option>
    <option value="3">Three</option>
</select>


<!-- Select Disabled -->
<select class="form-select " name="select-disabled" id="disabled" disabled>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
    <option value="3">Three</option>
</select>


<select 
    class="form-select {{modifier}}"
    name="{{name}}"
    id="{{id}}"
    {{#if disabled}}disabled{{/if}}
>
    {{#each options}} 
        <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
    {{/each}}
</select>
 
/* Default */
{
  "modifier": "",
  "disabled": false,
  "name": "select",
  "id": "select",
  "options": [
    {
      "value": "1",
      "label": "One",
      "selected": false
    },
    {
      "value": "2",
      "label": "Two",
      "selected": true
    },
    {
      "value": "3",
      "label": "Three",
      "selected": false
    }
  ]
}


/* Select Disabled */
{
  "modifier": "",
  "disabled": true,
  "name": "select-disabled",
  "id": "disabled",
  "options": [
    {
      "value": "1",
      "label": "One",
      "selected": false
    },
    {
      "value": "2",
      "label": "Two",
      "selected": true
    },
    {
      "value": "3",
      "label": "Three",
      "selected": false
    }
  ]
}
  • Content: 
    .form-select {
    @apply h-12 w-72;

    background-image: url(/assets/img/chevron-down-regular.svg) !important;
    background-position: right;
    background-repeat: no-repeat;
    background-size: 15px 15px !important;

    &:focus {
        @apply border-black;
    }

    &[disabled] {
        @apply bg-black-100;
    }
}
  • URL: /components/raw/select/select.css
  • Filesystem Path: src\components\02-atoms\forms\select\select.css
  • Size: 345 Bytes

No notes defined.