ReferenceProp Types

Boolean

Add a Boolean property to your component to change behavior, interactivity, or styles.

Use a Boolean prop when you want designers to:

  • Enable or disable a feature
  • Toggle styling variations
  • Create behavior variations

Syntax

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

Prop definition

Define the Boolean prop in your Webflow code component with a name.

Optionally, you can add a default value and labels for the true and false values. Additionally, you can add a group and tooltip text.

1props.Boolean({
2    name: string,
3    group?: string,
4    tooltip?: string,
5    defaultValue?: boolean,
6    trueLabel?: string,
7    falseLabel?: string,
8})

Properties

  • name: The name for the property.
  • group: The group for this property (optional).
  • tooltip: The tooltip for this property (optional).
  • defaultValue: Default value for all component instances. (optional)
  • trueLabel: Label for the true value in the props panel. (optional)
  • falseLabel: Label for the false value in the props panel. (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 boolean and text properties",
8    props: {
9        showDetails: props.Boolean({
10            name: "Show Details",
11            group: "Content",
12            defaultValue: false,
13            trueLabel: "Show Details",
14            falseLabel: "Hide Details"
15        })
16    }
17});

Prop value

The Boolean prop provides a boolean value to your React component:

PropType.Boolean
1boolean

Properties

  • n/a

Webflow properties panel

Boolean property in the Webflow panel

Example

MyComponent.tsx
1import React from "react";
2
3interface MyComponentProps {
4  showDetails?: boolean;
5}
6
7export const MyComponent = ({ showDetails }: MyComponentProps) => {
8  return (
9    <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
10      <h3>Welcome Explorers!</h3>
11      <p>Unlock your potential with our amazing features.</p>
12      
13      {/* When showDetails is true, reveal additional content */}
14      {showDetails && (
15        <div style={{ marginTop: '12px', padding: '12px', backgroundColor: '#f0f8ff', borderRadius: '4px' }}>
16          <p><strong>🚀 Ready to soar higher?</strong></p>
17          <ul>
18            <li>Discover hidden capabilities that transform your experience</li>
19            <li>Access exclusive insights that drive success</li>
20            <li>Unleash the full power of what's possible</li>
21          </ul>
22        </div>
23      )}
24    </div>
25  );
26}