Checkbox

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

Accept terms and conditions

tsx

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

Checkbox is a styled checkbox. In PRISM it is a <button role="checkbox" data-ui="checkbox"> that keeps its state in data-state and aria-checked. The island toggles it on click. With name it renders a hidden <input> that posts value (default "on") while the box is checked and nothing while it is not, like a native checkbox.

Installation

Terminal

$ bext ui add checkbox

Copy and paste the following into src/components/ui/checkbox.tsx.

checkbox.tsx

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

This component is interactive. Make sure the shared island is loaded (see Islands). It reacts to data-ui="checkbox" hooks.

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" name="terms" checked />

API Reference

Checkbox

Prop	Type	Default	Description
id	string	—	Links the checkbox to its Label.
checked	boolean	false	Initial state. The island toggles it on click.
ariaLabel	string	—	aria-label of the <button>. Use it when there is no visible Label.
disabled	boolean	false	Disables the button: it cannot be focused or toggled, is dimmed, and posts nothing.
name	string	—	Form field name. Renders a hidden input that posts only while the box is checked.
value	string	"on"	Value posted under name when checked.
className	string	—	Extra classes on the <button>.

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute	On	Values	Description
data-ui="checkbox"	root	—	The island toggles the state on click.
data-state	root	"checked" \| "unchecked"	Reflects the current state.
aria-checked	root	"true" \| "false"	Same state, for assistive technologies. Updated by the island.
data-ui="control-input"	hidden input	disabled present or absent	Rendered when name is set. Disabled while unchecked, so nothing posts. Emits a change event on every toggle.

Keyboard

Key	Action
`Space / Enter`	Toggles the checkbox (it is a <button>).
`Tab`	Moves focus in or out.

Accessibility

Checkbox sets role="checkbox" and aria-checked on its <button type="button">, and the island keeps aria-checked in sync. Its name comes from a <Label htmlFor> pointing at its id, or from ariaLabel when there is no visible label: always provide one of the two. A disabled checkbox uses the native attribute, so it is announced as unavailable and skipped by Tab.

Examples

Checked by default

Already checked

tsx

1
2
3
4<div className="flex items-center gap-2">
  <Checkbox id="newsletter" checked />
  <Label htmlFor="newsletter">Already checked</Label>
</div>

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