WUI logo

Toggle

Allows user to activate or deactivate an option.

version

5.10.2

install

yarn add @welcome-ui/toggle

usage

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

Usage #

Use checked property

Label #

Use Field component to add a label

Hint #

Use Field component to add a hint

Icons #

Pass a checkedIcon or uncheckedIcon through to decorate your Toggle and give more context to the toggle action. We recommend to use an icon with sm or md size.

Sizes #

Use size property with option:

  • xs (24px - default)
  • sm (32px)
  • md (40px)

Variants #

Use hint, warning, error, info or success properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄

Properties #

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

Packages #

Dependencies #
Peer dependencies #
```