Skip to main content

Switch

Switch is a form control for turning a setting on or off, like enabling email updates or autosave. It pairs a sliding toggle with a visible label, and people click or tap either one to flip it.

Import

import { Switch } from '@vortexlabs/vortex';
import type { SwitchProps } from '@vortexlabs/vortex';

Allied components

CheckboxuseSwitch

Other links

Storybook
<Switch
  name="playground-setting"
  size="md"
  labelAfter
>
  Email updates
</Switch>

Features

  • Submits with forms as a native checkbox.
  • Supports controlled and uncontrolled state.
  • Places the label before or after the control.
  • Supports responsive sizes and a disabled state.
Reference Links
WAI-ARIA switch pattern

Initial State

Every switch needs a name and a label. Use defaultChecked to start it on.

import { Stack, Switch } from "@vortexlabs/vortex";

<Stack gap={4}>
  <Switch name="email-updates" defaultChecked>Email updates</Switch>
  <Switch name="product-tips">Product tips</Switch>
</Stack>

Sizes

Switch comes in xs, sm, and md; the default is md. The label text scales with the control.

<Stack gap={4}>
  <Switch name="xs-switch" size="xs" defaultChecked>Extra small</Switch>
  <Switch name="sm-switch" size="sm" defaultChecked>Small</Switch>
  <Switch name="md-switch" size="md" defaultChecked>Medium</Switch>
</Stack>

Pass a breakpoint object to change the size by screen width.

<Switch name="responsive-switch" size={{ xs: "sm", md: "md" }} defaultChecked>Activity notifications</Switch>

Label Position

The label appears before the switch by default. Set labelAfter to place the control first.

<Stack gap={4}>
  <Switch name="label-before" defaultChecked>Label before</Switch>
  <Switch name="label-after" labelAfter defaultChecked>Label after</Switch>
</Stack>

Controlled State

Pass checked and update it in onChange. Don't combine it with defaultChecked.

Changes save automatically.
"use client";

import { Stack, Switch, Text } from "@vortexlabs/vortex";
import { useState } from "react";

export const SwitchControlledExample = () => {
  const [enabled, setEnabled] = useState(true);
  return (
    <Stack gap={3}>
      <Switch
        name="autosave"
        checked={enabled}
        onChange={({ checked }) => setEnabled(checked)}
        labelAfter
      >
        Autosave
      </Switch>
      <Text size="body-sm-desktop">
        {enabled ? "Changes save automatically." : "Save changes manually."}
      </Text>
    </Stack>
  );
};

Disabled

Set disabled to prevent changes while keeping the current state visible.

<Stack gap={4}>
  <Switch name="disabled-on" defaultChecked disabled labelAfter>Managed by your workspace</Switch>
  <Switch name="disabled-off" disabled labelAfter>Unavailable on this plan</Switch>
</Stack>

Accessibility

Key
Description
Space
Pressing Space while a switch is focused toggles it.
Provide visible children to name the setting.