Designing a Plume Select

A Plume Select component implements a theme-able <select/> replacement. It presents a control for picking an option from a list of options in a dropdown menu.

There are three Plasmic components used to build out a Plume Select:

  • A Select component, which renders the main select control. It has variants for being opened and closed.
  • A SelectOption component, which render the individual options in the opened dropdown.
  • A “trigger” component, which renders the button that can be clicked to open the dropdown, and displays the currently-selected item. This should just be a normal Plume button.

Select Anatomy

Select Variants

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

VariantDescriptionRequired?
isOpenShows Select in the dropdown opened stateRequired
placeholderVariantShows Select in the empty selection state — when nothing has been selectedOptional
isDisabledShows Select in disabled stateRecommended
hasLabelShows a label for the SelectRecommended

Select elements

Some elements that should be in your Select component are:

ElementDescriptionRequired?
rootThe root elementRequired
triggerThe “trigger” element that shows the currently-selected value, and that users can click on to open the Select dropdown. Must be an instance of a Plume Button.Required
overlayContainerThe element that is the root of the floating dropdown overlay; this will be positioned relatively to the trigger element when the Select is openedRequired
optionsContainerThe element containing the options slot; it is the parent to all the SelectOptions for this SelectRequired
labelContainerThe element containing the label for this controlRecommended

Select slots

Some slots that your Select component should have are:

SlotDescriptionRequired?
triggerContentSlot for trigger content, which shows the currently-selected item or the placeholder textRequired
optionsSlot for all the SelectOptions for this SelectRequired
labelLabel for this SelectRecommended

SelectOption Anatomy

SelectOption Variants

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

VariantDescriptionRequired?
isSelectedShows SelectOption in selected stateRequired
isDisabledShows SelectOption in disabled stateRecommended

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

Interaction VariantDescriptionRequired?
Focused WithinOption is “focused” via mouse hovering over it, or via keyboard pressing up and downRecommended

SelectOption elements

Some elements that should be in your SelectOption component are:

ElementDescriptionRequired?
rootThe root elementRequired

SelectOption slots

Some slots that your SelectOption component should have are:

SlotDescriptionRequired?
contentContent for this SelectOptionRequired