# Selection controls

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&#x26;token=b7fecc1b-d349-45d7-89ac-9fb6474d6b3b" alt=""><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&#x26;token=39573ba2-a3cf-4161-aa99-e5a8b38b54df" alt=""><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&#x26;token=6ee8b8f3-7694-4f9f-bbe8-ce739cfc7926" alt=""><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](https://manual.bubble.io/~/changes/1101/help-guides/design/elements/web-app/text-and-numbers#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&#x26;token=00304fce-eb9e-4d84-9767-acef2d2c27fb" alt=""><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](https://manual.bubble.io/~/changes/1101/account-and-marketplace/account-and-billing/pricing-plans)
{% 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&#x26;token=320e4ff0-dcbc-4d13-8ced-36f9a9acd000" alt=""><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&#x26;token=7cd2f77c-0ff0-4332-8afb-64789daa9dbb" alt=""><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](https://manual.bubble.io/~/changes/1101/help-guides/data/the-database)\
    Article: [Finding data](https://manual.bubble.io/~/changes/1101/help-guides/data/the-database/finding-data)\
    Reference: [Do a search for](https://manual.bubble.io/~/changes/1101/core-resources/data/data-sources#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](https://manual.bubble.io/~/changes/1101/account-and-marketplace/account-and-billing/pricing-plans)