---
title: Select group
seoTitle: Form select group
order: 5
summary: 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.
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/plugins/advanced-select, /ui/forms/image-check, /ui/forms/color-check]
---
import Example from '@components/Example.astro';
import { site } from '@shared/lib/site';
import Icon from '@ui/Icon.astro'

## 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
<label class="form-selectgroup-item">
  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
  <span class="form-selectgroup-label">...</span>
</label>
```

<Example centered>
<div>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="name" value="CSS" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="name" value="PHP" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>
</Example>

## Multiple choices

Change the input type to `checkbox` to let the user pick more than one option.

```html
<label class="form-selectgroup-item">
  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
  <span class="form-selectgroup-label">...</span>
</label>
```

<Example centered>
<div>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>
</Example>

## 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
<label class="form-selectgroup-item">
  <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
  <span class="form-selectgroup-label">
    <svg class="icon" width="24" height="24">...</svg>
  </span>
</label>
```

The examples use [Tabler Icons](https://tabler.io/icons), which has { site.iconsCount } free icons. Copy the SVG code into the label.

<Example centered>
<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">
        <Icon name="sun" />
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
        </svg>
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">
        <Icon name="cloud-rain" />
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 .996c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878" />
        </svg>
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">Other</span>
    </label>
  </div>
</div>
</Example>

An icon and text can go together in one label:

<Example>
<div class="mb-3">
  <label class="form-label">Selectgroup with icons and text</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label"> <Icon name="home" class="me-1" /> Home </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"> <Icon name="user" class="me-1" /> User </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"> <Icon name="circle" class="me-1" /> Circle </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <rect x="4" y="4" width="16" height="16" rx="2" /> </svg> Square
      </span>
    </label>
  </div>
</div>
</Example>

## Pill selectgroup

Add `.form-selectgroup-pills` to the group for rounded, pill-shaped options. The rest of the markup stays the same.

```html
<div class="form-selectgroup form-selectgroup-pills">...</div>
```

<Example>
<div class="mb-3">
  <label class="form-label">Different style</label>
  <div class="form-selectgroup form-selectgroup-pills">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>
</Example>

## 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.

<Example column>
<div class="mb-3">
  <label class="form-label">Payment method</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3"><span class="form-selectgroup-check"></span></div>
        <div>
          <span class="payment payment-provider-visa payment-xs me-2"></span> ending in
          <strong>7998</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3"><span class="form-selectgroup-check"></span></div>
        <div>
          <span class="payment payment-provider-mastercard payment-xs me-2"></span> ending in
          <strong>2807</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3"><span class="form-selectgroup-check"></span></div>
        <div><span class="payment payment-provider-paypal payment-xs me-2"></span></div>
      </div>
    </label>
  </div>
</div>
</Example>

## 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.