useSwitch

The useSwitch hook implements interactivity and accessibility for a Switch.

Arguments

The useSwitch hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeSwitchProps
configPlumeSwitch Configuration for this component
refInstance of PlumeSwitchRef providing programmatic access

Return value

The useSwitch hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateToggleState as returned by useToggleState

Plume Config

KeyDescriptionRequired?
isSelectedVariantVariant to activate when the Switch is toggled on, according to props.isSelectedRequired
isDisabledVariantVariant to activate when the Button is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the Switch has a text label, specified as props.children.Recommended; a Switch without label is not accessible
labelSlotSlot name for the Switch label; will be filled with props.childrenRecommended
rootName of the root element of the component; will have an invisible <input type="checkbox"/> element injected as a child, and rendered as a label tag.Required

PlumeSwitchRef

MethodDescription
focus()Focuses this Switch
UNSAFE_getDOMNode()Returns the root label DOM element

Example

interface SwitchProps extends PlumeSwitchProps {

}
function Switch_(
  props: SwitchProps,
  ref: PlumeSwitchRef
) {
  const {plumeProps, state} = useSwitch(
    PlasmicSwitch,
    props,
    {
      isSelectedVariant: ["state", "isSelected"],
      isDisabledVariant: ["isDisabled", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

      labelSlot: "children",

      root: "root"
    },
    ref
  );
  return <PlasmicSwitch {...plumeProps} />;
}

const Switch = React.forwardRef(Switch_);
export default Switch;

React-Aria

Implemented using useSwitch and useToggleState.