Switch

Switch is a toggle switch component with size variants, sliding animation, and optional inline labels. Use it for on/off settings.

Import

import { Switch } from "@tosui/react";

Basic Usage

Code

<Switch label="Enable notifications" />

Preview

Enable notifications

Without Label

Code

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

Preview

Sizes

Code

<VStack gap={4} align="flex-start">
  <Switch size="sm" label="Small switch" />
  <Switch size="md" label="Medium switch (default)" />
  <Switch size="lg" label="Large switch" />
</VStack>

Preview

Small switchMedium switch (default)Large switch

States

Code

<VStack gap={4} align="flex-start">
  <Switch label="Off" />
  <Switch label="On" defaultChecked />
  <Switch label="Disabled off" disabled />
  <Switch label="Disabled on" disabled defaultChecked />
</VStack>

Preview

OffOnDisabled offDisabled on

Controlled

Use isChecked and onChange for controlled mode.

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

  return (
    <Switch
      label={enabled ? "Enabled" : "Disabled"}
      isChecked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
    />
  );
}

Settings List

Code

<VStack gap={4} align="stretch">
  <HStack justify="space-between">
    <Box>
      <Box fontWeight="medium">Email notifications</Box>
      <Box fontSize="sm" color="foreground-muted">Receive email updates</Box>
    </Box>
    <Switch defaultChecked />
  </HStack>
  <HStack justify="space-between">
    <Box>
      <Box fontWeight="medium">Push notifications</Box>
      <Box fontSize="sm" color="foreground-muted">Receive push updates</Box>
    </Box>
    <Switch />
  </HStack>
  <HStack justify="space-between">
    <Box>
      <Box fontWeight="medium">Marketing emails</Box>
      <Box fontSize="sm" color="foreground-muted">Receive marketing content</Box>
    </Box>
    <Switch />
  </HStack>
</VStack>

Preview

Email notifications

Receive email updates

Push notifications

Receive push updates

Marketing emails

Receive marketing content

Props Reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Switch size
label	string	-	Optional label text
disabled	boolean	false	Disable the switch
isChecked	boolean	-	Controlled checked state
defaultChecked	boolean	-	Initial checked state (uncontrolled)
onChange	(e: ChangeEvent) => void	-	Change handler

Switch also accepts all native <input type="checkbox"> attributes.

Accessibility

• Uses native <input type="checkbox"> with role="switch"
• Label is associated with the input
• Supports keyboard navigation (Space to toggle)
• When no label is provided, use aria-label for accessibility

TypeScript

import { Switch, type SwitchSize, type SwitchProps } from "@tosui/react";