RadioButtonGroup

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

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

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

Usage

<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
• Disabled
• Narrow
• Brutal Preset

Source

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