Radio Group

Preview

Free

Pro

Source

---
import { Label } from '@bejamas/ui/components/label';
import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
---

<RadioGroup>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="free" checked id="free" />
    <Label for="free">Free</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="pro" id="pro" />
    <Label for="pro">Pro</Label>
  </div>
</RadioGroup>

Installation

CLI

bun

 bunx bejamas add radio-group

npm

 npx bejamas add radio-group

pnpm

 pnpm dlx bejamas add radio-group

yarn

 yarn dlx bejamas add radio-group

Manual

---
/**
 * @component RadioGroup
 * @title Radio Group
 * @description A group of options where users can select exactly one choice.
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-18817&t=YFStJ3V8fXEO8QD8-4
 *
 * @preview
 *
 * <RadioGroup>
 *   <div class="flex items-center gap-2">
 *     <RadioGroupItem name="plan" value="free" checked id="free" />
 *     <Label for="free">Free</Label>
 *   </div>
 *   <div class="flex items-center gap-2">
 *     <RadioGroupItem name="plan" value="pro" id="pro" />
 *     <Label for="pro">Pro</Label>
 *   </div>
 * </RadioGroup>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
 * import { Label } from '@bejamas/ui/components/label';
 * ---
 *
 * <RadioGroup>
 *   <div class="flex items-center gap-2">
 *     <RadioGroupItem name="plan" value="free" id="free" checked />
 *     <Label for="free">Free</Label>
 *   </div>
 * </RadioGroup>
 * ```
 */
import type { HTMLAttributes } from "astro/types";
import { cn } from "@bejamas/ui/lib/utils";

type Props = {
  class?: string;
  "aria-label"?: string;
  "aria-labelledby"?: string;
} & HTMLAttributes<"div">;

const {
  class: className = "",
  ...rest
} = Astro.props as Props;
---

<div
  {...rest}
  role="radiogroup"
  data-slot="radio-group"
  class={cn("grid gap-3", className)}
>
  <slot />
</div>

Usage

---
import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
import { Label } from '@bejamas/ui/components/label';
---

<RadioGroup>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="free" id="free" checked />
    <Label for="free">Free</Label>
  </div>
</RadioGroup>