Components / Selection

Radio cards

One choice out of a few, shown as cards with a title and a line of explanation each.

Functions: cui_radio_cards

Usage

static const cui_choice places[] = {
    { "This computer", "Nothing leaves the machine.", CUI_ICON_MONITOR, NULL },     /* title, description, icon, badge */
    { "Team server", "Synced every few minutes.", CUI_ICON_SERVER, "Default" },
    { "Both", "Local, plus a nightly upload.", CUI_ICON_LAYERS, NULL },
};
static int place = 1;
cui_radio_cards(ui, "place", places, 3, &place, .columns = 3);

Returns true on the frame the selection changes. place is your int, the index of the selected card, and a value that matches no card, such as -1, leaves all of them unselected. places is your array of cui_choice, read every frame: a title, a description, an icon and a badge. columns is the number of cards in a row. When it is 0, up to three choices share one row and more are laid out in two columns. A container too narrow for columns of 220 points gets fewer of them, down to one. Use radio cards when each choice needs a sentence of explanation, and cui_radio_group or a segmented control when a label says it all.

Keyboard

• Arrows move the selection.

Options of cui_radio_cards

Option	Type	Default	Description
.columns	int		cards per row; 0 puts up to 3 choices in one row and more in 2 columns

cui_choice

Field	Type	Description
title	const char *	the card's heading, in medium weight; wraps when long
description	const char *	A second line of smaller text.
icon	const char *	An icon: a CUI_ICON_* constant, or a string from another icon font.
badge	const char *	small accent badge beside the title, e.g. "Popular"; NULL for none

Related

• Segmented control: A compact set of two to five choices where one is always selected, for switching between views of the same content.
• Checkbox, switch and radio: The three basic choices: a checkbox for an option, a switch for a setting that applies at once, and radio buttons for one of several.
• Chips and rating: A chip is a small toggle for filters and tags. A rating picks a number of stars.
• Slider: Picks a number, or a range with two thumbs, by dragging along a track.