Form | UI components (BETA)

  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The Form component renders a form that can contain other subcomponents, such as Input, Select, and Button. Use this component to enable users to submit data to HubSpot or an external system.

  1. Label: the input label.
  2. Text input: an Input component with a placeholder value of First name.
  3. Label: the select input label.
  4. Select input: a Select component with value of Customer.
  5. Button: a Button component to submit the form's information. 
import { Form, Input, Button } from '@hubspot/ui-extensions'; const Extension = () => { return ( <Form onSubmit={() => { console.log('Form submitted!')}} preventDefault={true}> <Input label="First Name" name="first-name" tooltip="Please enter your first name" description="Please enter your first name" placeholder="First name" /> <Input label="Last Name" name="last-name" tooltip="Please enter your last name" description="Please enter your last name" placeholder="Last name" /> <Button onClick={() => { console.log('Submit button clicked'); }} variant="primary" type="submit" > Submit </Button> </Form> ); }
Prop Type Description
onSubmit Function The function that is called when the form is submitted. It will receive a RemoteEvent as an argument and its return value will be ignored.
preventDefault Boolean When set to true, event.preventDefault() will be invoked before the onSubmit function is called, preventing the default HTML form behavior.

Usage examples

  • A form to submit customer information to an external database.
  • A form to place a product order on behalf of a customer.


  • DO: include text inputs when a user should be able to submit any value.
  • DO: include select inputs when a user should only be able to select from a set of values.
  • DO: include descriptions and placeholder text to provide context to users.
  • DO: always position the submit button at the bottom of the form. 
  • DON'T: include a form without a submit button.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.