List Group

The List Group component provides a flexible and customizable way to display a series of content, such as links, buttons, or custom elements, in a vertical or horizontal list. It supports active, disabled, and flush states, and can be used for navigation, selection, or display of grouped items.

Description #

The List Group component is a versatile UI element for grouping related content. It supports different layouts (vertical, horizontal), active and disabled states, and can be used with custom content such as checkboxes, radios, or links. The .list-group-flush modifier removes borders and background for a minimal look.

• Vertical (flex-column): Default layout, items are stacked vertically.

• Horizontal (flex-row): Items are arranged in a row, useful for toolbars or navigation.

• Flush: Removes outer borders and background for a seamless look.

• Active/Disabled: Items can be marked as active or disabled for selection or state indication.

Examples and Classes #

Basic Example

            

                

                    

                        active items
                    
                    

                        items
                    
                    

                        disabled items
                    
                    

                        items
                    
                
                

                    

                        active items
                    
                    

                        items
                    
                    

                        disabled items
                    
                    

                        items
                    
                
                

                    
test
                    
test
                    
test
                
            
            

                
                
HTML
                
            
            <ul class="list-group w-50 flex-row">
    <li class="list-group-items active">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>items</a>
    </li>
    <li class="list-group-items" disabled>
        <a>disabled items</a>
    </li>
    <li class="list-group-items">
        <a>items</a>
    </li>
</ul>
<ol class="list-group w-50 flex-column">
    <li class="list-group-items active">
        <span>active items</span>
    </li>
    <li class="list-group-items">
        <span>items</span>
    </li>
    <li class="list-group-items" disabled>
        <span>disabled items</span>
    </li>
    <li class="list-group-items">
        <span>items</span>
    </li>
</ol>
<ul class="list-group-flush w-50 flex-column">
    <li class="list-group-items"><input type="checkbox" id="firtsItems"><label for="firtsItems">test</label></li>
    <li class="list-group-items"><input type="radio" name="r1" id="secondItems"><label for="secondItems">test</label></li>
    <li class="list-group-items"><input type="radio" name="r1" id="thirdItems"><label for="thirdItems">test</label></li>
</ul>
        

Disabled State

Add the disabled attribute to <li> to make a list group item non-interactive.

            

                

                    

                        active items
                    
                    

                        items
                    
                    

                        disabled items
                    
                    

                        items
                    
                
            
            

                
                
HTML
                
            
            <ul class="list-group w-50 flex-row">
    <li class="list-group-items active">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>items</a>
    </li>
    <li class="list-group-items" disabled>
        <a>disabled items</a>
    </li>
    <li class="list-group-items">
        <a>items</a>
    </li>
</ul>
        

Available Classes

Class	Description
.list-group	Main wrapper for the list group items. Controls the layout and spacing of multiple items. Use with .flex-column or .flex-row for direction.
.list-group-items	Individual list group item. Can be used with active or disabled states.
.list-group-flush	Removes borders and background for a minimal, seamless look.
.active	Highlights the item as active (selected).

Layout Variations

The list group component supports different layout variations:

• Vertical (flex-column): Items stacked vertically
• Horizontal (flex-row): Items arranged in a row
• Flush: Minimal, borderless style
• Active/Disabled: Highlight or disable items (For disabled, use disabled attribute on li)

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/list-group/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/list-group/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/list-group/script.js	JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $list-group-active-custom-classes: ".bg-primary-color, .on-primary-color";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
-	-	No JavaScript required for basic usage. All functionality is handled by HTML and CSS. You may add custom JS for validation or interactivity as needed.