Vebego Component Library

Select 

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


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


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


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

        &:focus {
            @apply border-cta;
        }

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

No notes defined.