Property Controls allow users to pass properties (or props) to a code component through the Framer interface. When a user selects a code component on the canvas, its Property Controls are visible on the properties panel. Adding ControlsTo give your component Property Controls, import both the
addPropertyControls function and the
ControlType type from the
In this example, we are adding a Property Control for the component’s
text prop. On the canvas, selecting the component will now display a control that allows us to set this property.
Controls can be hidden by adding the
hidden function to the property description. The function receives an object containing the set properties and returns a
boolean. In this example, we hide the
text property entirely when the connected property (the
false.Now you can toggle the visibility of the text property control by changing the
toggle boolean from the property panel in Framer.
Controls can have a description property to add documentation about the control in the Framer UI—it appears in the Properties panel just above the control. It also supports adding emphasis and links using Markdown syntax. To add line breaks, use the newline character “