--- 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: Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios. css-plugins: [payments] related: [/ui/forms/form-image-check, /ui/forms/form-color-check] --- import Example from '@components/Example.astro'; import { site } from '@shared/lib/site'; ## 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:
## 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:
## 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 { site.iconsCount } free icons in the [Tabler Icons](https://tabler.io/icons) library. Just copy the SVG code and paste it into your project.
You can also add text to the element. Look at the example below to see how it works:
## 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:
## Advanced selectboxes Use more advanced selectboxes to display the range of available options. You can choose selectboxes with [radio buttons](/ui/forms/form-elements) if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.