Radio Button Group

Single-select radio group with four visual types and row or column layout. Use value and onChange for controlled usage.

Installation

tsx

import { RadioButtonGroup } from "@workspace/ui/components/radio-button-group"

Basic usage

tsx

<RadioButtonGroup
  name="choice"
  label="Choose one"
  options={[
    { value: "yes", label: "Yes" },
    { value: "no", label: "No" },
  ]}
  value={value}
  onChange={setValue}
/>

Choose one

YesNo

Types

1 – Default circular radio
2 – Pill style
3 – Bordered card style
4 – Segmented control

tsx

<RadioButtonGroup name="t2" type="2" options={options} value={v2} onChange={setV2} layout="row" />
<RadioButtonGroup name="t3" type="3" options={threeOptions} value={v3} onChange={setV3} />
<RadioButtonGroup name="t4" type="4" options={threeOptions} value={v4} onChange={setV4} />

Type 2 (pill)

YesNo

Type 3 (card)

Option AOption BOption C

Type 4 (segmented)

Option AOption BOption C

Row layout

tsx

<RadioButtonGroup
  name="row"
  label="Layout row"
  options={options}
  value={value}
  onChange={setValue}
  layout="row"
/>

Layout row

YesNo

Props

Prop	Type	Default	Description
name*	string	-	Form field name (and native name).
options*	RadioOption[]	-	Array of { value, label, disabled? }.
value	string	-	Controlled value.
onChange	(value: string) => void	-	Called when selection changes.
type	"1" \| "2" \| "3" \| "4"	"1"	Style: 1=default circle, 2=pill, 3=bordered card, 4=segmented.
layout	"row" \| "column"	"column"	Options layout.
label	string	-	Legend/label for the group.
error	string	-	Error message below the group.
hint	string	-	Hint text below.
containerClassName	string	-	Classes for the wrapper.
optionClassName	string	-	Classes for each option.