TheFormcomponent renders a form that can contain other subcomponents, such asInput,Select, andButton. Use this component to enable users to submit data to HubSpot or an external system.
Label:the input label.
Text input:anInput component with a placeholder value of First name.
Label:the select input label.
Select input:aSelect component with value of Customer.
Button:aButton component to submit the form's information.
import { Form, Input, Button } from '@hubspot/ui-extensions';
const Extension = () => {
return (
<Form onSubmit={() => { console.log('Form submitted!')}}>
<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.
autoComplete
'on' (default) | 'off'
Set this field to 'off' to prevent autocompletion software (e.g., browser, password managers) from auto-filling form fields. Based on the autocomplete HTML attribute.
Usage examples
A form to submit customer information to an external database.
A form to place a product order on behalf of a customer.
Guidelines
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.
