A set of two-state buttons that can be toggled on or off.
tsx
1
2// src/components/ui/toggle-group.tsx — a row of Toggle buttons. Add data-ui="toggle" to each;// for single-select, scope them in a wrapper and clear siblings in the island.
Installation
Terminal
$ bext ui add toggle-group
Copy and paste the following into src/components/ui/toggle-group.tsx.
toggle-group.tsx
1
2// src/components/ui/toggle-group.tsx — a row of Toggle buttons. Add data-ui="toggle" to each;// for single-select, scope them in a wrapper and clear siblings in the island.
This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="toggle-group" hooks.
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.tsx2 files · signals · runs in your browser
import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";
// A toggle group is a row of toggles behaving as a single-select
// segmented control. One `active` signal drives every item's reactive
// style + the readout.
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">Toggle Group</h1>
<p style="color:#64748b;margin-top:0">A set of two-state buttons grouped together (signal-driven).</p>
{signalsIsland("Showcase", Showcase, {})}
</main>
);
}
Pure PRISM + real bext signals — fine-grained, no re-render.
src/app/page.tsx2 files · react · runs in your browser
import Showcase from "../components/Showcase";
// A toggle group is a row of toggles that behave as a single-select
// segmented control. The active item lives in a "use client" island.
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 }}>Toggle Group</h1>
<p style={{ color: "#64748b", marginTop: 0 }}>A set of two-state buttons grouped together.</p>
<Showcase />
</main>
);
}