Switch

View Source 

Usage

@import "winduum/src/ui/switch/index.css" layer(components);

Variants

• default 
• interactive 

Props

• default-props 
• interactive-props 

Tokens

• invalid 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

html

<div class="ui-switch">
    <input type="checkbox">
    Switch
</div>

vue

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

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

jsx

import { UiSwitch } from '@/components/ui/switch'

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

Small

<div class="ui-switch sm">
    <input type="checkbox">
</div>

Large

<div class="ui-switch lg">
    <input type="checkbox">
</div>

Disabled

<div class="ui-switch">
    <input type="checkbox" disabled>
    Switch
</div>