Select

The Select component provides a styled dropdown menu, allowing users to choose one option from a list. It supports custom styling through SCSS variables for seamless integration into your forms and UI layouts.

Description #

The Select component is a customizable dropdown input. It can be styled to match your application's theme using SCSS variables. The component is accessible and keyboard-friendly, ensuring a smooth user experience.

• Single Select: Allows selection of one option from the dropdown.

• Custom Styling: Easily style with SCSS variables and utility classes.

• Disabled State: Supports the standard disabled attribute.

Examples and Classes #

Basic Example

        

            

                

                    
Elephant
                    
Lion
                    
Tiger
                    
Giraffe
                    
Dolphin
                    
Penguin
                    
Zebra
                    
Shark
                
            
        
        

            
            
HTML
            
        
    <div class="select" id="customSelect" data-select-content="Select Option">
    <ul class="select-list">
        <li class="select-option">Elephant</li>
        <li class="select-option">Lion</li>
        <li class="select-option">Tiger</li>
        <li class="select-option">Giraffe</li>
        <li class="select-option">Dolphin</li>
        <li class="select-option">Penguin</li>
        <li class="select-option">Zebra</li>
        <li class="select-option">Shark</li>
    </ul>
</div>

Disabled Example

        

            

                

                    
Elephant
                    
Lion
                    
Tiger
                    
Giraffe
                    
Dolphin
                    
Penguin
                    
Zebra
                    
Shark
                
            
        
        

            
            
HTML
            
        
    <div class="select" id="customSelect" data-select-content="Select Option">
    <ul class="select-list">
        <li class="select-option disable">Elephant</li>
        <li class="select-option">Lion</li>
        <li class="select-option">Tiger</li>
        <li class="select-option disable">Giraffe</li>
        <li class="select-option disable">Dolphin</li>
        <li class="select-option">Penguin</li>
        <li class="select-option disable">Zebra</li>
        <li class="select-option">Shark</li>
    </ul>
</div>

Available Classes

Class	Description
.select	Base class for the select dropdown styling.
.select-list	Class for the list option select styling.
.select-option	Class for the select option styling.
.disable	Class for disable select option.

Layout Variations

The select component supports these layout variations:

• Single Select: Standard dropdown for single selection
• Disabled State: Add the disabled attribute to disable the select

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/select/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/select/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/select/script.js	JavaScript functionality (if needed)

SCSS Variables #

        

            
            
SCSS
            
        
        $select-custom-classes: ".px-1, .py-2, .bg-card-color, .text-color, .radius-all-small, .w-20, .h-2";
$select-transition-duration: .3s;
$select-min-height: 45px;
$select-list-custom-classes: ".w-100, .radius-all-small, .p-0, .z-index-10, .bg-menu-color";
$select-list-max-height: 150px;
$select-list-space: string.unquote("#{map.get($conf-margins, factor) * 3}#{map.get($conf-margins, unit)}");
$select-option-custom-classes: ".p-2, .txt-normal, .cursor-pointer";
$select-option-disabled-custom-classes: ".bg-disabled-regular-color, .text-color";
$select-option-hover-custom-classes: ".bg-on-secondary-color";
$select-option-selected-custom-classes: ".title-text-color, .cursor-pointer";
$select-content-custom-classes: ".secondary-light-color";
    

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
selectElements	Property	NodeList of all select elements with .form-select
constructor()	Method	Initializes the select component and sets up event listeners (if needed)
init()	Method	Sets up event listeners for custom select behavior
handleSelectChange(event)	Method	Handles change events on select elements

Implementation Example

        

            
            
JavaScript
            
        
        class CustomSelect {
    constructor(element) {
        if (!element) {
            document.querySelectorAll('.select').forEach(el => new CustomSelect(el));
            return;
        }

        this.select = element;
        this.display = this.select.querySelector('.selected-option');
        this.list = this.select.querySelector('.select-list');
        this.items = this.select.querySelectorAll('.select-option:not(.disable)');

        this.bindEvents();
    }

    bindEvents() {
        this.select.addEventListener('click', (e) => this.toggleList(e));

        this.items.forEach(item => {
            item.addEventListener('click', () => this.selectItem(item));
        });

        document.addEventListener('click', (e) => {
            if (!this.select.contains(e.target)) {
                this.select.classList.remove('active');
            }
        });
    }

    toggleList(e) {
        if (e.target.tagName.toLowerCase() === 'li' && !e.target.classList.contains('disable')) return;

        const rect = this.select.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const spaceAbove = rect.top;

        if (spaceBelow < 250 && spaceAbove > spaceBelow) {
            this.select.classList.remove('open-down');
            this.select.classList.add('open-up');
        } else {
            this.select.classList.remove('open-up');
            this.select.classList.add('open-down');
        }

        this.select.classList.toggle('active');
    }

    selectItem(item) {
        this.items.forEach(i => i.classList.remove('selected-option'));
        item.classList.add('selected-option');
        
        if (!this.display) {
            this.display = document.createElement('div');
            this.display.classList.add('selected-option');
            this.select.appendChild(this.display);
        }
        
        this.display.textContent = item.textContent;
        this.select.classList.remove('active');
        this.select.classList.add('has-value');
    }
}
new CustomSelect();