UI.BlueStack.io - Component Library

checkbox Component

Checkbox System

Basic Checkboxes

Default checkbox Checked checkbox Disabled checkbox Disabled checked

<div class="space-y-3">
                <label class="checkbox">
                    <input type="checkbox">
                    <span>Default checkbox</span>
                </label>
                
                <label class="checkbox">
                    <input type="checkbox" checked>
                    <span>Checked checkbox</span>
                </label>
                
                <label class="checkbox">
                    <input type="checkbox" disabled>
                    <span>Disabled checkbox</span>
                </label>
                
                <label class="checkbox">
                    <input type="checkbox" checked disabled>
                    <span>Disabled checked</span>
                </label>
            </div>

Checkbox Sizes

Tiny Small Default Large Big

<div class="flex items-center gap-6">
                <label class="checkbox tiny">
                    <input type="checkbox" checked>
                    <span>Tiny</span>
                </label>
                
                <label class="checkbox small">
                    <input type="checkbox" checked>
                    <span>Small</span>
                </label>
                
                <label class="checkbox">
                    <input type="checkbox" checked>
                    <span>Default</span>
                </label>
                
                <label class="checkbox large">
                    <input type="checkbox" checked>
                    <span>Large</span>
                </label>
                
                <label class="checkbox big">
                    <input type="checkbox" checked>
                    <span>Big</span>
                </label>
            </div>

Checkbox Colors

<div class="flex flex-wrap gap-4">
                <label class="checkbox primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox black"><input type="checkbox" checked><span>Black</span></label>
            </div>

<div class="flex flex-wrap gap-4">
                <label class="checkbox primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox black"><input type="checkbox" checked><span>Black</span></label>
            </div>

Soft Variant

<div class="flex flex-wrap gap-4">
                <label class="checkbox soft primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox soft positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox soft warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox soft negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox soft info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox soft red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox soft orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox soft yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox soft olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox soft green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox soft teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox soft blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox soft violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox soft purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox soft pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox soft brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox soft grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox soft black"><input type="checkbox" checked><span>Black</span></label>
            </div>

<div class="flex flex-wrap gap-4">
                <label class="checkbox soft primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox soft positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox soft warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox soft negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox soft info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox soft red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox soft orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox soft yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox soft olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox soft green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox soft teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox soft blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox soft violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox soft purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox soft pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox soft brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox soft grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox soft black"><input type="checkbox" checked><span>Black</span></label>
            </div>

Checkbox Group (Stacked)

Analytics Dashboard Custom Reports API Access Data Export

<div class="checkboxes">
                <label class="checkbox">
                    <input type="checkbox" name="features" value="analytics" checked>
                    <span>Analytics Dashboard</span>
                </label>
                <label class="checkbox">
                    <input type="checkbox" name="features" value="reports">
                    <span>Custom Reports</span>
                </label>
                <label class="checkbox">
                    <input type="checkbox" name="features" value="api">
                    <span>API Access</span>
                </label>
                <label class="checkbox">
                    <input type="checkbox" name="features" value="export" checked>
                    <span>Data Export</span>
                </label>
            </div>

Error State (Shows only when unchecked)

I agree to the terms and conditions I accept the privacy policy (error removed when checked)

Note: Error styling automatically disappears when checkbox is checked

<div class="space-y-3">
                <label class="checkbox error">
                    <input type="checkbox" required>
                    <span>I agree to the terms and conditions</span>
                </label>
                
                <label class="checkbox error">
                    <input type="checkbox" checked required>
                    <span>I accept the privacy policy (error removed when checked)</span>
                </label>
                
                <div class="mt-4 text-sm text-gray-600">
                    Note: Error styling automatically disappears when checkbox is checked
                </div>
            </div>

Indeterminate State (Hierarchical Selection)

Select all permissions

Read access Write access Delete access

<div class="space-y-2 checkboxes">
                <label class="checkbox parent">
                    <input type="checkbox">
                    <span>Select all permissions</span>
                </label>
                
                <div class="ml-7 space-y-2">
                    <label class="checkbox">
                        <input type="checkbox" checked>
                        <span>Read access</span>
                    </label>
                    
                    <label class="checkbox">
                        <input type="checkbox">
                        <span>Write access</span>
                    </label>
                    
                    <label class="checkbox">
                        <input type="checkbox">
                        <span>Delete access</span>
                    </label>
                </div>
            </div>

Switch Component

Basic Switches

Airplane mode

Wi-Fi enabled

Bluetooth

<div class="space-y-4">
                <div class="checkbox switch">
                    <input type="checkbox">
                    <span>Airplane mode</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox" checked>
                    <span>Wi-Fi enabled</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox">
                    <span>Bluetooth</span>
                </div>
            </div>

Plain Switches (without icons)

Airplane mode

Wi-Fi enabled

Bluetooth

<div class="space-y-4">
                <div class="checkbox switch plain">
                    <input type="checkbox">
                    <span>Airplane mode</span>
                </div>
                
                <div class="checkbox switch plain">
                    <input type="checkbox" checked>
                    <span>Wi-Fi enabled</span>
                </div>
                
                <div class="checkbox switch plain">
                    <input type="checkbox">
                    <span>Bluetooth</span>
                </div>
            </div>

Switch Sizes

Tiny

Small

Default

Large

Big

<div class="flex items-center gap-6">
                <div class="checkbox switch tiny">
                    <input type="checkbox" checked>
                    <span>Tiny</span>
                </div>
                
                <div class="checkbox switch small">
                    <input type="checkbox" checked>
                    <span>Small</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox" checked>
                    <span>Default</span>
                </div>
                
                <div class="checkbox switch large">
                    <input type="checkbox" checked>
                    <span>Large</span>
                </div>
                
                <div class="checkbox switch big">
                    <input type="checkbox" checked>
                    <span>Big</span>
                </div>
            </div>

Switch Colors

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch black"><input type="checkbox" checked><span>Black</span></div>
            </div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Plain Switch Colors (without icons)

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch plain primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch plain positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch plain warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch plain negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch plain info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch plain red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch plain orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch plain yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch plain olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch plain green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch plain teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch plain blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch plain violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch plain purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch plain pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch plain brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch plain grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch plain black"><input type="checkbox" checked><span>Black</span></div>
            </div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch plain primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch plain positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch plain warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch plain negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch plain info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch plain red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch plain orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch plain yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch plain olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch plain green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch plain teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch plain blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch plain violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch plain purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch plain pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch plain brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch plain grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch plain black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Soft Switch Variant

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch soft primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch soft positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch soft warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch soft negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch soft info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch soft red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch soft orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch soft yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch soft olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch soft green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch soft teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch soft blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch soft violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch soft purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch soft pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch soft brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch soft grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch soft black"><input type="checkbox" checked><span>Black</span></div>
            </div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch soft primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch soft positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch soft warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch soft negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch soft info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch soft red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch soft orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch soft yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch soft olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch soft green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch soft teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch soft blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch soft violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch soft purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch soft pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch soft brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch soft grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch soft black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Minimal Switches (with icons)

Accept terms and conditions

Enable notifications

Remember my preferences

<div class="space-y-4">
                <div class="checkbox switch minimal">
                    <input type="checkbox">
                    <span>Accept terms and conditions</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" checked>
                    <span>Enable notifications</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox">
                    <span>Remember my preferences</span>
                </div>
            </div>

Minimal Plain Switches (without icons)

Simple toggle option

Clean minimal design

Ultra minimalist

<div class="space-y-4">
                <div class="checkbox switch minimal plain">
                    <input type="checkbox">
                    <span>Simple toggle option</span>
                </div>
                
                <div class="checkbox switch minimal plain">
                    <input type="checkbox" checked>
                    <span>Clean minimal design</span>
                </div>
                
                <div class="checkbox switch minimal plain">
                    <input type="checkbox">
                    <span>Ultra minimalist</span>
                </div>
            </div>

Minimal Switch Sizes

Tiny

Small

Default

Large

Big

<div class="flex items-center gap-6">
                <div class="checkbox switch minimal tiny">
                    <input type="checkbox" checked>
                    <span>Tiny</span>
                </div>
                
                <div class="checkbox switch minimal small">
                    <input type="checkbox" checked>
                    <span>Small</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" checked>
                    <span>Default</span>
                </div>
                
                <div class="checkbox switch minimal large">
                    <input type="checkbox" checked>
                    <span>Large</span>
                </div>
                
                <div class="checkbox switch minimal big">
                    <input type="checkbox" checked>
                    <span>Big</span>
                </div>
            </div>

Minimal Switch Colors

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch minimal primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch minimal positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch minimal warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch minimal negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch minimal info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch minimal red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch minimal orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch minimal yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch minimal olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch minimal green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch minimal teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch minimal blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch minimal violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch minimal purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch minimal pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch minimal brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch minimal grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch minimal black"><input type="checkbox" checked><span>Black</span></div>
            </div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch minimal primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch minimal positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch minimal warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch minimal negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch minimal info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch minimal red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch minimal orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch minimal yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch minimal olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch minimal green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch minimal teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch minimal blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch minimal violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch minimal purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch minimal pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch minimal brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch minimal grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch minimal black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Switch Group (Stacked)

Push Notifications

Location Services

Analytics & Reporting

Dark Mode

<div class="checkboxes">
                <div class="checkbox switch">
                    <input type="checkbox" name="settings" value="notifications" checked>
                    <span>Push Notifications</span>
                </div>
                <div class="checkbox switch">
                    <input type="checkbox" name="settings" value="location">
                    <span>Location Services</span>
                </div>
                <div class="checkbox switch">
                    <input type="checkbox" name="settings" value="analytics" checked>
                    <span>Analytics & Reporting</span>
                </div>
                <div class="checkbox switch">
                    <input type="checkbox" name="settings" value="darkmode">
                    <span>Dark Mode</span>
                </div>
            </div>

Disabled States

Disabled Off

Disabled On

Disabled Plain

Disabled Minimal Off

Disabled Minimal On

<div class="flex items-center gap-6">
                <div class="checkbox switch">
                    <input type="checkbox" disabled>
                    <span>Disabled Off</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox" checked disabled>
                    <span>Disabled On</span>
                </div>
                
                <div class="checkbox switch plain">
                    <input type="checkbox" disabled>
                    <span>Disabled Plain</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" disabled>
                    <span>Disabled Minimal Off</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" checked disabled>
                    <span>Disabled Minimal On</span>
                </div>
            </div>

<div class="flex items-center gap-6">
                <div class="checkbox switch">
                    <input type="checkbox" disabled>
                    <span>Disabled Off</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox" checked disabled>
                    <span>Disabled On</span>
                </div>
                
                <div class="checkbox switch plain">
                    <input type="checkbox" disabled>
                    <span>Disabled Plain</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" disabled>
                    <span>Disabled Minimal Off</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" checked disabled>
                    <span>Disabled Minimal On</span>
                </div>
            </div>

Switch Error State (Shows only when off)

Enable two-factor authentication

Accept cookies (error removed when on)

Note: Error styling automatically disappears when switch is turned on

<div class="space-y-4">
                <div class="checkbox switch error">
                    <input type="checkbox" required>
                    <span>Enable two-factor authentication</span>
                </div>
                
                <div class="checkbox switch error">
                    <input type="checkbox" checked required>
                    <span>Accept cookies (error removed when on)</span>
                </div>
                
                <div class="mt-4 text-sm text-gray-600">
                    Note: Error styling automatically disappears when switch is turned on
                </div>
            </div>