Leaf UI
  • English

      • Switch

      Turn a setting on or off.

      Examples

      Read event.target.checked in onChange. Loading preserves children and prevents interaction. Give the control a text label or aria-label. Native name, value and required properties support form submission.

      Live previewInteractive example
      basic.tsx
      import { Switch } from '@sudden3/leaf-ui';

export function SwitchBasic() {
  return (
    <>
      <Switch defaultChecked>Enable notifications</Switch>
      <Switch>Autosave</Switch>
      <Switch disabled defaultChecked>
        Locked
      </Switch>
      <Switch loading>Saving settings</Switch>
    </>
  );
}
      Live previewInteractive example
      Email notifications enabled
      controlled.tsx
      import { Switch } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function SwitchControlled() {
  const [checked, setChecked] = useState(true);
  return (
    <div className="leaf-demo-stack">
      <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
        Receive email
      </Switch>
      <span className="leaf-demo-note" aria-live="polite">
        {checked ? 'Email notifications enabled' : 'Email notifications disabled'}
      </span>
      <div className="leaf-demo-row">
        <Switch size="sm" defaultChecked>
          Small
        </Switch>
        <Switch defaultChecked>Default</Switch>
        <Switch size="lg" defaultChecked>
          Large
        </Switch>
      </div>
    </div>
  );
}

      Switch API

      PropertyTypeDefaultDescription
      checked / defaultCheckedboolean—Controlled checked state / initial checked state
      onChangeChangeEventHandler<HTMLInputElement>—Read event.target.checked
      size'sm' | 'md' | 'lg''md'Control size
      loadingbooleanfalseShow loading and disable interaction
      disabledbooleanfalseDisable interaction
      childrenReactNode—Clickable text label
      refRef<HTMLInputElement>—DOM reference

      Types

      Import SwitchProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { SwitchProps } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.