Connor Adams · Design System

forms

RadioGroup

Example

Import

import { RadioGroup } from '@connor-adams/designsystem'

Usage

A single-choice radio group for mutually-exclusive options (account type, statement period). Exported as RadioGroup.

<RadioGroup
  options={['Chequing', 'Savings', 'Credit']}
  value={acctType}
  onValueChange={setAcctType}
/>

Variants: orientation="horizontal" for inline rows, defaultValue (uncontrolled), disabled. Options accept { value, label } objects.

Props

PropTypeDefaultDescription
optionsRadioOption[][]
valuestring | undefined
defaultValuestring | undefined
onValueChange((value: string) => void) | undefined
namestring | undefined
orientation"horizontal" | "vertical" | undefinedvertical
disabledboolean | undefined