useTextField

The useTextField hook implements interactivity and accessibility for a TextField for accepting text input.

Arguments

The useTextField hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeTextFieldProps
configPlumeTextField Configuration for this component
refInstance of PlumeTextFieldRef providing programmatic access

Return value

The useTextField hook returns an object with these keys:

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

Plume Config

KeyDescriptionRequired?
isDisabledVariantVariant to activate when the Button is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the TextField has a text label, specified as props.children.Recommended; a TextField without label is not accessible
showStartIconVariantVariant to activate to show the TextField with a start icon, which happens whenever props.startIcon is specified.Optional
showEndIconVariantVariant to actuvate to show the TextField with an end icon, which happens whenever props.endIcon is specified.Optional
labelSlotSlot name for the TextField label; will be filled with props.labelRecommended
startIconSlotSlot name for the start icon slot; will be filled with props.startIconOptional
endIconSlotSlot name for the end icon slot; will be filled with props.endIconOptional
rootName of the root element of the componentRequired
textboxName of the text input elementRequired
labelContainerName of the label container for the componentRecommended
textboxContainerName of the element that is visually the “textbox”. Sometimes the actual input element is transparent, and some containing element is styled like an input instead; this is that element. Will be instrumented so that clicking on it will focus the actual input.Optional

Example

interface TextFieldProps extends PlumeTextFieldProps {

}
function TextField_(
  props: TextFieldProps,
  ref: PlumeTextFieldRef
) {
  const {plumeProps, state} = useTextField(
    PlasmicTextField,
    props,
    {
      isDisabledVariant: ["isDisabled", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],
      showStartIconVariant: ["withIcons", "start"],
      showEndIconVariant: ["withIcons", "start"],

      labelSlot: "label",
      startIconSlot: "startIcon",
      endIconSlot: "endIcon",

      root: "root"
      textbox: "textbox"
      label: "labelContainer"
    },
    ref
  );
  return <PlasmicTextField {...plumeProps} />;
}

const TextField = React.forwardRef(TextField_);
export default TextField;

React-Aria

Implemented using useTextField.