> 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)

This section covers selection control elements, that lets you set up input elements with predefined options

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 the most basic selection control element which simply returns a yes or a no depending on whether the box is checked or not.

<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="Checkbox example with terms and conditions."><figcaption></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 button 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 (in the example below we have used 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="A list of three radio buttons."><figcaption></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>" %}

The Dropdown element, similarly to the Radio button element lets you give your users one choice out of a selection 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="A dropdown element."><figcaption></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=jqj5LnkjWNs)

</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-elements) 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="The searchbox element showing products."><figcaption></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 ensures a rapid search response, it's worth remembering that each query consumes some workload[^2]. To learn more about workload management, refer to our article series linked below.\
\
Article series: [Pricing and workload](/account-and-marketplace/account-and-billing/pricing-plans.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 and 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="SliderInput element."><figcaption></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 the item 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 element."><figcaption></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 plugin store 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 in order to power your application. Each time your app is tasked with processing an action – such as loading a page and [querying your database](#user-content-fn-3)\[^3] – it contributes to your monthly workload consumption.\
    \
    Article series: [Pricing and workload](/account-and-marketplace/account-and-billing/pricing-plans.md)