Complete List of available component input types

Technical Questions
1

What are you trying to accomplish
I’m exploring builder as an option for a client and I really like it but the docs are a bit messy IMHO. Right now I’m looking for a complete list of available component input types and how to implement them but I can’t find it in the search and the docs keep sending me around in a loop between github and the builder.io docs from here:
Using Your React Components in Builder.io - Builder.io
Or am I getting it wrong and there is no default ‘select’ or ‘radio’ option and I would have to create that myself? I don’t want to believe that’s the case as these are a fairly standard input types…

Code stack you are integrating Builder with
NextJS, react

Reproducible code example
import { Builder } from “@builder.io/react”;
import styles from “./brandText.module.scss”;

export const BrandText = (props) => (
<div className={styles.text props.size} dangerouslySetInnerHTML={ { __html: props.text } } />
)

Builder.registerComponent(BrandText, {
name: “Text Block”,
inputs: [
{
name: “text”,
type: “richText”,
defaultValue: “Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.”
},
{
name: “size”,
type: “select”,
options: “small,medium,large”,
defaultValue: “medium”
}
],
});

2

Hi @SimonF thank you for your feedback. We are actively in the process of overhauling that doc completely and will be releasing an update soon!

I think what you may be looking for is the enum option which provides the user with a dropdown of options. You can read about enum here and here.

For a more complete list take a look at these docs for custom components:
Component Options
Input Options
Input Types

You can also see the interface definition in the core SDK here.

1 Like