Component properties

Use component properties to create unique instances of recurring components.

Component properties let you define specific elements within a component that can be modified with unique values on a component instance.

This is great for recurring layout patterns whose structure should be uniform but have unique content in each instance. Or, you might want to slightly adjust the structure by hiding or showing specific elements in different component instances.

Supported properties

Supported component properties include:

• Content properties (to modify content in a component instance)
• Switch properties (e.g., to hide or show an element in a component instance)
• Collection list properties (to modify filters, sort order, pagination, display limits, or curated item settings)

Content properties

Content properties allow you to customize your element content in a component instance. For example, let’s say you have a hero section design that you want to use in multiple pages across your site. The design structure should remain the same, but you need different paragraph content in each component instance. You can create a component property for your paragraph and modify that paragraph content anywhere the hero section appears on your site.

Supported property types include:

• Text (e.g., on paragraphs, headings, etc.)

• Rich text

• Image

• Link (e.g., on buttons and link blocks)

• Video

• Number

• Switch

Controlling visibility

You can create layout variations across component instances by showing or hiding specific elements.

For example, you can:

• show or hide links or buttons in a navbar component

• show or hide different icons in a button component

• create section variations by showing or hiding groups of elements like images, videos, buttons, and links

To control visibility per component instance, create a switch prop and use it to toggle elements on or off.

You can locate hidden elements in components by expanding the component hierarchy in the Navigator panel. Hidden elements are indicated with a “struck-through eye” icon.

Collection list properties

You can connect Collection list settings (e.g., filters, sort order, pagination, display limits, or curated items) to component properties to display unique content in an instance of a Collection list component.

For example, you could create a carousel of blog posts with a uniform design that displays recent posts on one page and related posts on another.

You can also use CMS data in the component properties you create and connect to Collection lists.

How to create component properties

To modify property values for component instances, you’ll first need to create component properties on the main component. You can then override these main component properties to create custom content on different component instances.

You can create a new property on the main component and concurrently connect that property to a specific element within your component. Alternatively, you can create component properties directly on the main component and connect them to elements later.

If suggested properties are available, you can also create multiple properties automatically when creating a new component or editing an existing component.

Create properties automatically with suggested props

When you create a new component — or edit an existing component that includes supported elements not yet connected to a property — Webflow provides suggested props automatically. You can review the suggestions, rename each prop, and deselect any you don’t want. This lets you create and connect multiple properties at once.

Create properties from suggested props when creating a new component

To create properties from suggested props:

1. Select the element you want to turn into a component

2. Open the Components panel, Style panel, or Element settings panel

3. Click the “create component” icon at the top of the panel

4. Give your component a name and optional description

5. Click the “expand” icon next to the number of suggested props to review them individually

6. (Optional) Rename suggested props by clicking the “pencil” icon

7. (Optional) Deselect any suggested props you don’t want to create

8. Click Create

After you create the component, Webflow creates and connects the selected properties automatically.

Create properties from suggested props when editing an existing component

Suggested props appear at the top of the Properties panel when Webflow finds supported elements in the component that aren’t connected to properties, and in Element settings when you select an element with suggested props.

If suggested props are available, you can review them, and create and connect multiple properties at once.

To create properties from suggested props:

1. Double-click a component instance to edit the main component

2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

3. If suggested props are available, click Review to view the full list of suggested props

4. (Optional) Rename a suggested prop by clicking the “pencil” icon

5. (Optional) Deselect any suggested props you don’t want to create

6. Click Create

After you click Create, Webflow creates and connects the selected properties automatically.

Create and connect component properties manually

You can create a new property on the main component and connect that property directly to a specific element within your component. To create a new property and connect it to an element:

1. Locate the component that contains the element you want to modify

2. Double-click the component instance to edit the main component

3. Select the element for which you want to create a component property

4. Go to the Element settings panel

5. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, link, etc.)

6. Click Create [Name] property

7. Define the property’s default values (e.g., name the property and add text content, set the image, toggle the visibility, etc.)

8. Click Create

Create properties manually from the Properties panel

To create a component property in a main component from the Properties panel:  

1. Locate the component that contains the element you want to modify

2. Double-click the component instance to edit the main component

3. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

4. Click the “plus” icon to create a new property

5. Choose the property type from the menu

6. Define the property’s default values (e.g., name the property and add text content, set the image, toggle the visibility, assign or create a group, etc.)

7. Click off the menu or press Return on your keyboard to create the property

Then, to connect a property to an element:

1. Locate the component that contains the element you want to modify
2. Double-click the component instance to edit the main component
3. Select the element to which you want to connect a component property
4. Go to Element settings panel
5. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, etc.)
6. Choose the component property you want to connect to the selected element from the dropdown

Create, edit, and delete property groups

You can create and assign property groups when you create a property. To edit a group name, go to the Props panel, click the “more options” dots next to the group name you want to edit, and click Rename.

To delete a group, go to the Props panel, click the “more options” dots next to the group name you want to edit, and click Ungroup. Note that deleting a group name doesn’t delete the props inside the group.

How to add a tooltip to properties

More complex properties — like properties connected to custom attributes — may benefit from additional information for your teammates. You can add a tooltip with a helpful description from the Props panel when you create or edit a property. This tooltip will appear on the Props panel for each component instance.

How to modify property values on component instances

After you’ve created a property, exit the main component to go back to the individual component instance. There, you can modify component property values to customize your content or visibility on the instance (i.e., create unique content for a specific element in the component instance).

You can modify your component instances in two ways:

• Modify properties with static values
• Connect properties to CMS data

Learn about the differences between static and dynamic content.

Modify properties with static values

The quickest way to edit static content in component properties is to:

1. Locate the component instance that contains the element whose values you want to modify
2. Go to the right panel
3. Modify the element’s property values (e.g., update the text, replace an image, set the visibility, etc.)

You can also edit the value for an element in the selected component instance right on the canvas. Click the component, then double-click the element you want to edit within the component instance. Elements connected to component properties are indicated with a dotted green outline on the canvas within the component instance.

To revert component properties to their default values, you can choose to reset all properties at once, or reset them individually.

To reset all properties to their default values at once:

1. Select the component instance on the canvas
2. Go to the component instance’s right panel
3. Click the “more options” dots in the upper-right corner
4. Choose Reset all properties

To reset a single property to its default value:

1. Locate the component instance that contains the element whose value you want to reset
2. Select the element on the canvas
3. Go to the right panel
4. Click the component property’s name
5. Click Reset to default property value

Connect properties to CMS data

To reuse layouts across different Collection pages, while preserving a consistent design, you can also connect and display Collection data in your component instances without needing to unlink from the main component.

You can connect properties to the following Collection fields:

• Date / Time
• Plain text
• Email
• Phone
• Video link
• Link
• Option
• Number
• Image
• Rich text
• File
• Reference

Keep in mind that you must have already created a Collection in order to connect component properties to the Collection field data.

To connect a component property to CMS Collection data on a Collection page:

1. Open the page that contains your component
2. Double-click the component instance to edit the main component
3. Create component properties if properties don’t already exist for the elements you want to connect them to
4. Select the element you want to connect to your Collection data
5. Go to Element settings panel
6. Click the purple “dot” icon next to the value for which you’d like to connect a component property (e.g., text, image, visibility, etc.)
7. Choose the component property you want to connect to the selected element from the dropdown
8. Exit the main component by clicking the “back” arrow at the upper-left corner of the Designer or pressing Esc on your keyboard
9. Select the element you want to connect to your Collection data
10. Go to the right panel
11. Click the purple “dot” icon next to the component property’s modifiable content (e.g., text, image, visibility, etc.)
12. Choose the Collection field from the menu (e.g., Name, Published on, Thumbnail image, etc.)

The component instance will now display the selected Collection field’s content (as long as the Collection field is populated with data in your Collection).

To disconnect an element from a Collection field:

1. Open Pages panel > CMS Collection pages and choose the page that contains your component
2. Select the component element you want to disconnect
3. Go to the right panel
4. Click the property’s purple menu
5. Click Disconnect property

How to reorder, delete, and disconnect component properties

To manage a component’s properties, enter the main component. In the Props panel, you can find a list of the main component’s properties and determine their element connections, adjust their default settings and values, and reorder or delete properties.

Reorder properties

By default, component properties appear in the Props panel in the order in which they were created. You can click and drag properties to reorder them however you want.

Delete properties

To delete a property in a main component, go to the main component, then go to the Props panel, and click the “trash” icon. If the property is still connected to one or multiple component element(s), deleting it will disconnect it from the component element(s). Any content in a connected property will be lost upon property deletion and will be replaced with the default value you’ve set.

Delete and reconnect elements to previously set component properties

If you delete an element from the main component, each corresponding element in other component instances will also be deleted (even if they’ve been modified with unique content via component properties). However, component properties and their applied values will still remain for each instance (even if the element originally connected to that property has been deleted).

You can then connect new or existing elements to those properties. Those elements will then reflect the values applied to the previously set properties (e.g., updated text content, images, visibility, etc.).

Disconnect properties

You can disconnect properties in the Properties panel when editing the main component. To disconnect a property from a component element:

1. Locate the component that contains the element from which you want to disconnect a property

2. Double-click the component instance to edit the main component

3. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

4. Click the property’s name that you want to disconnect

5. Click the name of the element it’s connected to

6. Click the element’s purple dropdown menu under its settings and choose Disconnect property