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

        

            
                Open this select menu
                One
                Two
                Three
            
        
        

            
            
HTML
            
        
    <select class="form-select">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Disabled Example

        

            
                Disabled select
            
        
        

            
            
HTML
            
        
    <select class="form-select" disabled>
    <option>Disabled select</option>
</select>

Available Classes

Class	Description
.form-select	Base class for the select dropdown styling.

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: ".p-1, .bg-primary-color, .on-primary-color, .radius-all-small";
$select-option-custom-classes: ".bg-secondary-color, .on-secondary-color";
$select-option-selected-custom-classes: ".bg-primary-color, .on-primary-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 Select {
    constructor() {
        this.selectElements = document.querySelectorAll('.form-select');
        this.init();
    }

    init() {
        this.selectElements.forEach(select => {
            select.addEventListener('change', (event) => this.handleSelectChange(event));
        });
    }

    handleSelectChange(event) {
        const selectedValue = event.target.value;
        // Custom logic for when the select value changes
        console.log('Selected:', selectedValue);
    }
}

// Initialize select when DOM is loaded
// Uncomment if you need custom JS for select
// document.addEventListener('DOMContentLoaded', () => {
//     new Select();
// });