Switch

A control that allows the user to toggle between checked and not checked.

Airplane mode

tsx

1
2<Switch id="airplane" />
<Label htmlFor="airplane">Airplane mode</Label>

Switch — toggle iOS-style. Sémantiquement équivalent à un Checkbox mais visuellement plus adapté pour on/off d'une préférence (activer notifications, dark mode, feature flag).

Installation

Terminal

$ bext ui add switch

Usage

tsx

1
2
3
4
5
6import { Switch, Label } from "@bext-stack/ui/primitives"

<div className="flex items-center gap-2">
  <Switch id="airplane" />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>

Anatomy

<Switch id="sw-id" checked={boolean} />

API Reference

Switch

Prop	Type	Default	Description
id	string	—	undefined
checked	boolean	—	undefined
name	string	—	undefined
disabled	boolean	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="switch"	root	—	Island toggle.
data-state	root	"checked" \| "unchecked"	État actuel — anime le knob.

Keyboard

Key	Action
`Space`	Toggle.

Accessibility

Devrait porter role="switch" aria-checked. Label associé recommandé.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// The switch is a single `on` signal. Clicking flips it; only the
// track color, the thumb's transform and aria-checked update — the
// component never re-renders.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Switch</h1>
      <p style="color:#64748b;margin-top:0">A signal-backed switch (fine-grained, no re-render).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A switch is a sliding on/off toggle. The animated thumb + state
// live in a "use client" island so they hydrate in the browser.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Switch</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A toggle for an on/off setting.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Spinner Table →

On This Page