​
Props

Props are the primary way to pass data into a React component. They are one of the two types of data that control a component. The other type of data is state, which is used to control data within the component. Props are passed into the render function of a component as an object in the first argument position. The object contains all the props passed into the component. 
function MyComponent(props) {
  return <div>{props.name}</div>
}
You can read more about props in the React documentation.

​
Controls

Controls describe the way users can pass data to your components props. Each control maps a prop on your component to user interface elements such as and . Controls are defined when registering components. There are two types of controls: basic and composable controls.

​
Basic controls

Basic controls cannot contain other controls. Multiple basic controls can provide the same type of data, but with different user interfaces. For example, you can provide a string to your component with a TextInput, TextArea, Select, or Combobox control. Here are all of the basic controls:

Checkbox

Color

Combobox

Image

Link

Number

Select

TextArea

TextInput

There are three special basic controls that are designed for specific types of props such as className and children:

RichText

Slot

Style

  • The RichText control provides a ReactNode to your component and then renders an inline rich text editor wherever the builder renders the ReactNode.
  • The Slot control provides a ReactNode to your component and places a drop zone wherever the builder renders the prop. Users can then add components visually to that drop zone.
  • The Style control provides multiple and that modify various CSS properties. This data is then passed to your component as a string value.

​
Composable controls

Composable controls provide an array or object to a prop of your component. Composable controls have a type property that can recursively contain any control. The List control is used to modify props that expect an array, and the Shape control is used to modify props that expect an object.

List

Shape