Skip to main content
The Toggle component provides a styled checkbox input with two distinct visual modes: a sliding switch or a checkbox with checkmark animation.

​
Import

import { Toggle } from '@luminescent/ui-react';

​
Usage

import { Toggle } from '@luminescent/ui-react';
import { useState } from 'react';

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

  return (
    <Toggle
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
    >
      Enable notifications
    </Toggle>
  );
}

​
Props

The Toggle component extends all standard HTML checkbox input attributes (with type locked to "checkbox") and accepts the following additional props:
​
children
React.ReactNode
Label text or content displayed next to the toggle. The label is automatically linked to the input via the id prop.
​
checkbox
boolean
default:"false"
When true, displays as a checkbox style with a checkmark that fades in. When false (default), displays as a sliding switch.
​
round
boolean
default:"false"
When true, uses fully rounded corners (rounded-full). When false (default), uses the theme’s standard border radius (rounded-lum).
​
className
string
Additional CSS classes to apply to the toggle element.

​
Toggle Modes

​
Switch Mode (default)

When checkbox is not set or is false, the component renders as a sliding switch:
  • Width of 3rem (48px)
  • Sliding indicator that moves from left to right when checked
  • The indicator translates 100% of its width when checked

​
Checkbox Mode

When checkbox={true}, the component renders as a checkbox:
  • Square/circular shape with fixed width of 1.75rem (28px)
  • Checkmark indicator that fades in with opacity when checked
  • More compact than switch mode

​
Behavior

  • The actual checkbox input is visually hidden but remains accessible to screen readers
  • All interactions work with keyboard navigation and assistive technologies
  • Smooth transitions with ease-out timing and motion-safe preferences
  • Hover states reduce transition duration for responsive feel
  • Labels are selectable with select-none and automatically hide when empty

​
Examples

import { Toggle } from '@luminescent/ui-react';
import { useState } from 'react';

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

  return (
    <Toggle
      id="notifications"
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
    >
      Enable notifications
    </Toggle>
  );
}
The Toggle component always renders as type="checkbox" internally. The visual appearance changes with the checkbox prop, but the underlying input type remains consistent for form compatibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us