Toggle

Toggle switch control for boolean selections.

Basic Usage

import { Toggle } from '@multinaire/ui';

<Toggle
  value={isEnabled}
  onChange={setIsEnabled}
/>

Props

Prop	Type	Default	Description
value	boolean	—	Whether the switch is on
color	ColorKeys	'success'	Active track color from the theme palette
testID	string	—	Test identifier for UI automation
onChange	(value: boolean) => void	—	Callback invoked when the switch state changes
margin	SpacingProps	—	Outer margin

Examples

Basic Toggle

const [isEnabled, setIsEnabled] = useState(false);

<Toggle
  value={isEnabled}
  onChange={setIsEnabled}
/>

Notifications Settings

<Container gap={16}>
  <Toggle
    value={pushNotifications}
    onChange={setPushNotifications}
  />
  <Toggle
    value={emailNotifications}
    onChange={setEmailNotifications}
  />
</Container>

Read-only

<Toggle value={isActive} />

With Margin

<Toggle
  value={isEnabled}
  onChange={setIsEnabled}
  margin={{ top: 16 }}
/>