Implementation:ArroyoSystems Arroyo Radio Group

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, UIComponents
Last Updated	2026-02-08 08:00 GMT

Overview

A styled radio card group component built on Chakra UI's useRadioGroup that renders selectable card-style radio buttons with check indicators.

Description

This module exports three components:

RadioCardGroup<T> -- A generic wrapper around Chakra UI's useRadioGroup that clones child RadioCard elements and injects radio props. Supports typed value changes via generic parameter T extends string.
RadioCard -- An individual radio card rendered as a styled label with a check circle indicator when selected. Uses Chakra UI's useRadio hook, useStyleConfig('RadioCard') for theming, and supports disabled state with reduced opacity.
CheckIcon -- A custom SVG checkmark icon created via Chakra UI's createIcon.

Usage

Used in forms throughout the WebUI for single-select options, such as schema format selection in DefineSchema.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/lib/RadioGroup.tsx

Signature

export const RadioCardGroup: <T extends string>(props: RadioCardGroupProps<T>) => JSX.Element;
export const RadioCard: (props: RadioCardProps) => JSX.Element;
export const CheckIcon: IconComponent;

Import

import { RadioCardGroup, RadioCard } from '../lib/RadioGroup';

I/O Contract

Inputs

Name	Type	Required	Description
value	T (string)	No	Currently selected value
onChange	(value: T) => void	No	Callback when selection changes
children	RadioCard elements	Yes	Radio card options to render

Outputs

Name	Type	Description
Radio group	React element	Stack of selectable radio card items with check indicators

Usage Examples

<RadioCardGroup value={format} onChange={setFormat}>
  <RadioCard value="json">JSON</RadioCard>
  <RadioCard value="avro">Avro</RadioCard>
  <RadioCard value="protobuf">Protobuf</RadioCard>
</RadioCardGroup>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment