# Select group
> A select group is a set of radios or checkboxes styled as buttons, with a label, an icon or both, in the default or the pill style.
Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios.
Source: https://docs.tabler.io/ui/forms/select-group
---
## Simple selectgroup
Wrap the options in a `.form-selectgroup` element. Each option is a `.form-selectgroup-item` label with a hidden `.form-selectgroup-input` and a `.form-selectgroup-label` for the text.
```html
```
```html
```
## Multiple choices
Change the input type to `checkbox` to let the user pick more than one option.
```html
```
```html
```
## Icon input
The label can hold an icon instead of text. The markup is the same, with an `.icon` element inside `.form-selectgroup-label`.
```html
```
The examples use [Tabler Icons](https://tabler.io/icons), which has { site.iconsCount } free icons. Copy the SVG code into the label.
```html
```
An icon and text can go together in one label:
```html
```
## Pill selectgroup
Add `.form-selectgroup-pills` to the group for rounded, pill-shaped options. The rest of the markup stays the same.
```html
...
```
```html
```
## Advanced selectboxes
`form-selectgroup-boxes` turns each option into a box with a title and a description. Use [radios](/ui/forms/elements) when only one option can be picked and checkboxes when several can.
```html
```
## Accessibility
- A select group is a set of radios or checkboxes styled as buttons. Keep the real `input` in the markup - it is what makes the arrow keys, the space bar and the state work.
- Wrap the group in a `fieldset` with a `legend`. The label on each option names the option; only the legend names the group.
- The input is hidden with CSS, not with `display: none` or `hidden`, which would take it out of the tab order. Do not swap that for a hidden attribute.
- Focus lands on the input, so make sure the focus ring is visible on the label that stands in for it.