import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Switch

A toggle switch for boolean on/off states. Supports loading indicators, sizing, and an HTML title attribute for accessibility tooltips.

Live Example

Try It

Edit the code below to experiment with the component:

tsx

function Demo() {
  const [checked, setChecked] = React.useState(true);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <Switch
        checked={checked}
        onChange={setChecked}
        title="Toggle feature"
      />
      <span>{checked ? 'On' : 'Off'}</span>
      <span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
    </div>
  );
}

Switch States

tsx

function SwitchStates() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch defaultChecked title="Enabled switch" />
        <span>Checked</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch title="Unchecked switch" />
        <span>Unchecked</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch disabled defaultChecked title="Disabled on" />
        <span>Disabled (on)</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch disabled title="Disabled off" />
        <span>Disabled (off)</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch loading defaultChecked title="Loading switch" />
        <span>Loading</span>
      </div>
    </div>
  );
}

Sizes

tsx

function SizesDemo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch size="small" defaultChecked title="Small switch" />
        <span>Small</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Switch size="default" defaultChecked title="Default switch" />
        <span>Default</span>
      </div>
    </div>
  );
}

Settings Panel

tsx

function SettingsPanel() {
  const [notifications, setNotifications] = React.useState(true);
  const [darkMode, setDarkMode] = React.useState(false);
  const [autoRefresh, setAutoRefresh] = React.useState(true);
  return (
    <div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
      <h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
      {[
        { label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
        { label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
        { label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
      ].map(({ label, checked, onChange, title }) => (
        <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
          <span>{label}</span>
          <Switch checked={checked} onChange={onChange} title={title} />
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`loading`	`boolean`	`false`	Whether to show a loading spinner inside the switch.
`title`	`string`	`"Toggle feature"`	HTML title attribute shown as a browser tooltip on hover. Useful for accessibility.

Import

tsx

import { Switch } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::