Number

Add a Number property to your component so designers can input numeric values.

Syntax

1
// Prop definition
2
props.Number({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
    defaultValue?: number,
7
    min?: number,
8
    max?: number,
9
    decimals?: number,
10
})
11
12
// Prop value
13
number

Prop definition

Define the Number prop in your Webflow code component with a name. Optionally, you can add a group, tooltip text, and a default value, as well as numeric constraints like min, max, and decimals.

1
props.Number({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
    defaultValue?: number,
6
    min?: number,
7
    max?: number,
8
    decimals?: number,
9
})

Properties

• name: The name for the property.
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• defaultValue: Default value for all component instances. (optional)
• min: Minimum value allowed. (optional)
• max: Maximum value allowed. (optional)
• decimals: Maximum number of decimal places. (optional)

Example

1
import { declareComponent } from '@webflow/react';
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
import "../styles/globals.css";
5
6
export default declareComponent(MyComponent, {
7
    name: "MyComponent",
8
    description: "A component with a Number property",
9
    props: {
10
        count: props.Number({
11
            name: "Item Count",
12
            group: "Settings",
13
            defaultValue: 5,
14
            min: 1,
15
            max: 100,
16
            decimals: 0
17
        })
18
    }
19
});

Prop value

The Number prop provides a numeric value to your React component.

1
number

Properties

• n/a

Webflow properties panel

Example

1
import React from "react";
2
import "../styles/globals.css";
3
4
interface MyComponentProps {
5
count?: number;
6
}
7
8
export const MyComponent = ({ count }: MyComponentProps) => {
9
return (
10
    <div className="counter">
11
    <span>Count: {count}</span>
12
    </div>
13
);
14
}

When to use

Use a Number prop when you want designers to:

• Set numeric values like counts, sizes, or durations
• Control values within specific ranges
• Provide sensible defaults for components
• Limit decimal precision for cleaner data

Best practices

• Set appropriate min/max values for your use case
• Use decimals: 0 for whole numbers, 1-2 for currency/percentages
• Provide meaningful default values
• Consider the range designers will need