Dropdown

🔽 Dropdown Component in Lowcoder

The Dropdown component in Lowcoder enables users to select a single option from a predefined list, enhancing form inputs and user interactions with a clean and intuitive interface.

🔧 Key Features

• Single Selection: Allows users to choose one option from a list.

• Manual and Dynamic Data Entry: Supports both manually entered options and dynamic data binding from APIs or databases.

• Customisable Display: Configure labels, values, and placeholder text to match application requirements.

• Event Handling: Trigger actions based on user interactions, such as selection changes.

🛠 Configuration Options

• Manual Mode: Manually define options with specific labels and values.

• Mapped Mode: Bind options dynamically from data sources like APIs or databases.

• Default Value: Set an initial selected value for the dropdown.

• Disabled State: Disable the dropdown to prevent user interaction when necessary.

• Hidden State: Hide the dropdown from view without removing it from the layout.

⚙️ Integration Tips

• Data Binding: Use {{ }} syntax to bind the selected value to other components or queries. For example:

  {{dropdown1.value}}

• Event Handling: Implement event handlers to respond to selection changes and trigger corresponding actions.

Component Playground

On Component Playground, you can interact with the Dropdown component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Dropdown component.

Lowcoder | rapid App & VideoMeeting builder for everyone.app.lowcoder.cloud

Component Auto-Docs

In the Auto-Docs of Dropdown component, we have shown how to use different properties of the Dropdown component. It also includes the Styling properties of the Dropdown component.

Lowcoder | rapid App & VideoMeeting builder for everyone.app.lowcoder.cloud

Properties of the Dropdown components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
text	String	Returns the text of the Dropdown component
disabled	Boolean	Returns True or False based on whether the Dropdown component is disabled or not
hidden	Boolean	Returns True or False based on whether the Dropdown component is hidden or not

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Click	Triggers, when a User clicks on the Dropdown component

📌 Use Cases

• Form Inputs: Collect user selections in forms, such as choosing a country or category.

• Filtering Data: Allow users to filter displayed data based on selected criteria.

• Navigation Menus: Create dropdown menus for navigating between different sections or pages.