Switch

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Submit Button Tags Input →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add forms/switch

Plain-CSS theme — no build step

npx astrocraft-ui add forms/switch --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add forms/switch --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/switch --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/switch --theme tailwind --bridge lumos

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`Switch.astro`	`switch` `switch-input` `switch-thumb` `switch-track`	—	—	`:checked`

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/forms/switch/Switch.astro

---
// src/components/ui/forms/switch/Switch.astro — headless primitive (see ../../README.md).
// Toggle built from a native checkbox (role=switch) plus a track and a thumb. The root <label> makes
// the whole control clickable — give the input an accessible name via `aria-label` or an associated
// Label (`id`/`for`). Zero-JS.
//
// SIBLING ORDER IS PART OF THE CONTRACT: input, then track, then thumb, so a theme writes
// `[data-slot="switch-input"]:checked ~ [data-slot="switch-thumb"]`. See Checkbox for the full note.
//
// `class` lands on the ROOT here (it lands on the root of every primitive). The Tailwind original put
// it on the track; if you are porting call sites from that library, move any track styling to
// `[data-slot="switch-track"]`.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"input">;

const { class: className, ...rest } = Astro.props;
---

<label class={className} data-slot="switch">
  <input type="checkbox" role="switch" data-slot="switch-input" {...rest} />
  <span data-slot="switch-track" aria-hidden="true"></span>
  <span data-slot="switch-thumb" aria-hidden="true"></span>
</label>

src/components/ui/forms/switch/index.ts

import Switch from "./Switch.astro";

export { Switch };
export default Switch;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/switch — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Checkbox, Radio & Switch

Attribute surface

Source

What you get