Input & controls

Switch / Toggle

Q: How do people describe a Switch / Toggle in plain words?

the little sliding on/off control like iOS settings a switch I flip instead of checking a box instant on/off for things like Dark mode or notifications

Q: How do I implement a Switch / Toggle?

Replace the checkbox with a switch for the notification setting: role=switch, sliding thumb on a pill track, changes apply immediately with optimistic UI and rollback if the request fails.

A binary on/off control that usually takes effect immediately.

Also known as toggle · on/off switch · toggle switch

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Switch / Toggle".

Replace the checkbox with a switch for the notification setting: role=switch, sliding thumb on a pill track, changes apply immediately with optimistic UI and rollback if the request fails.

Anatomy:
- track: Pill background that changes with on/off state.
- thumb: Sliding knob; animate position, not only color.

Preferred API / pattern: `shadcn Switch (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Switch that only changes after Save
○Avoid: Color-only state with no position change
○Avoid: Missing accessible name

In plain wordsHow people search for it

“the little sliding on/off control like iOS settings”“a switch I flip instead of checking a box”“instant on/off for things like Dark mode or notifications”

AnatomyOpen for part names

track: Pill background that changes with on/off state.
thumb: Sliding knob; animate position, not only color.

How to write itOpen for stack patterns

Web (HTML/CSS)input type="checkbox" role="switch"

React + Tailwind + shadcn/uishadcn Switch (Radix)

SwiftUIToggle

Ant Design<Switch>

Notes

Switches are for immediate settings, not multi-select forms (use checkboxes). Label both the purpose and the current state for accessibility. Optimistic UI is fine if you roll back on failure. Don't require a separate Save for a single switch in settings lists.

Help me choose: Switch vs Checkbox →

Common mistakesHumans and models trip here

Switch that only changes after Save: either use checkbox in a form or apply immediately.
Color-only state with no position change: move the thumb for clarity.
Missing accessible name: associate a visible label.

More failure symptoms on AI broke it.

Related patterns

Checkbox & RadioCheckboxes for multi-select; radios for a single choice in a group.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.

Spotted a wrong name or missing pattern?

Message on X