Windy CSS styleguide

3.15 #components.switch .switch

Toggle example guides Toggle HTML markup

UI switch component.

To change background of non selected items use .bg- class.

Use our handy .size- classes to change the size of the switch.

    <nav class="switch switch--variant-red-light size-s">
        <a class="switch__item selected">first option</a>
        <a class="switch__item">second option</a>
        <a class="switch__item">third option</a>
    </nav>
Examples
Default styling
Light mode:
Dark mode:
.switch--compact
Compact version with smaller paddings
Light mode:
Dark mode:
.switch--nowrap
Disables text wrapping in switch__item(s)
Light mode:
Dark mode:
.switch--wrap
Enables to wrap items in multiple lines
Light mode:
Dark mode:
.switch--variant-uiswitch
Just handy shortcut to style main UI switches on map, with .fg-yellow and .bg-transparent
Light mode:
Dark mode:
.switch--variant-red-light
Red light version of selected item for less prominent switches on dark surfaces
Light mode:
Dark mode:
.switch--variant-red
Red version of selected item for most prominent switches on light surfaces
Light mode:
Dark mode:
.switch--stretch
Stretches items to fill the whole width of the switch
Light mode:
Dark mode:
Markup 
     <section class="mt-10 mb-10 bg-white rounded-box">
        Light mode:
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] fg-gray-dark bg-gray-light">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] fg-gray">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
    </section>
    <section class="mt-10 mb-10 fg-gray-light bg-gray-dark rounded-box dark-content">
        Dark mode:
        <div class="m-20 mb-40">
            <nav class="switch [modifier class] bg-gray">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
        <div class="m-20 mb-40">
            <nav class="switch [modifier class]">
                <a class="switch__item selected">first option</a>
                <a class="switch__item">second option</a>
                <a class="switch__item">third option</a>
            </nav>
        </div>
    </section>
Source: src/css/components/switch.less, line 1