ReferenceProp Types

Visibility

Add a Visibility property to your component to choose whether to show or hide elements in Webflow.

Syntax

1// Prop definition
2props.Visibility({
3    name: string,
4    group?: string,
5    tooltip?: string,
6    defaultValue?: boolean,
7})
8
9// Prop value
10boolean

Prop definition

Define the Visibility prop in your Webflow code component with a name. Optionally, you can add a group, tooltip text, and a default value.

1props.Visibility({
2    name: string,
3    group?: string,
4    tooltip?: string,
5    defaultValue?: boolean,
6})

Properties

  • name: The name for the property.
  • group: The group for this property. (optional)
  • tooltip: The tooltip for the property. (optional)
  • defaultValue: Default visibility state. (optional)

Example

MyComponent.webflow.tsx
1import { declareComponent } from '@webflow/react';    
2import { props } from '@webflow/data-types';
3import { MyComponent } from "./MyComponent";
4
5export default declareComponent(MyComponent, {
6    name: "MyComponent",
7    description: "A component with a Visibility property",
8    props: {
9        isVisible: props.Visibility({
10            name: "Show Element",
11            group: "Display",
12            defaultValue: true
13        })
14    }
15});

Prop value

The Visibility prop provides a boolean value to your React component.

PropType.Visibility
1boolean

Properties

  • n/a

Webflow properties panel

Visibility property in the Webflow panel

Example

MyComponent.tsx
1import React from "react";
2
3interface MyComponentProps {
4isVisible?: boolean;
5}
6
7export const MyComponent = ({ isVisible }: MyComponentProps) => {
8if (!isVisible) return null;
9
10return (
11    <div className="element">
12    This element is visible
13    </div>
14);
15}
## When to use
Use a Visibility prop when you want designers to:
- Show or hide elements conditionally
- Control component display states
- Create toggled content
- Build conditional layouts
## Best practices
- Provide sensible default values
- Handle hidden states gracefully
- Consider accessibility implications