Switch

Switch is a control that is used to quickly switch between two possible states. Switches are used for binary actions that occur immediately after the user “flips” the switch. They are commonly used for “On/Off” situations.

Best practices

• A label may accompany a Switch to further clarify on the action the switch will perform.
• Use adjectives rather than verbs to describe labels and the state of the object affected. (Ex: On/Off)
• Labels should be three words or less and appear on the right side of a Switch.
• A Switch is used to alternate between two possible states. To use more than 2 states, check Checkbox or Radio Button components.
• On hover state, a hint is showed with the result of the action. (E.g.: Disable action).

Example

import { Switch } from '@lemonade/ui'
import React from 'react'

function SwitchEx() {
  return <Switch name='active' />
}

export default SwitchEx