useSelect

The useSelect hook implements interactivity and accessibility for a Select dropdown component. It is a themable replacement for a select HTML element.

Arguments

The useSelect hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeSelectProps
configPlumeSelect Configuration for this component
refInstance of PlumeSelectRef providing programmatic access

Return value

The useSelect hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateSelectState

Plume Config

KeyDescriptionRequired?
isOpenVariantVariant to activate when the Select is “opened” and the dropdown list of options are showing, according to props.isOpenRequired
placeholderVariantVariant to activate when nothing is selected, and props.placeholder is showingOptional
isDisabledVariantVariant to activate when the Select is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the Select has a text label, specified as props.label.Recommended; a Select without label is not accessible
triggerContentSlotSlot name for the content of the Select trigger, which will be filled with the currently-selected item, or the props.placeholder if nothing is selectedRequired
optionsSlotSlot name for options available to select from for this Select; will be filled with instances of SelectOptionsRequired
labelSlotSlot name for the Select label; will be filled with props.labelRecommended
rootName of the root element of the componentRequired
triggerName of the Select trigger; must be an instance of PlumeButtonRequired
overlayContainerName of the element for the dropdown overlay; will be positioned relative to trigger according to props.placementRequired
optionsContainerName of the element containing the optionsSlot slot; will be annotated as the ARIA listboxRequired
labelContainerName of the label container for the componentRecommended
renderOptionA function (key: React.Key, content: React.ReactNode) => React.ReactNode that takes in an option key and the rendered content for that option, and returns an instance of SelectOptionRequired

Example

interface SelectProps extends PlumeSelectProps {

}
function Select_(
  props: SelectProps,
  ref: PlumeSelectRef
) {
  const {plumeProps, state} = useSelect(
    PlasmicSelect,
    props,
    {
      isOpenVariant: ["isOpen", "isOpen"],
      placeholderVariant: ["isEmpty", "isEmpty"],
      isDisabledVariant: ["isDisabled", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

      triggerContentSlot: "triggerContent",
      optionSlot: "options",
      labelSlot: "label",

      root: "root",
      trigger: "trigger",
      overlayContainer: "overlayContainer",
      optionsContainer: "optionsContainer",
      labelContainer: "labelContainer",

      renderOption: (key, content) => (
        <SelectOption itemKey={key}>{content}</SelectOption>
      )
    },
    ref
  );
  return <PlasmicSelect {...plumeProps} />;
}

const Select = React.forwardRef(Select_);
export default Select;

React-Aria

Implemented using useSelect and useSelectState.