Labled Toggle

The labeled toggle is a label that contains a toggle-style input (type "checkbox"/"radio"). Has an option for the "switch" style toggle as well. Instead of having a slot for the label text, the labeled toggle puts both child elements on the same line, so reversing the order of the children will change which side the label text is displayed on.
To mark a label as a labeled toggle, add the @@toggle marker.
Component Macros

$outline
$color
Child Markers

@@switch

Used to change an <input type="checkbox"> to look like a switch visually.
Preview

Preview Theme
Example

<ws-grid ws-x="[gr.cols 1fr 1fr] [gap 8px]">
    <ws-titlebar ws-x="[col span 2]">
        <span ws-x="[$title] [$title-text]">Checkbox</span>
    </ws-titlebar>
    <label ws-x="@@toggle">
        <span>Outline Checkbox</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$flat]">
        <span>Flat Checkbox</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle">
        <input type="checkbox" />
        <span>Outline Checkbox (reverse)</span>
    </label>
    <label ws-x="@@toggle [$flat]">
        <input type="checkbox" />
        <span>Flat Checkbox (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <span>Lined-fill Checkbox</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$lined]">
        <span>Lined Checkbox</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <input type="checkbox" />
        <span>Lined-fill Checkbox (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined]">
        <input type="checkbox" />
        <span>Lined Checkbox (reverse)</span>
    </label>

    <ws-titlebar ws-x="[col span 2]">
        <span ws-x="[$title] [$title-text]">Switch</span>
    </ws-titlebar>
    <label ws-x="@@toggle">
        <span>Outline Switch</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle [$flat]">
        <span>Flat Switch</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle">
        <input type="checkbox" ws-x="@@switch" />
        <span>Outline Switch (reverse)</span>
    </label>
    <label ws-x="@@toggle [$flat]">
        <input type="checkbox" ws-x="@@switch" />
        <span>Flat Switch (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <span>Lined-fill Switch</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle [$lined]">
        <span>Lined Switch</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <input type="checkbox" ws-x="@@switch" />
        <span>Lined-fill Switch (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined]">
        <input type="checkbox" ws-x="@@switch" />
        <span>Lined Switch (reverse)</span>
    </label>

    <ws-titlebar ws-x="[col span 2]">
        <span ws-x="[$title] [$title-text]">Radio</span>
    </ws-titlebar>
    <label ws-x="@@toggle">
        <span>Outline Radio</span>
        <input type="radio" name="radia" />
    </label>
    <label ws-x="@@toggle [$flat]">
        <span>Flat Radio</span>
        <input type="radio" name="radia" />
    </label>
    <label ws-x="@@toggle">
        <input type="radio" name="radia" />
        <span>Outline Radio (reverse)</span>
    </label>
    <label ws-x="@@toggle [$flat]">
        <input type="radio" name="radia" />
        <span>Flat Radio (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <span>Lined-fill Checkbox</span>
        <input type="radio" name="radia" />
    </label>
    <label ws-x="@@toggle [$lined]">
        <span>Lined Checkbox</span>
        <input type="radio" name="radia" />
    </label>
    <label ws-x="@@toggle [$lined-fill]">
        <input type="radio" name="radia" />
        <span>Lined-fill Checkbox (reverse)</span>
    </label>
    <label ws-x="@@toggle [$lined]">
        <input type="radio" name="radia" />
        <span>Lined Checkbox (reverse)</span>
    </label>

    <ws-titlebar ws-x="[col span 2]">
        <span ws-x="[$title] [$title-text]">Colorized</span>
    </ws-titlebar>
    <label ws-x="@@toggle [$color @primary]">
        <span>Primary</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$color @secondary]">
        <span>Secondary</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle [$color @accent]">
        <span>Accent</span>
        <input type="radio" name="radia" />
    </label>
    <label ws-x="@@toggle [$color @warning] [$flat]">
        <span>Warning</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$color @danger] [$flat]">
        <span>Danger</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>
    <label ws-x="@@toggle [$color @warning] [$lined]">
        <span>Lined Warning</span>
        <input type="checkbox" />
    </label>
    <label ws-x="@@toggle [$color @danger] [$lined]">
        <span>Lined Danger</span>
        <input type="checkbox" ws-x="@@switch" />
    </label>

    <ws-titlebar ws-x="[col span 2]">
        <span ws-x="[$title] [$title-text]">Disabled</span>
    </ws-titlebar>
    <label ws-x="@@toggle [$color @primary]">
        <span>Primary</span>
        <input type="checkbox" disabled />
    </label>
    <label ws-x="@@toggle [$color @secondary]">
        <span>Secondary</span>
        <input type="checkbox" ws-x="@@switch" disabled />
    </label>
    <label ws-x="@@toggle [$color @accent]">
        <span>Accent</span>
        <input type="radio" name="radia" disabled />
    </label>
    <label ws-x="@@toggle [$color @warning] [$flat]">
        <span>Warning</span>
        <input type="checkbox" disabled />
    </label>
    <label ws-x="@@toggle [$color @danger] [$flat]">
        <span>Danger</span>
        <input type="checkbox" ws-x="@@switch" disabled />
    </label>
</ws-grid>