Switch

import { useState } from 'react';
import { Switch } from '@mihcm/ui/Switch';
import { Label } from '@mihcm/ui/Label';
 
const [enabled, setEnabled] = useState(false);
 
<div className="flex items-center gap-2">
  <Switch id="notif" checked={enabled} onCheckedChange={setEnabled} />
  <Label htmlFor="notif">Push notifications</Label>
</div>

import { useState } from 'react';
import { Switch } from '@mihcm/ui/Switch';
import { Label } from '@mihcm/ui/Label';
import { Separator } from '@mihcm/ui/Separator';
 
const [email, setEmail] = useState(true);
const [sms, setSms] = useState(false);
const [marketing, setMarketing] = useState(false);
 
<div className="space-y-4">
  <div className="flex items-center justify-between">
    <Label htmlFor="email">Email notifications</Label>
    <Switch id="email" checked={email} onCheckedChange={setEmail} />
  </div>
  <Separator />
  <div className="flex items-center justify-between">
    <Label htmlFor="sms">SMS alerts</Label>
    <Switch id="sms" checked={sms} onCheckedChange={setSms} />
  </div>
  <Separator />
  <div className="flex items-center justify-between">
    <Label htmlFor="marketing">Marketing emails</Label>
    <Switch id="marketing" checked={marketing} onCheckedChange={setMarketing} />
  </div>
</div>

<Switch id="locked" checked={true} onCheckedChange={() => {}} disabled />