Search documentation v0.6.1

Switch

Toggle between two states

Source ↗️ Report Issue ↗️

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
How to use Switches in Astro
---
import { Switch } from 'webcoreui/astro'
---
<Switch className="toggle" />
<script>
let toggled = false
document.querySelector('.toggle input').addEventListener('change', e => {
toggled = e.target.checked
})
</script>
How to use Switches in Svelte
<script>
import { Switch } from 'webcoreui/svelte'
let toggled = false
</script>
<Switch onClick={e => toggle = e.target.checked} />
How to use Switches in React
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
Label on left
<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
PropPurpose
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 PropPurpose
onClick Attach on-click event listeners.

Request improvement for this page