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?: 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. |
Request improvement for this page