Welcome UI - Customizable design system with react

import * as React from 'react'
import { Toggle } from '@welcome-ui/toggle'

const Example = () => {
  const [toggle, setToggle] = React.useState(false)
  const [toggleChecked, setToggleChecked] = React.useState(true)

  return (
    <>
      <Toggle aria-label="Toggle component" checked={toggle} onClick={() => setToggle(!toggle)} />
      <Toggle
        aria-label="Toggle checked"
        checked={toggleChecked}
        onClick={() => setToggleChecked(!toggleChecked)}
      />
      <Toggle aria-label="Toggle disabled" disabled />
      <Toggle aria-label="Toggle checked and disabled" checked disabled />
    </>
  )
}

export default Example

Installation

Run the following command:

yarn add @welcome-ui/toggle

Import component:

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

Examples

Label

Use Field component to add a label

Hint

Use Field component to add a hint

Size

Use size property with option:

Variant

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 🪄

Icon

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.