Vebego Component Library

Select: Choices 

<div class="atm-form-select--choices " data-custom-select>
    <!-- Hidden native select for form submission -->
    <select class="form-select-native" id="select" name="select" style="display: none;">
        <option value="1" selected>Option One</option>
        <option value="2">Option Two</option>
        <option value="3">Option Three</option>
    </select>

    <!-- Custom select UI -->
    <div class="custom-select-wrapper">
        <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false">
            <span class="custom-select-value">Option One</span>
            <span class="custom-select-arrow">
                <i class="fal fa-chevron-down"></i>
            </span>
        </button>

        <ul class="custom-select-dropdown" role="listbox">
            <li class="custom-select-option selected" role="option" data-value="1" aria-selected="true">
                Option One
            </li>
            <li class="custom-select-option " role="option" data-value="2">
                Option Two
            </li>
            <li class="custom-select-option " role="option" data-value="3">
                Option Three
            </li>
        </ul>
    </div>
</div>
 
<div class="atm-form-select--choices {{modifier}}" data-custom-select>
    <!-- Hidden native select for form submission -->
    <select 
        class="form-select-native"
        {{#if id}}id="{{id}}"{{/if}}
        {{#if name}}name="{{name}}"{{/if}}
        style="display: none;"
        >
        {{#each options}} 
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{text}}</option>
        {{/each}}
    </select>
    
    <!-- Custom select UI -->
    <div class="custom-select-wrapper">
        <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false">
            <span class="custom-select-value">{{#each options}}{{#if selected}}{{text}}{{/if}}{{/each}}</span>
            <span class="custom-select-arrow">
                <i class="fal fa-chevron-down"></i>
            </span>
        </button>
        
        <ul class="custom-select-dropdown" role="listbox">
            {{#each options}}
            <li class="custom-select-option {{#if selected}}selected{{/if}}" 
                role="option" 
                data-value="{{value}}"
                {{#if selected}}aria-selected="true"{{/if}}>
                {{text}}
            </li>
            {{/each}}
        </ul>
    </div>
</div>
 
{
  "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
    }
  ]
}
  • Content: 
    .atm-form-select {
    .form-select {
        @apply h-12;
        @apply w-full;
        @apply border-shade;

        &:focus {
            @apply border-cta;
        }

        &[disabled] {
            @apply bg-shade;
        }
    }
}

.atm-form-select--choices {
    @apply relative;

    /* Legacy select styling (fallback) */
    .form-select {
        @apply text-h1 font-display text-secondary-col-1;
        @apply border-none outline-none;

        &:focus {
            @apply border-none outline-none;
        }

        &[disabled] {
            @apply bg-shade;
        }
    }

    /* Custom select styling */
    .custom-select-wrapper {
        @apply relative w-max;
    }

    .custom-select-trigger {
        @apply text-left;
        @apply text-h5 md:text-h1 font-display text-secondary-col-1;
        @apply border-none;
        @apply cursor-pointer flex items-center;
        @apply transition-opacity duration-200;

        &:hover {
            @apply opacity-80;
        }

        &[aria-expanded='true'] {
            .custom-select-arrow i {
                @apply rotate-180;
            }
        }
    }

    .custom-select-arrow {
        @apply ml-4 flex items-center;

        i {
            @apply transition-transform duration-200 text-xs md:text-h4;
        }
    }

    .custom-select-dropdown {
        @apply absolute top-full right-0 md:left-0 w-full min-w-[50vw] md:min-w-[20rem] text-left mt-3;
        @apply bg-white rounded-3xl shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)];
        @apply opacity-0 invisible pointer-events-none;
        @apply mt-3;
        @apply z-50 max-h-64 overflow-y-auto;
        transition: all 0.2s ease-in-out;
        list-style: none;
        padding: 0;

        &.active {
            @apply opacity-100 visible pointer-events-auto;
        }
    }

    .custom-select-option {
        @apply px-6 py-4 cursor-pointer;
        @apply text-lg font-display text-black;
        @apply transition-colors duration-150;

        &:hover {
            @apply bg-gray-100;
        }

        &.selected {
            @apply text-secondary-col-1;

            &:hover {
                @apply text-secondary-col-1;
            }
        }

        &:first-child {
            @apply rounded-t-lg;
        }

        &:last-child {
            @apply rounded-b-lg;
        }
    }
}
  • URL: /components/raw/select/select.css
  • Filesystem Path: src\components\02-atoms\forms\select\select.css
  • Size: 2.5 KB

No notes defined.