Radio Group

A set of checkable buttons where no more than one can be checked at a time.

Comfortable

Compact

Default

tsx

1
2
3
4
5
6
7
8
9
10<RadioGroup name="density" value="compact">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="comfortable" id="d-c" />
    <Label htmlFor="d-c">Comfortable</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="compact" id="d-x" />
    <Label htmlFor="d-x">Compact</Label>
  </div>
</RadioGroup>

RadioGroup — sélection exclusive parmi 2+ options (payment method, tier, orientation). Sémantiquement différent d'un Select — Radio quand toutes les options sont visibles en même temps.

Installation

Terminal

$ bext ui add radio-group

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12import { RadioGroup, RadioGroupItem, Label } from "@bext-stack/ui/primitives"

<RadioGroup name="plan" value="pro">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="free" id="p-free" />
    <Label htmlFor="p-free">Free</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="pro" id="p-pro" />
    <Label htmlFor="p-pro">Pro</Label>
  </div>
</RadioGroup>

Anatomy

<RadioGroup name value>
  ├── <RadioGroupItem value="a" id="r-a" />
  ├── <RadioGroupItem value="b" id="r-b" />
  └── <RadioGroupItem value="c" id="r-c" />

API Reference

RadioGroup

Prop	Type	Default	Description
name	string	—	Nom form (partagé par tous les items).
value	string	—	Value initialement sélectionnée.

RadioGroupItem

Prop	Type	Default	Description
value	string	—	undefined
id	string	—	Pour lier au Label.

Data Attributes

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

Attribute	On	Values	Description
data-ui="radio-group"	root	—	L'island route les clics aux items.
data-state	item	"checked" \| "unchecked"	État par item.

Keyboard

Key	Action
`Arrow keys`	Naviguer entre items (comportement natif si role=radio).
`Space`	Sélectionner.

Accessibility

RadioGroup porte role="radiogroup", items role="radio". Toujours accompagner chaque item d'un Label.

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";

// A radio group is a set of options where exactly one can be chosen.
// A single `value` signal drives each option's reactive ring/dot and
// the selected 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">Radio Group</h1>
      <p style="color:#64748b;margin-top:0">A set of options where only one may be selected (signal-driven).</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 radio group is a set of options where exactly one can be chosen.
// The selection 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 }}>Radio Group</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A set of options where only one may be selected.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Progress Resizable →

On This Page