Radio Group

A group of options where users can select exactly one choice.

Free

Pro

1
---
2
import { Label } from '@bejamas/registry/ui/label';
3
import { RadioGroup, RadioGroupItem } from '@bejamas/registry/ui/radio-group';
4
---
5

6
<RadioGroup name="plan" defaultValue="free">
7
  <div class="flex items-center gap-2">
8
    <RadioGroupItem value="free" id="free" />
9
    <Label for="free">Free</Label>
10
  </div>
11
  <div class="flex items-center gap-2">
12
    <RadioGroupItem value="pro" id="pro" />
13
    <Label for="pro">Pro</Label>
14
  </div>
15
</RadioGroup>

Installation

bunx bejamas add radio-group

npx bejamas add radio-group

pnpm dlx bejamas add radio-group

yarn dlx bejamas add radio-group

Usage

1
---
2
import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<RadioGroup name="plan" defaultValue="free">
7
  <div class="flex items-center gap-2">
8
    <RadioGroupItem value="free" id="free" />
9
    <Label for="free">Free</Label>
10
  </div>
11
</RadioGroup>

Props

Prop	Type	Default
`class`	`string`	`""`
`defaultValue`	`string`
`name`	`string`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`”aria-label”`	`string`
`”aria-labelledby”`	`string`