# Shadcn Colored

> Colored radio group

- Type: example, free and open source (MIT)
- Component: [Radio Group](https://reui.io/components/radio-group.md)
- Page: https://reui.io/components/radio-group/c-radio-group-5
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/radio-group.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/radio-group.md
- MCP: `get_example("c-radio-group-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-radio-group-5.json
- Uses: Field, Radio Group

## Best for

Options whose circles take a blue, green or yellow border through a className override on each item

## Agent notes

- The inner dot paints with a background color, so `text-blue-500` on the indicator never tints it; only each item's border takes the hue

## When not to use

- Choosing a hue from a full spectrum or by typing a hex code: use [Color Picker](https://reui.io/components/color-picker.md) (`get_component("color-picker")`)

## Install

```bash
npx shadcn@latest add @reui/c-radio-group-5
```

## About Shadcn Radio Group

### When to use

- Short single choice lists in forms and settings, such as density, visibility, role or release channel
- Option tiles and divided card rows for shipping speed, contact method, language or a teammate
- Checkout and plan steps that pick one saved payment method or one priced subscription tier

### When not to use

- A list where any number of the options can be ticked together: use [Checkbox](https://reui.io/components/checkbox.md) (`get_component("checkbox")`)
- A whole modal step built around one choice, such as a template or a sync scope: use the [Dialog blocks](https://reui.io/blocks/application/dialog.md)
- A full plan table with billing period tabs and a feature list per tier: use the [Pricing blocks](https://reui.io/blocks/marketing/pricing.md)

### Agent notes

- Every example seeds `RadioGroup` through `defaultValue` and reads nothing back; pass a controlled value and a change handler to act on the pick
- No example sets a name on `RadioGroup`, so a native form post carries no choice; add one when the group lives in a form
- Every `RadioGroupItem` `id` is a fixed string such as r1 or an option value; derive unique ids when a group can render twice on one page

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.