Components

Components are the building blocks of Budibase apps. Use them to collect input, display data, and shape screen layout.

Add components

Add components in one of two ways:

1. Use the add component button in the builder.
2. Select a component type from the searchable component list.

When the component list is open, press Enter to add the highlighted component.

Delete components

Select a component and press Backspace or Delete.

You can also delete a component from its menu.

Component tree

The component tree shows the structure of the screen.

Use it to:

• Reorder components with drag and drop
• Nest components inside containers, forms, repeaters, or other parent components
• Copy, move, or delete components from the ... menu

Common parent components include:

• Data Provider
• Repeater
• Form
• Form step
• Field Group
• Container
• Section
• Side Panel
• Modal

Keyboard shortcuts

Common shortcuts include:

• Backspace or Delete to remove a selected component
• ⌘ + ↑ to move a component up
• ⌘ + ↓ to move a component down
• ⌘ + D to duplicate a component
• ⌘ + X to cut a component
• ⌘ + C to copy a component
• ⌘ + V to paste a component

Use Ctrl instead of ⌘ on Windows.

Rename components

Rename components to make the tree easier to scan.

1. Select the component.
2. Open its settings in the right-hand panel.
3. Replace the current name with a clear label.

Use names that describe the component’s purpose, not just its type.

Use components

Once a component is on the screen, its settings appear in the right-hand panel.

Some components also expose controls in the canvas preview. Use those when you need to adjust layout or content without changing the component tree.

Related guides

• Command interface
• Screens
• Using data providers