--- 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: ```html example columns={1} 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: ```html example columns={1} 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 over free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project. ```html example columns={1} centered
``` You can also add text to the element. Look at the example below to see how it works: ```html example columns={1} centered
``` ## 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: ```html example columns={1} centered
``` ## 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. ```html example height="30rem" centered columns="1" plugins="payments"
``` ```html ```