Vebego Component Library
<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>
{
  "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.