Collect user information via forms in modals or embedded in your UI
Form
component is a super versatile tool that can fit right into your product UI or pop up in a modal for things like surveys. They can be used for wide range of use cases including registration flows, surveys, feedback forms, and more. The component supports form validation (client and server-side), conditional fields, branching logic, and multi-step Flows.
When to Use Forms:
select
radio
text
textarea
checkbox
props
property in the field configuration.
For instance, this is useful if you want to use the text
field type, but override the type
to email
or tel
. It can also be used to add any attribute such as a css class, data, or styling.
fieldTypes
prop.
For instance, you can implement a simple calendar datepicker field type as such:
company-size
to show up when a user selects company
in the customer-type
field:
pattern
property with a regular expression. The example below shows how to validate an email field:
onPrimary
event handler. If the promise resolves to false
, the current step in the form will not be marked as completed. The onPrimary
event handler also contains all form data collected in the session, which allows you to send the data to your server for validation or storage.
useFlow
hook to get access to the flow instancepopstate
)flow.back()
or flow.forward()
value
of a field
to the variables
prop of the Form component. The example below shows how to prefill a form with the user’s name:
as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.Defaults to true
.Form
.For example, if you want to use a custom field type called calendar
:false
, the step will not be automatically completed when clicked.false
, the step will not be automatically completed when clicked.title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.