Switch

A toggle switch component for boolean states

Usage

1import { Switch, SwitchGroup, Label } from '@lenso/ui';

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4
5export function Basic() {6  return (7    <Switch>8      <Switch.Content>9        <Switch.Control>10          <Switch.Thumb />11        </Switch.Control>12        Enable notifications13      </Switch.Content>14    </Switch>15  );16}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import { Switch, Label, Description } from '@lenso/ui';2
3export default () => (4  <Switch>5    <Switch.Control>6      <Switch.Thumb>7        <Switch.Icon/> {/* Optional */}8      </Switch.Thumb>9    </Switch.Control>10    <Switch.Content>11      <Label />12      <Description /> {/* Optional */}13    </Switch.Content>14  </Switch>15);

For grouping multiple switches, use the SwitchGroup component:

1import { Switch, SwitchGroup, Label } from '@lenso/ui';2
3export default () => (4  <SwitchGroup>5    <Switch>6      <Switch.Control>7        <Switch.Thumb />8      </Switch.Control>9      <Label>Option 1</Label>10    </Switch>11    <Switch>12      <Switch.Control>13        <Switch.Thumb />14      </Switch.Control>15      <Label>Option 2</Label>16    </Switch>17  </SwitchGroup>18);

Examples

Sizes

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { display: "flex", gap: "1.5rem" } });6export function Sizes() {7  return (8    <div {...stylex.props(styles.root)}>9      <Switch size="sm">10        <Switch.Content>11          <Switch.Control>12            <Switch.Thumb />13          </Switch.Control>14          Small15        </Switch.Content>16      </Switch>17      <Switch size="md">18        <Switch.Content>19          <Switch.Control>20            <Switch.Thumb />21          </Switch.Control>22          Medium23        </Switch.Content>24      </Switch>25      <Switch size="lg">26        <Switch.Content>27          <Switch.Control>28            <Switch.Thumb />29          </Switch.Control>30          Large31        </Switch.Content>32      </Switch>33    </div>34  );35}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Icons

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import {4  BellFill,5  BellSlash,6  Check,7  Microphone,8  MicrophoneSlash,9  Moon,10  Power,11  Sun,12  VolumeFill,13  VolumeSlashFill,14} from "@gravity-ui/icons";15import { Switch } from "@lenso/ui";16import * as stylex from "@stylexjs/stylex";17const styles = stylex.create({18  root: { display: "flex", gap: ".75rem" },19  icon: { width: ".75rem", height: ".75rem", color: "inherit", opacity: 1 },20  offIcon: { opacity: 0.7 },21  green: {22    backgroundColor: {23      default: "rgb(34 197 94 / .8)",24      ":is([data-slot='switch'][data-checked] *)": "rgb(34 197 94 / .8)",25      ":is([data-slot='switch'][data-checked]:hover *)": "rgb(34 197 94 / .8)",26      ":is([data-slot='switch'][data-checked]:active *)": "rgb(34 197 94 / .8)",27    },28  },29  red: {30    backgroundColor: {31      default: "rgb(239 68 68 / .8)",32      ":is([data-slot='switch'][data-checked] *)": "rgb(239 68 68 / .8)",33      ":is([data-slot='switch'][data-checked]:hover *)": "rgb(239 68 68 / .8)",34      ":is([data-slot='switch'][data-checked]:active *)": "rgb(239 68 68 / .8)",35    },36  },37  purple: {38    backgroundColor: {39      default: "rgb(168 85 247 / .8)",40      ":is([data-slot='switch'][data-checked] *)": "rgb(168 85 247 / .8)",41      ":is([data-slot='switch'][data-checked]:hover *)": "rgb(168 85 247 / .8)",42      ":is([data-slot='switch'][data-checked]:active *)": "rgb(168 85 247 / .8)",43    },44  },45  blue: {46    backgroundColor: {47      default: "rgb(59 130 246 / .8)",48      ":is([data-slot='switch'][data-checked] *)": "rgb(59 130 246 / .8)",49      ":is([data-slot='switch'][data-checked]:hover *)": "rgb(59 130 246 / .8)",50      ":is([data-slot='switch'][data-checked]:active *)": "rgb(59 130 246 / .8)",51    },52  },53});54const icons = {55  check: { off: Power, on: Check, selectedControl: styles.green },56  darkMode: { off: Moon, on: Sun, selectedControl: undefined },57  microphone: { off: Microphone, on: MicrophoneSlash, selectedControl: styles.red },58  notification: { off: BellSlash, on: BellFill, selectedControl: styles.purple },59  volume: { off: VolumeFill, on: VolumeSlashFill, selectedControl: styles.blue },60};61export function WithIcons() {62  return (63    <div {...stylex.props(styles.root)}>64      {Object.entries(icons).map(([key, value]) => (65        <Switch66          key={key}67          defaultChecked68          aria-label={key}69          size="lg"70          render={(props, { checked }) => (71            <span {...props}>72              <Switch.Content>73                <Switch.Control xstyle={checked && value.selectedControl}>74                  <Switch.Thumb>75                    <Switch.Icon>76                      {checked ? (77                        <value.on {...stylex.props(styles.icon)} aria-hidden="true" />78                      ) : (79                        <value.off80                          {...stylex.props(styles.icon, styles.offIcon)}81                          aria-hidden="true"82                        />83                      )}84                    </Switch.Icon>85                  </Switch.Thumb>86                </Switch.Control>87              </Switch.Content>88            </span>89          )}90        />91      ))}92    </div>93  );94}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Disabled

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4export function Disabled() {5  return (6    <Switch disabled>7      <Switch.Content>8        <Switch.Control>9          <Switch.Thumb />10        </Switch.Control>11        Enable notifications12      </Switch.Content>13    </Switch>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Without Label

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4export function WithoutLabel() {5  return (6    <Switch aria-label="Enable notifications">7      <Switch.Content>8        <Switch.Control>9          <Switch.Thumb />10        </Switch.Control>11      </Switch.Content>12    </Switch>13  );14}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Description

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Description, Switch, TextField } from "@lenso/ui";4import { switchSupportingStyles } from "@lenso/tokens/switch";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ root: { maxWidth: "24rem" } });7export function WithDescription() {8  return (9    <div {...stylex.props(styles.root)}>10      <TextField>11        <Switch aria-describedby="public-profile-help">12          <Switch.Content>13            <Switch.Control>14              <Switch.Thumb />15            </Switch.Control>16            Public profile17          </Switch.Content>18          <Description id="public-profile-help" xstyle={switchSupportingStyles.direct}>19            Allow others to see your profile information20          </Description>21        </Switch>22      </TextField>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Default Selected

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4export function DefaultSelected() {5  return (6    <Switch defaultChecked>7      <Switch.Content>8        <Switch.Control>9          <Switch.Thumb />10        </Switch.Control>11        Enable notifications12      </Switch.Content>13    </Switch>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Controlled

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", flexDirection: "column", gap: "1rem" },8  status: { fontSize: ".875rem", color: "var(--muted)" },9});10export function Controlled() {11  const [isSelected, setIsSelected] = useState(false);12  return (13    <div {...stylex.props(styles.root)}>14      <Switch checked={isSelected} onCheckedChange={setIsSelected}>15        <Switch.Content>16          <Switch.Control>17            <Switch.Thumb />18          </Switch.Control>19          Enable notifications20        </Switch.Content>21      </Switch>22      <p {...stylex.props(styles.status)}>Switch is {isSelected ? "on" : "off"}</p>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Label Position

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { display: "flex", flexDirection: "column", gap: "1rem" } });6export function LabelPosition() {7  return (8    <div {...stylex.props(styles.root)}>9      <Switch>10        <Switch.Content>11          <Switch.Control>12            <Switch.Thumb />13          </Switch.Control>14          Label after15        </Switch.Content>16      </Switch>17      <Switch>18        <Switch.Content>19          Label before20          <Switch.Control>21            <Switch.Thumb />22          </Switch.Control>23        </Switch.Content>24      </Switch>25    </div>26  );27}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Group

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch, SwitchGroup } from "@lenso/ui";4export function Group() {5  return (6    <SwitchGroup>7      <Switch name="notifications">8        <Switch.Content>9          <Switch.Control>10            <Switch.Thumb />11          </Switch.Control>12          Allow Notifications13        </Switch.Content>14      </Switch>15      <Switch name="marketing">16        <Switch.Content>17          <Switch.Control>18            <Switch.Thumb />19          </Switch.Control>20          Marketing emails21        </Switch.Content>22      </Switch>23      <Switch name="social">24        <Switch.Content>25          <Switch.Control>26            <Switch.Thumb />27          </Switch.Control>28          Social media updates29        </Switch.Content>30      </Switch>31    </SwitchGroup>32  );33}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Group Horizontal

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch, SwitchGroup } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { overflowX: "auto" } });6export function GroupHorizontal() {7  return (8    <SwitchGroup xstyle={styles.root} orientation="horizontal">9      <Switch name="notifications">10        <Switch.Content>11          <Switch.Control>12            <Switch.Thumb />13          </Switch.Control>14          Notifications15        </Switch.Content>16      </Switch>17      <Switch name="marketing">18        <Switch.Content>19          <Switch.Control>20            <Switch.Thumb />21          </Switch.Control>22          Marketing23        </Switch.Content>24      </Switch>25      <Switch name="social">26        <Switch.Content>27          <Switch.Control>28            <Switch.Thumb />29          </Switch.Control>30          Social31        </Switch.Content>32      </Switch>33    </SwitchGroup>34  );35}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Form Integration

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Button, Switch, SwitchGroup } from "@lenso/ui";4import type { FormEvent } from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  form: { display: "flex", flexDirection: "column", gap: "1rem" },8  submit: { marginTop: "1rem" },9});10export function Form() {11  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {12    e.preventDefault();13    const formData = new FormData(e.currentTarget);14    alert(15      `Form submitted with:\n${Array.from(formData.entries())16        .map(([key, value]) => `${key}: ${value}`)17        .join("\n")}`,18    );19  };20  return (21    <form {...stylex.props(styles.form)} onSubmit={handleSubmit}>22      <SwitchGroup>23        <Switch name="notifications" value="on">24          <Switch.Content>25            <Switch.Control>26              <Switch.Thumb />27            </Switch.Control>28            Enable notifications29          </Switch.Content>30        </Switch>31        <Switch defaultChecked name="newsletter" value="on">32          <Switch.Content>33            <Switch.Control>34              <Switch.Thumb />35            </Switch.Control>36            Subscribe to newsletter37          </Switch.Content>38        </Switch>39        <Switch name="marketing" value="on">40          <Switch.Content>41            <Switch.Control>42              <Switch.Thumb />43            </Switch.Control>44            Receive marketing updates45          </Switch.Content>46        </Switch>47      </SwitchGroup>48      <Button xstyle={styles.submit} size="sm" type="submit" variant="primary">49        Submit50      </Button>51    </form>52  );53}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Props

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4export function RenderProps() {5  return (6    <Switch7      render={(props, { checked }) => (8        <span {...props}>9          <Switch.Content>10            <Switch.Control>11              <Switch.Thumb />12            </Switch.Control>13            {checked ? "Enabled" : "Disabled"}14          </Switch.Content>15        </span>16      )}17    />18  );19}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4export function RenderFunction() {5  return (6    <Switch render={(props) => <div {...props} data-custom="foo" />}>7      <Switch.Content>8        <Switch.Control>9          <Switch.Thumb />10        </Switch.Control>11        Enable notifications12      </Switch.Content>13    </Switch>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Description, Label, Switch, TextField } from "@lenso/ui";4import { switchSupportingStyles } from "@lenso/tokens/switch";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  control: {8    "--switch-control-bg-checked": "var(--success)",9    "--switch-control-bg-checked-hover": "var(--success)",10  },11  copy: { display: "flex", flexDirection: "column", gap: ".125rem" },12});13export function CustomStyles() {14  return (15    <TextField>16      <Switch id="autosave" aria-describedby="autosave-help">17        <Switch.Content>18          <Switch.Control xstyle={styles.control}>19            <Switch.Thumb />20          </Switch.Control>21          <div {...stylex.props(styles.copy)}>22            <Label>Auto-save drafts</Label>23            <Description id="autosave-help" xstyle={switchSupportingStyles.direct}>24              Changes are saved as you type.25            </Description>26          </div>27        </Switch.Content>28      </Switch>29    </TextField>30  );31}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Switch component classes, you can use the @layer components directive. Learn more.

1@layer components {2  .switch {3    @apply inline-flex gap-3 items-center;4  }5
6  .switch__control {7    @apply h-5 w-8 bg-gray-400 data-[selected=true]:bg-blue-500;8  }9
10  .switch__thumb {11    @apply bg-white shadow-sm;12  }13
14  .switch__content {15    @apply flex flex-col gap-1;16  }17
18  .switch__icon {19    @apply h-3 w-3 text-current;20  }21}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

Switch Classes [!toc]

The Switch component uses these CSS classes (View source styles):

.switch - Base switch container
.switch__content - Optional content container
.switch__control - Switch control track
.switch__thumb - Switch thumb that moves
.switch__icon - Optional icon inside the thumb
.switch--sm - Small size variant
.switch--md - Medium size variant (default)
.switch--lg - Large size variant

SwitchGroup Classes [!toc]

The SwitchGroup component uses these CSS classes (View source styles):

.switch-group - Switch group container
.switch-group__items - Container for switch items
.switch-group--horizontal - Horizontal layout
.switch-group--vertical - Vertical layout (default)

Interactive States

The switch supports both CSS pseudo-classes and data attributes for flexibility:

Selected: [data-selected="true"] (thumb position and background color change)
Hover: :hover or [data-hovered="true"]
Focus: :focus-visible or [data-focus-visible="true"] (shows focus ring)
Disabled: :disabled or [aria-disabled="true"] (reduced opacity, no pointer events)
Pressed: :active or [data-pressed="true"]

API Reference

Switch

Inherits from React Aria Switch.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the switch
`isSelected`	`boolean`	`false`	Whether the switch is on
`defaultSelected`	`boolean`	`false`	Whether the switch is on by default (uncontrolled)
`isDisabled`	`boolean`	`false`	Whether the switch is disabled
`isInvalid`	`boolean`	`false`	Whether the switch is invalid
`isReadOnly`	`boolean`	`false`	Whether the switch is read only
`isRequired`	`boolean`	`false`	Whether the switch must be selected
`validate`	`(value: boolean) => ValidationError \| true \| null \| undefined`	-	Custom validation function
`validationBehavior`	`'native' \| 'aria'`	`'native'`	Whether to use native HTML form validation or ARIA
`name`	`string`	-	The name of the input element, used when submitting an HTML form
`value`	`string`	-	The value of the input element, used when submitting an HTML form
`onChange`	`(isSelected: boolean) => void`	-	Handler called when the switch value changes
`onPress`	`(e: PressEvent) => void`	-	Handler called when the switch is pressed
`children`	`React.ReactNode \| (values: SwitchRenderProps) => React.ReactNode`	-	Switch content or render prop
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, SwitchRenderProps>`	-	Overrides the default DOM element with a custom render function.

Render Props

When using the render prop pattern, these values are provided:

Prop	Type	Description
`isSelected`	`boolean`	Whether the switch is currently on
`isHovered`	`boolean`	Whether the switch is hovered
`isPressed`	`boolean`	Whether the switch is currently pressed
`isFocused`	`boolean`	Whether the switch is focused
`isFocusVisible`	`boolean`	Whether the switch is keyboard focused
`isDisabled`	`boolean`	Whether the switch is disabled
`isReadOnly`	`boolean`	Whether the switch is read only
`isInvalid`	`boolean`	Whether the switch is invalid
`isRequired`	`boolean`	Whether the switch is required
`state`	`-`	State of the switch.

SwitchGroup

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	The orientation of the switch group
`children`	`React.ReactNode`	-	The switch items to render
`className`	`string`	-	Additional CSS class names

Label

Renders an accessible label associated with form controls

Description

Provides supplementary text for form fields and other components

Button

A clickable button component with multiple variants and states

Switch

Usage

Anatomy

Examples

Sizes

With Icons

Disabled

Without Label

With Description

Default Selected

Controlled

Label Position

Group

Group Horizontal

Form Integration

Render Props

Render Function

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Switch Classes [!toc]

SwitchGroup Classes [!toc]

Interactive States

API Reference

Switch

Render Props

SwitchGroup

Related Components