Toggle
Allows user to activate or deactivate an option.
version
5.13.0
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
Or use the Label
component
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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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 #
Previous
TimePickerNext
HookForm