Choice card group

A native radio group with clear labels and descriptions for choices that need more context.

New

Where should this collection live?

Choose the workspace that owns these references.

This projectKeep the collection with your current workspace.Personal referencesCarry useful patterns between projects.Public galleryPublishing becomes available after review.

Selected: This project

Implementation

1"use client";2 3import { useId, useState, type FieldsetHTMLAttributes } from "react";4 5export type ChoiceCardOption = {6  value: string;7  label: string;8  description?: string;9  disabled?: boolean;10};11 12export type ChoiceCardGroupProps = Omit<13  FieldsetHTMLAttributes<HTMLFieldSetElement>,14  "onChange" | "children"15> & {16  label: string;17  description?: string;18  options: ChoiceCardOption[];19  value?: string;20  defaultValue?: string;21  onChange?: (value: string) => void;22  required?: boolean;23};24 25/** A native radio group with enough space to explain each choice. */26export function ChoiceCardGroup({27  label,28  description,