The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

Bun UI

Radio Group

Source

A group of radio buttons for selecting a single option.

Option 1

Option 2

Usage

Import the RadioGroup and RadioGroupItem components from @bun-ui/react and use them in your project:

import { RadioGroup, RadioGroupItem } from "@bun-ui/react"

<RadioGroup>
  <RadioGroupItem value="option1" label="Option 1" />
  <RadioGroupItem value="option2" label="Option 2" />
  <RadioGroupItem value="option3" label="Option 3" />
</RadioGroup>

Examples

Controlled

Use the value and onValueChange props to control the selected value programmatically.

Light

Dark

System

Disabled

Enabled Option

Disabled Option

Customization

The RadioGroup and RadioGroupItem components can be customized using the className prop or by extending their styles with your design system.

Yes

Props

RadioGroupItem

Prop	Type	Default	Description
color	`"primary" \| "secondary" \| "neutral"`	`"primary"`	Color for the RadioGroupItem.
disabled	`boolean`	`false`	If `true`, the component is disabled.
label	`ReactNode`	-	Label for the RadioGroupItem.
labelClassName	`string`	-	Additional CSS classes to apply to the label element. Use this to customize the styling of the label independently from the RadioGroupItem.

Progress Select