ID

Add an ID property to your component so designers can set unique identifiers on HTML elements.

The ID prop creates a text input for element IDs, making it easy to target elements with CSS or JavaScript.

Syntax

// Prop definition
props.Id({
    name: string,
    group?: string,
    tooltip?: string,
})
// Prop value
string

Prop definition

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

props.Id({
    name: string,
    group?: string,
    tooltip?: string,
})

Properties

• name: The name for the property.
• group: The group for this property (optional).
• tooltip: The tooltip for this property (optional).

Example

import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";
export default declareComponent(MyComponent,    {
    name: "MyComponent",
    description: "A component with an ID property",
    props: {
        id: props.Id({
            name: "Element ID",
            group: "Info"
        })
    }
});

Prop value

The ID prop provides a string to your React component:

string

Properties

• n/a

Webflow properties panel

Example

import React from "react";
interface MyComponentProps {
id?: string;
}
export const MyComponent = ({ id }: MyComponentProps) => {
return (
    <div id={id}>
    {/* Component content */}
    </div>
);
}

When to use

Use an ID prop when you want designers to:

• Set unique identifiers for CSS targeting
• Connect form labels to inputs
• Enable JavaScript interactions