# Configure component properties

Select a component on Canvas or in Outline, then open **Properties**. The inspector shows the fields supported by that component type, along with its layout and visibility settings. The component catalog defines which values are literal configuration and which may be bound dynamically.

## Identity and layout

**Id** identifies the component in bindings and actions. Builder ids begin with a letter, contain letters, digits, or underscores, and are at most 64 characters. Component, data-source, and output ids share a namespace; choose an id not already used by any of them.

Renaming a component retargets explicit set-component-value actions and container-parent references. Review authored expression text after renaming; do not assume every string referencing the old id was rewritten.

**Region** places a top-level component in Main, Side panel, Sidebar, or Detail pane. A nested component inherits the region of its container root, so the region control is disabled while nested. **Span (1–12)** applies to the main grid. Other regions are vertical arrangements rather than twelve-column grids.

## Typed fields

Use the field's appropriate control: switches for booleans, choices for enums, numbers within their bounds, and JSON for structured arrays or objects. Unsetting a property restores the component's default; this differs from supplying an explicit empty string, false, or zero where those values are valid.

The inspector marks deprecated fields and explains the replacement where available. Prefer the recommended structure for new work, while retaining old fields only when you need their documented behavior.

## Bindings and validation

A binding-capable property can read app state, a component's published value, or a data-source result. Begin an expression with {{ to see matching paths, then choose a suggestion or finish the expression yourself. Read the field's diagnostic if the expression is invalid or references something unavailable.

**Visible (expression)** controls whether the component appears; it does not replace data permissions. Storage Browser has a dedicated Storage settings editor because its connection and operation policies are literal authoring choices.

Preview the intended value and the empty/loading state before saving. See [Bindings](/docs/builder/bindings), [Visibility](/docs/builder/visibility), and the individual component references for exact properties, published values, and events.