Checkbox

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

Accept terms and conditions

tsx

1
2<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>

Checkbox — case à cocher stylée. En PRISM c'est un <div data-ui="checkbox"> avec l'état dans data-state. Toggle géré par l'island au clic.

Installation

Terminal

$ bext ui add checkbox

Usage

tsx

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

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Anatomy

<Checkbox id="cb-id" checked={boolean} />

API Reference

Checkbox

Prop	Type	Default	Description
id	string	—	Pour lier au Label.
checked	boolean	—	État initial. Toggle par l'island au clic.
name	string	—	Pour form submission.
value	string	—	Valeur postée quand checked.
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="checkbox"	root	—	L'island toggle data-state au clic.
data-state	root	"checked" \| "unchecked"	Reflète l'état actuel.

Keyboard

Key	Action
`Space`	Toggle la case.
`Tab`	Focus / défocus.

Accessibility

Devrait porter role="checkbox" aria-checked. Toujours accompagner d'un <Label htmlFor>.

Examples

Checked par défaut

Already checked

tsx

<Checkbox id="x" checked />

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 checkbox is a signal-backed toggle: clicking flips a single
// `checked` signal, and only the bound box (its fill + check glyph)
// and the aria-checked attribute update — no component re-render.
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">Checkbox</h1>
      <p style="color:#64748b;margin-top:0">A signal-backed checkbox (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";

// The interactive toggle lives in a "use client" component so its
// useState + onClick 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 }}>Checkbox</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A control that toggles between checked and unchecked.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Carousel Collapsible →

On This Page