Radio Group
A set of checkable buttons where no more than one can be checked at a time.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/radio-group.tsx — single-select via the island (data-ui="radio")
export function RadioItem(o) {
const on = !!o.checked;
return \`<div class="flex items-center space-x-2"><button role="radio" data-ui="radio" data-state="\${on ? "checked" : "unchecked"}"
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow flex items-center justify-center">\${on ? '<span class="h-2 w-2 rounded-full bg-primary"></span>' : ""}</button>
<label class="text-sm font-medium">\${o.label}</label></div>\`;
}
// Wrap items in <div data-ui="radio-group"> so the island enforces single-select.Installation
$ bext ui add radio-groupCopy and paste the following into src/components/ui/radio-group.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/radio-group.tsx — single-select via the island (data-ui="radio")
export function RadioItem(o) {
const on = !!o.checked;
return \`<div class="flex items-center space-x-2"><button role="radio" data-ui="radio" data-state="\${on ? "checked" : "unchecked"}"
class="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow flex items-center justify-center">\${on ? '<span class="h-2 w-2 rounded-full bg-primary"></span>' : ""}</button>
<label class="text-sm font-medium">\${o.label}</label></div>\`;
}
// Wrap items in <div data-ui="radio-group"> so the island enforces single-select.This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="radio-group" hooks.
On This Page