Toggle Switch

Switch with proper accessibility roles

Formsformtoggleswitchbooleana11y

Code locked

"use client";

import { useState } from "react";

export function ToggleSwitch() {
  const [on, setOn] = useState(true);

  return (

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Free — no card required.

Related components

Email address

Floating Label Input

Forms · CSS-only floating label field

⌘K

Search Input

Forms · Search with a clear button and a ⌘K hint

Drop a file here

PDF, PNG or JPG · up to 10MB

File Dropzone

Forms · Drag-and-drop file area