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:

VariantDescriptionRequired?
isHorizontalShows RadioGroup in horizontal orientation; by default, it is assumed to be in vertical orientationRequired
isDisabledShows RadioGroup in disabled stateRecommended
hasLabelShows a label for the RadioGroupRecommended

RadioGroup elements

Some elements that should be in your RadioGroup component are:

ElementDescriptionRequired?
rootThe root elementRequired
labelContainerThe label element showing the label for this controlRequired

RadioGroup slots

Some slots that your RadioGroup component should have are:

SlotDescriptionRequired?
optionsSlot for the Radio options for this groupRequired
labelLabel for this RadioGroupRecommended

Radio Anatomy

Radio Variants

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

VariantDescriptionRequired?
isSelectedShows Radio in selected stateRequired
isDisabledShows Radio in disabled stateRecommended
hasLabelShows a label for the RadioRecommended

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

Interaction VariantDescriptionRequired?
Focus Visible WithinControl is focused via keyboard tabbingRecommended
Focused WithinControl is focusedOptional
HoverControl is hoveredOptional

Radio elements

Some elements that should be in your RadioGroup component are:

ElementDescriptionRequired?
rootThe root elementRequired
labelContainerThe element containing the label for this controlRecommended

Radio slots

Some slots that your RadioGroup component should have are:

SlotDescriptionRequired?
labelLabel for this RadioRecommended