Switches

Switches allow the user to toggle an option on or off.

HTML

<div class="mdf-switch">    
    <input id="switch" class="mdf-switch__input" type="checkbox" role="switch">

    <div class="mdf-switch__track"></div>
    <div class="mdf-switch__thumb"></div>
    <div class="mdf-switch__shadow"></div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/switch/styles';

// Configure appearance
@use '@miraidesigns/switch' with (
    $variable: value
);

@include switch.styles();

Examples

Some basic examples on how the module can be used.

Labels

To ensure proper alignment, wrap the switch and label element inside a .mdf-control element.

<div class="mdf-control">
    <div class="mdf-switch">    
        <input id="switch" class="mdf-switch__input" type="checkbox" role="switch">
    
        <div class="mdf-switch__track"></div>
        <div class="mdf-switch__thumb"></div>
        <div class="mdf-switch__shadow"></div>
    </div>

    <label for="switch">Option</label>
</div>

Implementation

Classes

| Name | Type | Description | | ---------------------- | ---------- | ---------------------------------------------------------------------------------------------- | | mdf-control | Parent | Wraps the switch and label element | | mdf-switch | Parent | Switch container element | | mdf-switch--disabled | Modifier | Fades out the element and disabled all interaction | | mdf-switch__input | Child | Input element, visually hidden. Used to determine the :checked state. Child to .mdf-switch | | mdf-switch__track | Child | The track the thumb runs on. Child to .mdf-switch | | mdf-switch__thumb | Child | The thumb. Child to .mdf-switch | | mdf-switch__shadow | Child | The shadow underneath the thumb. Child to .mdf-switch |