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 |