Switch

Switch toggles a single setting on or off. It features a motion-driven thumb and an optional in-track animated border for a modern, polished feel.

Import

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Example(): JSX.Element {
  const [on, setOn] = React.useState(false);
  return <Switch checked={on} onChange={(_, c) => setOn(c)} />;
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Example() {
  const [on, setOn] = React.useState(false);
  return <Switch checked={on} onChange={(_, c) => setOn(c)} />;
}

Basic usage

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Basic(): JSX.Element {
  return <Switch defaultChecked />;
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Basic() {
  return <Switch defaultChecked />;
}

Labeled switch

With text label

Wi‑Fi

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Labeled(): JSX.Element {
  return <Switch startDecorator="Wi‑Fi" />;
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Labeled() {
  return <Switch startDecorator="Wi‑Fi" />;
}

Controlled vs. uncontrolled

Controlled example

Off

TypeScript

import * as React from 'react';
import { Switch, Button } from '@libdev-ui/base';
import { FiSun, FiMoon } from 'react-icons/fi';

export default function Controlled(): JSX.Element {
  const [on, setOn] = React.useState(false);
  return (
    <>
      <Switch
        checked={on}
        onChange={(_, c) => setOn(c)}
        startDecorator={(s) => (s.checked ? <FiMoon /> : <FiSun />)}
        endDecorator={(s) => (s.checked ? 'On' : 'Off')}
      />
      <Button onClick={() => setOn(v => !v)}>Toggle</Button>
    </>
  );
}

JavaScript

import React from 'react';
import { Switch, Button } from '@libdev-ui/base';
import { FiSun, FiMoon } from 'react-icons/fi';

export default function Controlled() {
  const [on, setOn] = React.useState(false);
  return (
    <>
      <Switch
        checked={on}
        onChange={(_, c) => setOn(c)}
        startDecorator={(s) => (s.checked ? <FiMoon /> : <FiSun />)}
        endDecorator={(s) => (s.checked ? 'On' : 'Off')}
      />
      <Button onClick={() => setOn(v => !v)}>Toggle</Button>
    </>
  );
}

Variants

filled

outlined

ghost

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Variants(): JSX.Element {
  return (
    <>
      <Switch variant="filled" />
      <Switch variant="outlined" />
      <Switch variant="ghost" />
    </>
  );
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function Variants() {
  return (
    <>
      <Switch variant="filled" />
      <Switch variant="outlined" />
      <Switch variant="ghost" />
    </>
  );
}

Animated border

gradient (custom colors)

glow

pulse

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function AnimatedBorder(): JSX.Element {
  return (
    <>
      <Switch
        variant="outlined"
        borderAnimation="gradient"
        borderColors={['info', 'warning', 'danger', 'success']}
        borderAnimationSpeed={1600}
      />
      <Switch variant="filled" color="success" borderAnimation="glow" />
      <Switch variant="ghost" color="warning" borderAnimation="pulse" />
    </>
  );
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function AnimatedBorder() {
  return (
    <>
      <Switch
        variant="outlined"
        borderAnimation="gradient"
        borderColors={['info', 'warning', 'danger', 'success']}
        borderAnimationSpeed={1600}
      />
      <Switch variant="filled" color="success" borderAnimation="glow" />
      <Switch variant="ghost" color="warning" borderAnimation="pulse" />
    </>
  );
}

Sizes & colors

Sizes

sm

md

lg

Colors

primary

success

danger

warning

info

Customization with sl

Style overrides via sl

TypeScript

import * as React from 'react';
import { Switch } from '@libdev-ui/base';

export default function StyleOverrides(): JSX.Element {
  return (
    <Switch
      variant="ghost"
      sl={{ backgroundColor: 'background.level2', p: 8, borderRadius: 'lg' }}
    />
  );
}

JavaScript

import React from 'react';
import { Switch } from '@libdev-ui/base';

export default function StyleOverrides() {
  return (
    <Switch
      variant="ghost"
      sl={{ backgroundColor: 'background.level2', p: 8, borderRadius: 'lg' }}
    />
  );
}

API

Props

Name	Type	Default	Description
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	—	Uncontrolled initial state.
onChange	(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void	—	Fired when state changes.
disabled	boolean	false	Disables interaction and visuals.
readOnly	boolean	false	Prevents state changes while focusable.
required	boolean	false	Marks the input as required.
autoFocus	boolean	false	Autofocus on mount.
clearOnEscape	boolean	false	When true, Escape clears (sets false).
color	Color | string	"primary"	Semantic color token or any CSS color.
variant	"filled" | "outlined" | "ghost"	"filled"	Visual variant.
size	"sm" | "md" | "lg"	"md"	Component size.
radius	Radius | number | string	"xl"	Corner radius for track/thumb.
borderAnimation	"none" | "gradient" | "glow" | "pulse"	"gradient"	Animated border style (in-track).
borderWidth	number | string	2	Track border thickness for animated modes.
borderColors	string[]	—	Custom gradient stops (LD tokens or CSS colors).
borderAnimationSpeed	number	—	Gradient speed in ms.
component	React.ElementType	"label"	Polymorphic root.
slots	{ root, track, thumb, action, input, startDecorator, endDecorator }	—	Replace internal elements.
slotProps	same shape as slots	—	Props per slot (supports functions with ownerState).
sl	StyleArg | StyleArg[]	—	System style overrides.
startDecorator	React.ReactNode | (state) => React.ReactNode	—	Element rendered before the switch.
endDecorator	React.ReactNode | (state) => React.ReactNode	—	Element rendered after the switch.

Accessibility: role="switch" and aria-checked are applied to the hidden input; keyboard interaction uses Space.