---
title: Form selectgroup
summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
description: Improve form UX with select groups.
---
## Simple selectgroup
To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
```html
```
Look at the example below to see how the simple selectgroup works:
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Multiple choices
You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
```html
```
Look at the example below to see how the multiple choices selectgroup works:
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Icon input
To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
```html
```
We recommend you use Tabler Icons for the best experience. You can find {{ iconsCount }} free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
You can also add text to the element. Look at the example below to see how it works:
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Pill selectgroup
If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
```html
...
```
Look at the example below to see how the pill selectgroup works:
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Advanced selectboxes
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html column %}