UI Elements

In Anvil, every part of your user interface is a component. Components are Python objects you can create, configure and control entirely in Python. Components range from simple display elements like Labels and Images to interactive ones like Buttons and TextBoxes. Alongside components, Anvil also gives you visual and interactive elements you can control entirely in code, like alerts, notifications or loading indicators.

For the full list of available components, see Anvil Components.

Adding Components

You can build your UI by dragging and dropping components onto a Form in the Anvil Editor:

Dragging and dropping components to make the UI of an Anvil app

Dragging and dropping components to make the UI of an Anvil app

Or you can create them in code and add them to a Form:

class Form1(Form1Template):
    # ... Somewhere inside Form1 ...
    self.button_1 = Button(text="Click me")
    self.add_component(self.button_1)

Properties

Every component has properties that control how it looks and behaves. You can set these in the Properties Panel in the editor:

The Component Properties Panel in the Anvil Editor

The Component Properties Panel in the Anvil Editor

Or directly in code:

self.button_1.text = "Click me"
self.button_1.visible = False

You can also read from properties. For example, reading the text property of a TextBox gives you whatever the user has typed:

user_input = self.text_box_1.text

To learn more about properties, read the full documentation.

Events

Components raise events when the user interacts with them. For example, a Button raises a click event when clicked. You can handle events in the Anvil Editor:

@handle("button_1", "click")
def button_1_click(self, **event_args):
    print("Button clicked!")

Read the Events docs to learn more.

Containers

Containers are components that hold other components and define how they are laid out on the page.

Alerts and Notifications

You can display alerts, confirmation dialogs, and notifications to communicate with your client while your app is running.

Loading Indicator

A loading indicator is displayed on your client when your app is retrieving data. You can also configure your loading indicator through code.


Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.