For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/switch.md.
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.

      basic.tsx
      import { Space, Switch } from '@ifhover/leaf-ui';

export function SwitchBasic() {
  return (
    <Space wrap>
      <Switch defaultChecked>Enable notifications</Switch>
      <Switch>Autosave</Switch>
      <Switch disabled defaultChecked>
        Locked
      </Switch>
      <Switch loading>Saving settings</Switch>
    </Space>
  );
}
      Email notifications enabled
      controlled.tsx
      import { Flex, Space, Switch, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SwitchControlled() {
  const [checked, setChecked] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
        Receive email
      </Switch>
      <Text tone="muted" aria-live="polite">
        {checked ? 'Email notifications enabled' : 'Email notifications disabled'}
      </Text>
      <Flex gap="md" align="center" wrap justify="center">
        <Switch size="sm" defaultChecked>
          Small
        </Switch>
        <Switch defaultChecked>Default</Switch>
        <Switch size="lg" defaultChecked>
          Large
        </Switch>
      </Flex>
    </Space>
  );
}

      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 '@ifhover/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.