MultinaireSwitch

Toggle switch control for boolean selections.

Basic Usage

import { MultinaireSwitch } from '@multinaire/multinaire-design';

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

Props

Prop	Type	Default	Description
value	boolean	—	Whether the switch is on
color	ColorKeys	'primary'	Active track color from the theme palette
onChange	(value: boolean) => void	—	Callback invoked when the switch state changes
margin	SpacingProps	—	Outer margin

Examples

Basic Toggle

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

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

Notifications Settings

<MultinaireContainer gap={16}>
  <MultinaireSwitch
    value={pushNotifications}
    onChange={setPushNotifications}
  />
  <MultinaireSwitch
    value={emailNotifications}
    onChange={setEmailNotifications}
  />
</MultinaireContainer>

Read-only

<MultinaireSwitch value={isActive} />

With Margin

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