> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/whatsapp-channel/flow-builder/selection-components.md).

# Selection Components

{% embed url="<https://app.supademo.com/demo/cmloqfxbi09k8egrd1azxpl16?utm_source=link>" %}

**Checkbox** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9u4ab700nzvz0j6myzsima?utm_source=link>" %}

Allows users to select one or multiple options.\
Used when multiple selections are allowed.

**Checkbox (Color Variant)** &#x20;

Displays multi-select options with color styling.\
Improves visual clarity for selection.

**Checkbox (Image Variant)**&#x20;

Displays multi-select options using images.\
Used for visual-based product or item selection.

**Radio Button** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9uyidv0001ys0ju42df07y?utm_source=link>" %}

Allows selection of only one option.\
Used for exclusive decision-making.

**Radio Button (Color Variant)**&#x20;

Displays single-select options with color styling.\
Enhances clarity for exclusive selections.

**Radio Button (Image Variant)** &#x20;

Displays single-select options using images.\
Used for selecting one visual option such as size or product.

**Dropdown** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9v858k00wevz0jrlfkvhzm?utm_source=link>" %}

Displays options in a compact expandable list.\
Used to save screen space while allowing selection.

**Dropdown (Color Variant)** &#x20;

Displays dropdown options with color styling.\
Improves recognition and user interaction.

**Dropdown (Image Variant)**&#x20;

Displays dropdown options with images.\
Used for visually guided selection.