Switch

Toggle between two states

Use the Switch component to allow users to enable or disable options or settings in an application. They resemble physical on/off switches and provide a simple and intuitive way for users to control features or preferences. They provide the same functionality as the Checkbox component, with only visual differences.

---
import { Switch } from 'webcoreui/astro'
---

<Switch className="toggle" />

<script>
    let toggled = false

    document.querySelector('.toggle input').addEventListener('change', e => {
        toggled = e.target.checked
    })
</script>

<script>
    import { Switch } from 'webcoreui/svelte'

    let toggled = false
</script>

<Switch onClick={e => toggle = e.target.checked} />

import React, { useState } from 'react'
import { Switch } from 'webcoreui/react'

const Component = () => {
    const [toggle, setToggle] = useState(false)

    return (
        <Switch onClick={e => setToggle(e.target.checked)} />
    )
}

export default Component

States

The state of the switch can be modified with the toggled and disabled props:

<Switch toggled={true} />
<Switch disabled={true} />
<Switch toggled={true} disabled={true} />

Styles

To style the Switch component, you can override the following CSS variables:

html body {
    --w-switch-off-color: #252525;
    --w-switch-on-color: #FFF;
}

The colors of switches can also be changed individually using the offColor and onColor props:

<Switch
    offColor="#ee5253"
    onColor="#1dd1a1"
/>

To change the style of the switch, use the square and small props:

<Switch square={true} />
<Switch small={true} />
<Switch small={true} square={true} />

Labels

To add labels to the switch, use the label prop. You can switch the direction of the layout using the reverse prop:

<Switch label="Email notifications" />
<Switch label="Email notifications" reverse={true} />

API

type SwitchProps = {
    label?: string
    reverse?: boolean
    toggled?: boolean
    disabled?: boolean
    small?: boolean
    square?: boolean
    onColor?: string
    offColor?: string
    className?: string
}

type SvelteSwitchProps = {
    onClick?: (key: any) => any
} & SwitchProps

type ReactSwitchProps = {
    onClick?: (key: any) => any
} & SwitchProps