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.

Source Built with Ariakit

Github

import * as React from 'react'

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

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

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

export default Example

Examples

Label

Use Field component to add a label

Github

Hint

Use Field component to add a hint

Github

Disabled

Use disabled property to disable the Toggle.

Github

Visibility Icon

Use withVisibilityIcon property to add an eye / eye-slash icon to toggle visibility.

Github

Size

Use size property with option lg, md or sm to set the size of the Toggle.

Github

Time picker Icon