Switch

Toggle switch built with a checkbox input type.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• interactive 
• invalid 

Props

• default 
• interactive 

Examples

Basic

winduum

<div class="x-switch">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Switch</label>
</div>

winduum-vue

<script setup lang="ts">
    import { Switch } from '@/components/switch'
</script>

<template>
    <Switch class="x-switch">
        <input type="checkbox">
        Switch
    </Switch>
</template>

winduum-react

import { Switch } from '@/components/switch'

export function Example() {
    return (
        <Switch class="x-switch">
            <input type="checkbox" />
            Switch
        </Switch>
    )
}

Small

<div class="x-switch sm" id="checkbox">
    <input type="checkbox">
    <label for="checkbox">Switch</label>
</div>

Large

<div class="x-switch lg">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Switch</label>
</div>

Disabled

<div class="x-switch">
    <input type="checkbox" id="checkbox" disabled>
    <label for="checkbox">Switch</label>
</div>

Validation

Invalid state styling via the invalid variant — works with native HTML5 form validation, see Form.

<div class="x-switch">
    <input type="checkbox" id="checkbox" required>
    <label for="checkbox">Switch</label>
</div>