WUI logo

Toggle

Allows user to activate or deactivate an option.

version

4.1.2

install

yarn add @welcome-ui/toggle

usage

import { Toggle } from '@welcome-ui/toggle'

Examples #

Use checked property

function() {
const [toggle, setToggle] = React.useState(false)
const [toggleChecked, setToggleChecked] = React.useState(true)
return (
<>
<Toggle mb="md" checked={toggle} onClick={() => setToggle(!toggle)} />
<Toggle checked={toggleChecked} onClick={() => setToggleChecked(!toggleChecked)} />
</>
)
}

Disabled #

With the disabled property

function() {
const [toggle, setToggle] = React.useState(false)
const [toggleChecked, setToggleChecked] = React.useState(true)
return (
<>
<Toggle mb="md" checked={toggle} onClick={() => setToggle(!toggle)} disabled />
<Toggle checked={toggleChecked} onClick={() => setToggleChecked(!toggleChecked)} disabled />
</>
)
}

Field #

Examples with Field

function () {
const [checked, setChecked] = React.useState(false)
const handleToggle = () => {
setChecked(!checked)
}
return (
<Field label="Toggle">
<Toggle checked={checked} onClick={handleToggle} disabled />
</Field>
)
}

Properties #

NameType(s)DefaultRequired
checked
Boolean
disabled
Boolean
name
string
size
"sm"
"md"
"lg"
onChange
(event: ChangeEvent<HTMLInputElement>) => void
variant
"error"
"focused"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #

Previous

TimePicker

Next

Text
```