Search documentation v1.0.0

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.

Preview

---
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:

Toggled

Disabled

Toggled & disabled

<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:

Square

Small

Small squared

<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:

Label on right

Email notifications

Label on left

Email notifications

<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?: MouseEventHandler<HTMLInputElement>
} & SwitchProps

type ReactSwitchProps = {
    onClick?: React.MouseEventHandler<HTMLInputElement>
} & SwitchProps

Prop	Purpose
`label`	Sets a label for the switch. No label is added by default.
`reverse`	Sets the position of the label to be on the other side of the switch.
`toggled`	Sets the default state of the switch to toggled. Defaults to `false`.
`disabled`	Disables the switch.
`offColor`	Sets the background color of the switch in the off state.
`onColor`	Sets the background color of the switch in the on state.
`small`	Sets the style of the switch to a smaller version.
`square`	Sets the style of the switch with a small border radius.
`className`	Pass additional CSS classes for the switch.

Svelte & React Prop	Purpose
`onClick`	Attach on-click event listeners.

<- Stepper Table ->

Request improvement for this page