Visibility

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

Syntax

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

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.

1 props.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

1 import { declareComponent } from '@webflow/react';
2 import { props } from '@webflow/data-types';
3 import { MyComponent } from "./MyComponent";
4 
5 export 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

1 boolean

Properties

n/a

Webflow properties panel

Visibility property in the Webflow panel

Example

MyComponent.tsx

1 import React from "react";
2 
3 interface MyComponentProps {
4 isVisible?: boolean;
5 }
6 
7 export const MyComponent = ({ isVisible }: MyComponentProps) => {
8 if (!isVisible) return null;
9 
10 return (
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

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

1	import { declareComponent } from '@webflow/react';
2	import { props } from '@webflow/data-types';
3	import { MyComponent } from "./MyComponent";
4
5	export 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	});

1	import React from "react";
2
3	interface MyComponentProps {
4	isVisible?: boolean;
5	}
6
7	export const MyComponent = ({ isVisible }: MyComponentProps) => {
8	if (!isVisible) return null;
9
10	return (
11	<div className="element">
12	This element is visible
13	</div>
14	);
15	}