Toggle

Install and import

yarn add @welcome-ui/toggle @xstyled/styled-components @xstyled/system react react-dom styled-components

yarn add @welcome-ui/toggle @xstyled/styled-components @xstyled/system react react-dom styled-components

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

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

Examples

Use checked property

Disabled

With the disabled property

ConnectedField

Examples with ConnectedField


Toggle with a label
Disabled with a label
{
  "toggle": true,
  "toogle-checked": true,
  "toogle-disabled": true,
  "toggle-label": false,
  "disabled-label": true
}{
  "toggle": true,
  "toogle-checked": true,
  "toogle-disabled": true,
  "toggle-label": false,
  "disabled-label": true
}

Properties

Name	Type(s)	Default
checked	bool	false
Component	elementType	S.Checkbox
disabled	bool
name	string
onChange	func

Dependencies

- @welcome-ui/checkbox
^3.0.0-alpha.2
- @welcome-ui/system
^3.0.0-alpha.2
- reakit
^1.3.4

Peer dependencies

- @xstyled/styled-components
^2.1.0
- @xstyled/system
^2.1.0
- react
^16.10.2 || ^17.0.1
- react-dom
^16.10.2 || ^17.0.1
- styled-components
^5.0.0

Made with by