# RadioButtonGroup

> Exclusive choice where each option is a button-like card.

Source: https://ui.jcsoftdev.com/docs/components/radio-button-group

Exclusive choice where each option is a button-like card. Native radios underneath, so arrow
keys, form submission and the `radiogroup` semantics come from the browser. Distinct from
`RadioGroup` (dot indicator) and `Segmented` (2-4 compact options).

## Import

```ts
import { RadioButtonGroup } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/radio-button-group`.

## Usage

```tsx
<RadioButtonGroup
  options={options}
  defaultValue="yape"
  aria-label="Método de pago"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` * | `ButtonOption[]` |  |  |
| `value` | `string` |  |  |
| `defaultValue` | `string` |  |  |
| `onValueChange` | `((value: string) => void)` |  |  |
| `name` | `string` |  |  |
| `disabled` | `boolean` |  |  |
| `aria-label` | `string` |  |  |
| `aria-labelledby` | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-radiobuttongroup--default)
- [Disabled](/storybook/?path=/story/forms-radiobuttongroup--disabled)
- [Narrow](/storybook/?path=/story/forms-radiobuttongroup--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-radiobuttongroup--brutal-preset)

## Source

`packages/ui/src/forms/radio-button-group/radio-button-group.tsx`