> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/elements/web-app/input-forms/selection-controls.md).

# Selection control input elements (web)

Selection controls are input elements that let users choose from predefined options, such as checkboxes, radio buttons, dropdowns, and sliders. Learn how each one works.

Selection control elements are input elements that let your users make a choice from a preselected set of options. This ranges from a simple *yes/no* answer to picking one or more records from the database or other data sources.

## Checkbox

{% embed url="<https://www.youtube.com/watch?v=HnJPoIAXgRc>" %}

The **Checkbox** element is a basic selection control element that returns a yes or a no, depending on whether the box is checked.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FCvj609VUxZsynHnpmhtx%2Fcheckbox%402x.png?alt=media&amp;token=b7fecc1b-d349-45d7-89ac-9fb6474d6b3b" alt="Unchecked checkbox labeled I accept the terms and conditions."><figcaption><p>A checkbox is a common way to let users accept terms and conditions.</p></figcaption></figure>

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the checkbox input element](https://www.youtube.com/watch?v=HnJPoIAXgRc)

</details>

## Radio button

{% embed url="<https://www.youtube.com/watch?v=jqj5LnkjWNs>" %}

The **Radio buttons** element is similar to the checkbox, but allows you to add more than one option. You can set up a static list of text options (the example below uses the texts Option 1, Option 2, and Option 3), or you can fetch a list of things from the database and display one of their fields as the label.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FiAmRTJNDaXk6f37MMNRM%2Fradio-button%402x.png?alt=media&amp;token=39573ba2-a3cf-4161-aa99-e5a8b38b54df" alt="Three radio buttons labeled Option 1, Option 2, and Option 3, with Option 2 selected."><figcaption><p>Radio buttons let the user pick one option from a list.</p></figcaption></figure>

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the radio button input element](https://www.youtube.com/watch?v=jqj5LnkjWNs)

</details>

## Dropdown

{% embed url="<https://www.youtube.com/watch?v=5jdnZtSBbjA>" %}

Like the **Radio buttons** element, the **Dropdown** element lets your users make one choice from a list of texts or from the database.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FuOTcE8kMawE5aV27UHda%2Fdropdown%402x.png?alt=media&amp;token=6ee8b8f3-7694-4f9f-bbe8-ce739cfc7926" alt="Closed dropdown showing Option 1 as the selected value."><figcaption><p>A dropdown shows the selected option and reveals the full list when clicked.</p></figcaption></figure>

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the dropdown input element](https://www.youtube.com/watch?v=5jdnZtSBbjA)

</details>

## Searchbox element

{% embed url="<https://www.youtube.com/watch?v=TYlb77ObEyg>" %}

The **Search box** element lets you set up a flexible text search for database records. The element looks like a regular [input field](/help-guides/design/elements/web-app/input-forms/text-and-numbers.md#input) but quickly and dynamically returns search results as the user types.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FoZjfzyTNgSQkvdPtZ0np%2Fsearchbox%402x.png?alt=media&amp;token=00304fce-eb9e-4d84-9767-acef2d2c27fb" alt="Search box with the text cap typed in, showing the results Baseball cap and Trucker cap."><figcaption><p>The search box returns matching records as the user types.</p></figcaption></figure>

{% hint style="warning" %}
**Note:** Each time you type or change a character in the search box element, it triggers a fresh [database query](#user-content-fn-1)[^1]. While this gives a fast search response, it's worth remembering that each query consumes some workload[^2]. To learn more about workload management, refer to the article series linked below.

**Article series:** [Workload](/help-guides/workload.md)
{% endhint %}

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the searchbox element](https://www.youtube.com/watch?v=TYlb77ObEyg)
* [How to use the *Do a search for* data source](https://www.youtube.com/watch?v=-2_3kuyOxkw)
* [How to use search constraints](https://www.youtube.com/watch?v=gOjGDCJrXYI)

</details>

## Slider input

{% embed url="<https://www.youtube.com/watch?v=4GxuhmKij_4>" %}

The **Slider input** element lets your users select a numerical value out of a range. You can set a minimum value, a maximum value, and the value of each step.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FQ7NPyZzKUF8fbdmGdZmt%2Fslider-element%402x.png?alt=media&amp;token=320e4ff0-dcbc-4d13-8ced-36f9a9acd000" alt="Horizontal slider with its handle set a little left of the middle."><figcaption><p>The user drags the handle to pick a value within the range you set.</p></figcaption></figure>

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the slider input element](https://www.youtube.com/watch?v=4GxuhmKij_4)

</details>

## Multiselect dropdown

The **Multiselect dropdown** element lets your users select multiple choices from a list of texts or records from the database. They choose items from a dropdown list or search for them by typing.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2Ff37eftycQ91qcyeDUXPi%2Fmultidropdown%402x.png?alt=media&amp;token=7cd2f77c-0ff0-4332-8afb-64789daa9dbb" alt="Multiselect dropdown with Choice 1 and Choice 3 selected as removable tags."><figcaption><p>Each selected item appears as a tag that the user can remove.</p></figcaption></figure>

The element returns a list of whichever type of data you specify.

{% hint style="info" %}
The Multiselect dropdown element is a plugin. It's made by Bubble, but it needs to be installed in your app before you can use it.

Search for Multiselect dropdown in the **Plugins** tab to install it.
{% endhint %}

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to use the *Do a search for* data source](https://www.youtube.com/watch?v=-2_3kuyOxkw)
* [How to use search constraints](https://www.youtube.com/watch?v=gOjGDCJrXYI)

</details>

[^1]: A *database query* means that Bubble communicates with the server to either transmit or retrieve data, such as saving something or finding something using *Do a search for*.\
    **Article series:** [The database](/help-guides/data/the-database.md)\
    **Article:** [Finding data](/help-guides/data/the-database/finding-data.md)\
    **Reference:** [Do a search for](/core-resources/data/data-sources.md#do-a-search-for)

[^2]: *Workload* is a measure of the work that Bubble does to power your app. Each time your app is tasked with processing an action, such as loading a page or querying your database, it contributes to your monthly workload consumption.\
    **Article series:** [Workload](/help-guides/workload.md)