Switch

Playground

'use client';
import { useEffect, useRef, useState } from 'react';
import { Switch, type SwitchSize } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "size": "md",
    "disabled": false,
    "checked": false
  };
  const [checked, setChecked] = useState(settings.checked);
  const previousSetting = useRef(settings.checked);
  useEffect(() => {
    if (previousSetting.current === settings.checked) return;
    previousSetting.current = settings.checked;
    setChecked(settings.checked);
  }, [settings.checked]);
  return (
    <Switch
      aria-label={"Enable"}
      checked={checked}
      onCheckedChange={(next) => {
        setChecked(next);
      }}
      disabled={settings.disabled}
      size={settings.size as SwitchSize}
    />
  );
}

Properties

Size

Checked

Disabled

Usage

Use Switch for an on/off setting that takes effect immediately. Control it with checked and onCheckedChange.

'use client';
import { Switch } from '@mbsw/ui';

export default function Example() {
  return (
    <label>
      <Switch defaultChecked={false} /> {"Enable"}
    </label>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

Switch