Io / UI Basics / RadioCards

RadioCards

RadioCards is a single choice where each option deserves more than a line — a title, a supporting line, its own hit area. The options below are ChartX2’s real data-source modes, described by a minimal schema.

Interactivesingle choicecard optionsschema-driven

Columns

columns decides how many cards sit on a row. One column turns the group into a list of wide rows.

columns 3

columns 1

Density

itemPadding and gap set how much room each card takes; itemRadius rounds them.

itemPadding 10 · gap 8 · itemRadius 4

itemPadding 22 · gap 16 · itemRadius 14

Type and alignment

titleSize and subtitleSize pick theme steps; textAlign moves the pair inside each card.

textAlign left · Callout / Tiny

textAlign center · Body / Detail

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
aISchema	string	JSON defining the options: a value and a title each, optionally a subtitle.
defaultValue	string	Which option is selected on first render.
columns	number	How many cards sit on a row.
gap	number	Space between cards.
itemPadding	number	Inner padding of each card.
itemRadius	number	Corner radius of each card.
selectedColor	color	Accent used to mark the chosen card.
titleSize	enum	Theme type step for the title.
weight	enum	Title font weight.
color	color	Title colour.
subtitleSize	enum	Theme type step for the supporting line.
weight1	enum	Subtitle font weight.
color1	color	Subtitle colour.
textAlign	enum	left · center · right inside each card.
options	array	Optional custom renderers, matched to schema items by index — as many as there are items. They replace the title/subtitle visual only; value and disabled still come from the schema.

Prop	Type	Behaviour
aISchema	string	JSON defining the options: a value and a title each, optionally a subtitle.
defaultValue	string	Which option is selected on first render.
columns	number	How many cards sit on a row.
gap	number	Space between cards.
itemPadding	number	Inner padding of each card.
itemRadius	number	Corner radius of each card.
selectedColor	color	Accent used to mark the chosen card.
titleSize	enum	Theme type step for the title.
weight	enum	Title font weight.
color	color	Title colour.
subtitleSize	enum	Theme type step for the supporting line.
weight1	enum	Subtitle font weight.
color1	color	Subtitle colour.
textAlign	enum	left · center · right inside each card.
options	array	Optional custom renderers, matched to schema items by index — as many as there are items. They replace the title/subtitle visual only; value and disabled still come from the schema.

Usage

Guidance carried over from the component definition.

Reach for RadioCards

Each option needs a title and a supporting line, not just a label.

The options should be a comfortable target to click.

The choice is still one from several.

The set is short enough to show all at once.

Reach for something else

More than one option can be picked.

A plain list of dots is enough — use RadioGroup.

The list is long and belongs in a dropdown — use SelectX.