Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Square Theme Toggle Switch for Solid

A moon icon, a square switch that starts off, and a sun icon. The icons do not swap, and the page theme does not change.

UI library: Ark UI

A moon icon, a square switch, and a sun icon sit in a row. The switch starts off. The icons never swap. The page theme stays as it is. Its accessible name is Light mode.

Wire the change to your theme code, and start the switch from the current theme so it matches on load. If a single press is clearer, use a Button. In Solid, Ark UI only reports the new on or off value.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Switch anatomy: root, control, thumb, label

Usage

<div class="inline-flex items-center gap-2">
      <MoonIcon aria-hidden="true" class="size-4 text-muted-foreground" />
      <Switch aria-label="Light mode" checked={checked()} class="h-5 w-9 rounded-sm **:data-[slot=switch-thumb]:size-4 **:data-[slot=switch-thumb]:rounded" onCheckedChange={handleCheckedChange} />
      <SunIcon aria-hidden="true" class="size-4" />
    </div>

FAQ

Which icons sit beside the switch?

MoonIcon comes first with size-4 text-muted-foreground, then the Switch, then SunIcon with size-4. Both are decorative, with aria-hidden, in an inline-flex items-center gap-2 row.

How is this switch sized and squared?

The Switch sets h-5 w-9 rounded-sm for the track, and **:data-[slot=switch-thumb]:size-4 and **:data-[slot=switch-thumb]:rounded for the thumb.

Does it change the theme?

No. It only holds the state, starting off. Set the theme from the change handler, and start the switch from the current theme so it matches on load. The switch has aria-label (Light mode), since the icons are hidden from screen readers.

How do I control this switch in Solid?

This file keeps the state itself, starting off, and passes it back to the Switch. Pass checked; onCheckedChange receives details.checked.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

API Reference

Switch

Sets aria-label="Light mode", checked={checked()} and onCheckedChange={handleCheckedChange}. The rest is on the Switch page.

All 19 switch examples