Switch

Toggle control for binary on/off states with visual feedback and smooth transitions.

Usage

import { Switch } from '@accelint/design-toolkit';

export function Settings() {
  return (
    <Switch isSelected={enabled} onChange={setEnabled}>
      Enable notifications
    </Switch>
  );
}

Reference

interface SwitchProps extends Omit<AriaSwitchProps, 'className'> {
  labelPosition?: 'start' | 'end';
  classNames?: {
    switch?: AriaSwitchProps['className'];
    control?: string;
    label?: string;
  };
}

Props

Prop	Type	Default	Required
`children`	`React.ReactNode`	-	No
`labelPosition`	`'start' \| 'end'`	`'end'`	No
`classNames`	`SwitchClassNames`	-	No
`isSelected`	`boolean`	`false`	No
`defaultSelected`	`boolean`	`false`	No
`onChange`	`(isSelected: boolean) => void`	-	No
`isDisabled`	`boolean`	`false`	No

`children`

Label content for the switch. Can be text or other React elements. Optional - if omitted, renders a standalone switch control.

`labelPosition`

Controls the position of the label text relative to the switch control:

end - Label appears after the switch control (default)
start - Label appears before the switch control

`classNames`

Custom CSS class names for switch elements:

switch - Container label element
control - Visual toggle control element
label - Label text element

Inherited Props

Switch inherits all props from React Aria's Switch component, including:

isSelected / defaultSelected - Controlled/uncontrolled toggle state
onChange - Called when toggle state changes (receives boolean)
isDisabled - Disables the switch
isReadOnly - Makes the switch read-only
name - Form field name
value - Form value when checked

See React Aria Switch for full API reference.

Examples

Example: Basic switch

import { Switch } from '@accelint/design-toolkit';

<Switch>
  Enable dark mode
</Switch>

Example: Controlled switch

import { useState } from 'react';
import { Switch } from '@accelint/design-toolkit';

export function ControlledExample() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch isSelected={enabled} onChange={setEnabled}>
      Enable notifications
    </Switch>
  );
}

Example: Disabled switch

import { Switch } from '@accelint/design-toolkit';

<Switch isDisabled isSelected>
  Feature locked (Pro plan only)
</Switch>

Example: Read-only switch

import { Switch } from '@accelint/design-toolkit';

<Switch isReadOnly isSelected>
  System setting (cannot be changed)
</Switch>

Example: Label position - start

import { Switch } from '@accelint/design-toolkit';

<Switch labelPosition="start">
  Auto-save
</Switch>

Example: Standalone switch (no label)

import { Switch } from '@accelint/design-toolkit';

<Switch aria-label="Toggle feature" />

Good to know: When omitting the visible label, always provide an aria-label for accessibility.

Example: Form integration

import { Switch } from '@accelint/design-toolkit';

<form onSubmit={handleSubmit}>
  <Switch name="newsletter" value="yes">
    Subscribe to newsletter
  </Switch>
  <Switch name="terms" value="accepted" isRequired>
    I accept the terms and conditions
  </Switch>
  <button type="submit">Submit</button>
</form>

Example: Multiple settings

import { useState } from 'react';
import { Switch } from '@accelint/design-toolkit';

export function SettingsPanel() {
  const [settings, setSettings] = useState({
    notifications: true,
    emails: false,
    analytics: true,
  });

  const updateSetting = (key: string) => (value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  return (
    <div>
      <Switch
        isSelected={settings.notifications}
        onChange={updateSetting('notifications')}
      >
        Push notifications
      </Switch>
      <Switch
        isSelected={settings.emails}
        onChange={updateSetting('emails')}
      >
        Email updates
      </Switch>
      <Switch
        isSelected={settings.analytics}
        onChange={updateSetting('analytics')}
      >
        Usage analytics
      </Switch>
    </div>
  );
}

Example: Custom styling

import { Switch } from '@accelint/design-toolkit';

<Switch
  classNames={{
    switch: 'flex items-center gap-2',
    control: 'bg-blue-500',
    label: 'font-medium text-gray-700',
  }}
>
  Custom styled switch
</Switch>

Example: Rich content label

import { Switch } from '@accelint/design-toolkit';

<Switch>
  <div>
    <strong>Premium features</strong>
    <div className="text-sm text-gray-500">
      Access advanced tools and analytics
    </div>
  </div>
</Switch>

Checkbox - Multi-selection alternative
Radio - Single-selection from multiple options
RadioGroup - Container for Radio buttons

Switch

On this page