Designing Plume Radio Groups

A Plume RadioGroup, composed of many Radios, implement a theme-able <input type="radio"/> replacement. Together, they represent a UI for picking one specific choice out of a set of options.

This document describes the variants, elements, and slots your Plasmic component needs to have to be turned into a Plume RadioGroup and Radio.

RadioGroup Anatomy

RadioGroup Variants

Some variants that your RadioGroup component built in Plasmic should include are:

Variant	Description	Required?
isHorizontal	Shows RadioGroup in horizontal orientation; by default, it is assumed to be in vertical orientation	Required
isDisabled	Shows RadioGroup in disabled state	Recommended
hasLabel	Shows a label for the RadioGroup	Recommended

RadioGroup elements

Some elements that should be in your RadioGroup component are:

Element	Description	Required?
root	The root element	Required
labelContainer	The `label` element showing the label for this control	Required

RadioGroup slots

Some slots that your RadioGroup component should have are:

Slot	Description	Required?
options	Slot for the Radio options for this group	Required
label	Label for this RadioGroup	Recommended

Radio Anatomy

Radio Variants

Some variants that your RadioGroup component built in Plasmic should include are:

Variant	Description	Required?
isSelected	Shows Radio in selected state	Required
isDisabled	Shows Radio in disabled state	Recommended
hasLabel	Shows a label for the Radio	Recommended

In addition, you should consider styling the following interaction variants:

Interaction Variant	Description	Required?
Focus Visible Within	Control is focused via keyboard tabbing	Recommended
Focused Within	Control is focused	Optional
Hover	Control is hovered	Optional

Radio elements

Some elements that should be in your RadioGroup component are:

Element	Description	Required?
root	The root element	Required
labelContainer	The element containing the label for this control	Recommended

Radio slots

Some slots that your RadioGroup component should have are:

Slot	Description	Required?
label	Label for this Radio	Recommended