tabler/docs/content/ui/forms/form-selectboxes.md

title, summary, description

title	summary	description
Form selectgroup	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.	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.

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

Look at the example below to see how the simple selectgroup works:

{% capture html -%}

HTML CSS PHP JavaScript

{%- 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.

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

Look at the example below to see how the multiple choices selectgroup works:

{% capture html -%}

HTML CSS PHP JavaScript

{%- 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.

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

We recommend you use Tabler Icons for the best experience. You can find {{ iconsCount }} free icons in the Tabler Icons library. Just copy the SVG code and paste it into your project.

{% capture html -%}

Icon input

Other

{%- 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 -%}

Selectgroup with icons and text

Home User Circle Square

{%- 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.

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

Look at the example below to see how the pill selectgroup works:

{% capture html -%}

Different style

HTML CSS PHP JavaScript

{%- 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 -%}

Payment method

ending in 7998

ending in 2807

{%- endcapture %} {% include "docs/example.html" html=html column %}