useInput hook

Usage

The useInput hook returns an object containing inputProps and wrapperProps that can be spread over the respective elements in your component. The wrapping element should be the Input component, and the input element should be a child of the Input component.

const MyComponent = () => {
  const { inputProps, wrapperProps } = useInput({
    labelText: "Email",
    helperText: "Please enter your email address",
    onChange: (event) => console.log(event.target.value),
  });

  return (
    <Input {...wrapperProps}>
      <input {...inputProps} />
    </Input>
  );
};

In this example, inputProps contains all the props that should be passed to the input element, and wrapperProps contains all the props that should be passed to the wrapping Input component.

const inputProps = {
  id: calculatedId,
  name,
  className: inputClasses,
  ...other,
  onChange,
  onClick,
  placeholder,
  value,
  type,
};

const wrapperProps = {
  className,
  addonAfter,
  labelText,
  helperText,
  hideLabel,
  invalid,
  invalidText,
};

TODO: Check

Please note that if you want to add your own onChange or onClick handlers, they will not be overridden by the ones provided by useInput. Instead, they will be called only when the input is not disabled and not read-only.

Used by

• Form
• Search
• Select
• TextInput
• Textarea
• Toggle

and all other Input components

Reference

• Input