Skip to main content
The Input component renders a text input field where a user can enter a custom text value. Like other inputs, this component should only be used within a Form that has a submit button.
design-guidelines-input
  1. Label: the input’s label.
  2. Description: the text that describes the field’s purpose.
  3. Placeholder: the placeholder value that displays when no value has been entered.
  4. Required field indicator: communicates to the user that the field is required for form submission.
  5. Tooltip: on hover, displays additional information about the field.
import { useState } from "react";
import { Form, Input } from "@hubspot/ui-extensions";

const Extension = () => {
  const [name, setName] = useState("");
  const [validationMessage, setValidationMessage] = useState("");
  const [isValid, setIsValid] = useState(true);

  return (
    <Form>
      <Input
        label="First Name"
        name="first-name"
        tooltip="Please enter your first name"
        description="Please enter your first name"
        placeholder="First name"
        required={true}
        error={!isValid}
        validationMessage={validationMessage}
        onChange={value => {
          setName(value);
        }}
        onInput={value => {
          if (value !== "Bill") {
            setValidationMessage("This form only works for people named Bill");
            setIsValid(false);
          } else if (value === "") {
            setValidationMessage("First name is required");
            setIsValid(false);
          } else {
            setValidationMessage("Valid first name!");
            setIsValid(true);
          }
        }}
      />
      <Input
        label="Password"
        name="password"
        description="Enter your password"
        placeholder="Password"
        onInput={() => {}}
        type="password"
      />
    </Form>
  );
};

​
Props

PropTypeDescription
label Required
name Required
defaultValue
description
error
onBlur
onChange
onFocus
onInput
placeholder
readOnly
required
testId
tooltip
type
validationMessage
value

​
Usage example

Use for form fields where a user can enter any text value, such as email address or name.

​
Guidelines

  • DO: make label and description text concise and clear.
  • DO: include placeholder text to help users understand what’s expected in the field.
  • DO: indicate if a field is required.
  • DO: include clear validation error messages so that users know how to fix errors.
  • DON’T: use this component for long responses, such as open-ended comments or feedback. Instead, use the TextArea component.
  • DON’T: use placeholder text for critical information, as it will disappear once users begin to type. Critical information should be placed in the label and descriptive text, with additional context in the tooltip if needed.
Last modified on February 10, 2026