Welcome UI - Toggle

Toggle

The Toggle component is an interactive UI element that allows users to switch between two states, such as on/off or enabled/disabled. It is commonly used for settings and preferences where a binary choice is required. This component provides a clear and intuitive way for users to make selections, enhancing usability and interaction within an application.

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

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, 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.