> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: c7146fa1-0b47-46c6-8ea6-373c6c1ae03e
---

# Input

> Learn about the Input component for use in UI extensions.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) that has a submit button.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guidelines-input.png" alt="design-guidelines-input" />
</Frame>

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.

```jsx theme={null}
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

<ComponentProps autoGenerated componentName="Input">
  <ComponentProp name="label" required={true} type={<><code>string</code></>} description={<>The text that displays above the input. Required if <code>inputType</code> is not set to <code>hidden</code>.</>} />

  <ComponentProp name="name" required={true} type={<><code>string</code></>} description={<>The input's unique identifier, similar to the HTML input element name attribute.</>} />

  <ComponentProp name="defaultValue" required={false} type={<><code>string</code></>} description={<>The value of the input on the first render.</>} />

  <ComponentProp name="description" required={false} type={<><code>string</code></>} description={<>Displayed text that describes the field's purpose.</>} />

  <ComponentProp name="error" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, <code>validationMessage</code> is displayed as an error message if provided. The input will also render in an error state so that users are aware. If left <code>false</code>, <code>validationMessage</code> is displayed as a success message.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="onBlur" required={false} type={<><code>(value: string) =&gt; void</code></>} description={<>A function that is called and passes the value when the field loses focus.</>} />

  <ComponentProp name="onChange" required={false} type={<><code>(value: string) =&gt; void</code></>} description={<>A callback function that is invoked when the value is committed. Currently, these are <code>onBlur</code> of the input and when the user submits the form.</>} />

  <ComponentProp name="onFocus" required={false} type={<><code>(value: string) =&gt; void</code></>} description={<>A function that is called and passed the value when the field gets focused.</>} />

  <ComponentProp name="onInput" required={false} type={<><code>(value: string) =&gt; void</code></>} description={<>A function that is called and passes the value when the field is edited by the user. Should be used for validation. It's recommended that you don't use this value to update state (use <code>onChange</code> instead).</>} />

  <ComponentProp name="placeholder" required={false} type={<><code>string</code></>} description={<>The text that appears in the input before a value is set.</>} />

  <ComponentProp name="readOnly" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, users will not be able to enter a value into the field.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="required" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, displays a required field indicator.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />

  <ComponentProp name="tooltip" required={false} type={<><code>string</code></>} description={<>The text that displays in a tooltip next to the input label.</>} />

  <ComponentProp name="type" required={false} type={<><code>"password"</code> | <code>"text"</code></>} description={<>The type of input. An input with the <code>'password'</code> type will hide the characters that the user types.</>} defaultValue={<><code>"text"</code></>} />

  <ComponentProp name="validationMessage" required={false} type={<><code>string</code></>} description={<>The text to show if the input has an error.</>} />

  <ComponentProp name="value" required={false} type={<><code>string</code></>} description={<>The value of the input.</>} />
</ComponentProps>

## 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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area).
* **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.

## Related components

* [Select](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select)
* [TextArea](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area)
* [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form)