Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

RadioGroup

Choose one option using native radio controls or selectable cards.

CoreBasics@gaudi/design-system/core/RadioGroupView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import RadioGroup from '@gaudi/design-system/core/RadioGroup';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/radio-group-corner-cards.json.

Usage

import RadioGroup from '@gaudi/design-system/core/RadioGroup';
<RadioGroup label='Delivery frequency' value={frequency} onValueChange={setFrequency}  options={[{ value: 'daily', label: 'Daily' }, { value: 'weekly', label: 'Weekly' }]} />

Examples

Corner-radio cards

Storybook

Fieldset, descriptions and states

Storybook

Framed lists

Storybook

Label extras and layouts

Storybook

Row cards

Storybook

API

7 props

Accessibility

Native radios provide Arrow-key navigation and form submission. Keep the legend and option labels descriptive.

FieldField composes form label, description, error, and input building blocks.7 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesTooltipBrief contextual help attached to an independently labelled control.4 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesSeparatorSeparate related content with a horizontal or vertical rule.3 examplesPillPill renders compact category and status labels.4 examples