Toggle

const ToggleDemo = () => {
  const [isOn, setIsOn] = useState(false)
  return (
    <VStack spacing={16}>
      <Text>Toggle is {isOn ? 'on' : 'off'}</Text>
      <Toggle isOn={isOn} onChange={setIsOn} />
      <Toggle isOn={true} onChange={() => {}} />
      <Toggle isOn={false} onChange={() => {}} disabled />
    </VStack>
  )
}

Overview

Toggle is a control that switches between on and off states. Toggle is commonly used for boolean settings and preferences.

SwiftUI Correspondence: Similar to SwiftUI's Toggle.

Notes

• Toggle requires isOn and onChange props for controlled state
• Toggle can be disabled with the disabled prop
• Toggle provides visual feedback for state changes
• Use Toggle for binary choices (on/off, enabled/disabled)

Best Practices

1. Clear labels: Provide clear labels that indicate what the toggle controls
2. State management: Use controlled state for toggle values
3. Accessibility: Ensure toggles are keyboard accessible
4. Visual feedback: Toggle provides built-in visual feedback
5. Grouping: Group related toggles together for better UX