Input Types in Builder
When you create custom components to use in Builder, there are two required inputs and a number of optional inputs to help you further customize your components. This document covers these inputs types in detail.
This document covers the following:
Required inputs: inputs you must use with your custom components
Optional inputs for further customization: inputs that you can use to modify the look and behavior of your component in the Visual Editor
Input type examples: definitions, code snippets, and a screenshot of input types in the Visual Editor
To get the most out of this document, you should be familiar with Integrating Your Custom Components with Builder.
When you register a component with Builder, you must include the
type inputs as in the following table:
A unique name for this input that should match the equivalent prop name on your React component.
Types correlate to what editing UI is appropriate to edit this field. Common types include:
Optional inputs for further customization
You can use additional inputs to further customize your components in Builder. The following table contains Builder's optional inputs.
Use for showing an example value in the input form when creating a new instance of this component, to users understand its purpose.
For any text-based field type, you can specify a set of options that the field can use.
The name the Visual Editor displays for the input.
Provide text to help the end user know how to fill in this input. Displays below the input.
Use optionally with inputs of type
Provide a function that is called whenever the value of the input is updated. Useful for more complex validation than
For any input that results in a string value you can provide a regex to validate user input.
Show and hide the input dynamically.
For example, to only show the input if the component is inside of a
Use the state of other inputs via
If the input type is
Input type examples
This section provides examples of the effects of input types in Builder and covers the following:
- Input type name
- Definition of input type
- Alias/alternative input type you can use instead of the given input type
- Screenshot of input type's effect in Builder's Visual Editor
An input field taking
Provides a color value, in hex or rgb, to a component.
Creates an email value for a component.
Uploads a file and provides the value as a URL string. Refer to
allowedFileTypes for details.
string type but with a multi-line text field editor.
Specifies that an input field expects a number.
Displays a rich text editor and provides the value as HTML
Any text, usually short in length and unformatted.
Every use case is unique. If you need further customization, you can add custom types with plugins.
Need Expert help?
Submit a project to our partners, BuildQuick, and be matched with a Builder expert.