Option Selectors
Single-Option Selectors (Radio, Few Options)
Use radio selectors when there are 6 or fewer options.
Default Styles
<label class="adb-selector adb-js-radio" for="guide-radio-default1"> <span class="adb-selector--input"> <input checked id="guide-radio-default1" name="radio-default" type="radio"> </span> <span class="adb-selector--value"> Show as primary pricing plan In sit est mollitia omnis nesciunt. repudiandae ut ad aperiam eveniet et. libero quas quod fugiat deserunt tempora esse. odio quaerat fugit quaerat magnam reprehenderit autem officia dignissimos qui nihil exercitationem est. consectetur voluptatem earum pariatur voluptate quia </span> </label> <label class="adb-selector adb-js-radio" for="guide-radio-default2"> <span class="adb-selector--input"> <input id="guide-radio-default2" name="radio-default" type="radio"> </span> <span class="adb-selector--value"> This edition will be selected when a customer chooses free trial </span> </label> <label class="adb-selector adb-js-radio" for="guide-radio-default3"> <span class="adb-selector--input"> <input disabled id="guide-radio-default3" name="radio-default" type="radio"> </span> <span class="adb-selector--value"> This edition can only be bought as a bundle. </span> </label>
<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline1"> <span class="adb-selector--input"> <input checked id="guide-radio-inline1" name="radio-inline" type="radio"> </span> <span class="adb-selector--value"> Inline option 1 </span> </label> <label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline2"> <span class="adb-selector--input"> <input id="guide-radio-inline2" name="radio-inline" type="radio"> </span> <span class="adb-selector--value"> Inline option 2 </span> </label> <label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline3"> <span class="adb-selector--input"> <input id="guide-radio-inline3" name="radio-inline" type="radio"> </span> <span class="adb-selector--value"> Inline option 3 </span> </label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar1"> <span class="adb-selector--input"> <input checked id="guide-radio-bar1" name="radio-bars" type="radio"> </span> <span class="adb-selector--value"> Option 1 </span> </label> <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar2"> <span class="adb-selector--input"> <input id="guide-radio-bar2" name="radio-bars" type="radio"> </span> <span class="adb-selector--value"> <span>Option 2</span> </span> </label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol1"> <span class="adb-selector--input"> <input checked id="guide-radio-symbol1" name="radio-bars-symbol" type="radio"> </span> <span class="adb-selector--value"> Option 1 </span> <span class="adb-selector--affix"> <i class="adb-icon__star"></i> </span> </label> <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol2"> <span class="adb-selector--input"> <input id="guide-radio-symbol2" name="radio-bars-symbol" type="radio"> </span> <span class="adb-selector--value"> Option 2 </span> <span class="adb-selector--affix"> <i class="adb-icon__star"></i> </span> </label>
Single-Option Selectors (Dropdowns, Many Options)
Use dropdown selectors when there are more than 6 options. Functionally, dropdown selectors are different from button menus. Dropdown selectors allow users to select an option for a field in a form whereas action menus function as navigation, allowing users to take different actions or navigate to different pages.
Styles
Example | Class | Code |
---|---|---|
|
.adb-js-dropdown.adb-dropdown
|
<div class="adb-js-dropdown adb-dropdown"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div> |
|
.adb-js-dropdown.adb-dropdown.adb-dropdown__inset
|
<div class="adb-js-dropdown adb-dropdown adb-dropdown__inset"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div> |
Sizes
<div class="adb-js-dropdown adb-dropdown"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div>
<div class="adb-js-dropdown adb-dropdown adb-dropdown__small"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div>
<div class="adb-js-dropdown adb-dropdown adb-dropdown__full_width"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div>
States
Example | Class | Code |
---|---|---|
|
.adb-js-dropdown.adb-dropdown
|
<div class="adb-js-dropdown adb-dropdown"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div> |
|
.adb-js-dropdown.adb-dropdown.adb-is-error
|
<div class="adb-js-dropdown adb-dropdown adb-is-error"> <select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select> </div> |
Fallback
Below is a fallback option for dropdown selectors, for instances when it is not possible to use Javascript to customize the dropdown.
<select> <option>Default first option</option> <option>Lorem ipsum option</option> <option>Lorem ipsum option</option> </select>
Binary-Option Selector (Toggles)
<label class="adb-toggle" for="toggle-input"> <input class="adb-toggle--input" id="toggle-input" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Product Visibility </span> </label> <label class="adb-toggle" for="toggle-input2"> <input checked class="adb-toggle--input" id="toggle-input2" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Product Visibility </span> </label>
Multiple-Options Selectors (Checkboxes)
Default Styles
<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default1"> <span class="adb-selector--input"> <input checked id="guide-checkbox-default1" type="checkbox"> </span> <span class="adb-selector--value"> Show as primary pricing plan </span> </label> <label class="adb-selector adb-js-checkbox" for="guide-checkbox-default2"> <span class="adb-selector--input"> <input id="guide-checkbox-default2" type="checkbox"> </span> <span class="adb-selector--value"> This edition will be selected when a customer chooses free trial </span> </label> <label class="adb-selector adb-js-checkbox" for="guide-checkbox-default3"> <span class="adb-selector--input"> <input disabled id="guide-checkbox-default3" type="checkbox"> </span> <span class="adb-selector--value"> This edition can only be bought as a bundle. </span> </label>
<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline1"> <span class="adb-selector--input"> <input checked id="guide-checkbox-inline1" type="checkbox"> </span> <span class="adb-selector--value"> Inline option 1 </span> </label> <label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline2"> <span class="adb-selector--input"> <input id="guide-checkbox-inline2" type="checkbox"> </span> <span class="adb-selector--value"> Inline option 2 </span> </label> <label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline3"> <span class="adb-selector--input"> <input id="guide-checkbox-inline3" type="checkbox"> </span> <span class="adb-selector--value"> Inline option 3 </span> </label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar1"> <span class="adb-selector--input"> <input checked id="guide-checkbox-bar1" type="checkbox"> </span> <span class="adb-selector--value"> Option 1 </span> </label> <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar2"> <span class="adb-selector--input"> <input id="guide-checkbox-bar2" type="checkbox"> </span> <span class="adb-selector--value"> Option 2 </span> </label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol1"> <span class="adb-selector--input"> <input checked id="guide-checkbox-symbol1" type="checkbox"> </span> <span class="adb-selector--value"> Option 1 </span> <span class="adb-selector--affix"> <i class="adb-icon__star"></i> </span> </label> <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol2"> <span class="adb-selector--input"> <input id="guide-checkbox-symbol2" type="checkbox"> </span> <span class="adb-selector--value"> Option 2 </span> <span class="adb-selector--affix"> <i class="adb-icon__star"></i> </span> </label>
Multi-Select Field
<ul class="adb-js-checkboxes_field adb-checkboxes_field"> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category1"> <span class="adb-selector--input"> <input id="editor-categories-category1" type="checkbox"> </span> <span class="adb-selector--value"> Parent Category 1 </span> </label> <ul class="adb-checkboxes_field--item_list"> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category6"> <span class="adb-selector--input"> <input id="editor-categories-category6" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 1 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category7"> <span class="adb-selector--input"> <input id="editor-categories-category7" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 2 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category8"> <span class="adb-selector--input"> <input id="editor-categories-category8" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 3 </span> </label> </li> </ul> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category2"> <span class="adb-selector--input"> <input id="editor-categories-category2" type="checkbox"> </span> <span class="adb-selector--value"> Parent Category 2 </span> </label> <ul class="adb-checkboxes_field--item_list"> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category9"> <span class="adb-selector--input"> <input id="editor-categories-category9" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 1 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category10"> <span class="adb-selector--input"> <input id="editor-categories-category10" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 2 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category11"> <span class="adb-selector--input"> <input id="editor-categories-category11" type="checkbox"> </span> <span class="adb-selector--value"> Child Category 3 </span> </label> </li> </ul> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category3"> <span class="adb-selector--input"> <input id="editor-categories-category3" type="checkbox"> </span> <span class="adb-selector--value"> Parent Category 3 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category4"> <span class="adb-selector--input"> <input id="editor-categories-category4" type="checkbox"> </span> <span class="adb-selector--value"> Parent Category 4 </span> </label> </li> <li class="adb-checkboxes_field--item"> <label class="adb-selector adb-js-checkbox" for="editor-categories-category5"> <span class="adb-selector--input"> <input id="editor-categories-category5" type="checkbox"> </span> <span class="adb-selector--value"> Parent Category 5 </span> </label> </li> </ul>
Tiered Multi-Select Field
<div class="adb-tags_field adb-js-tags_field"> <div class="adb-tags_field--inputs"> <ul class="adb-tags_field--categories"> <li class="adb-tags_field--category adb-js-tags_field--category"> <a class="adb-tags_field--category_content" data-selected="0" href="#category1" id="category1-link"> Industry <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span> </a> </li> <li class="adb-tags_field--category adb-js-tags_field--category"> <a class="adb-tags_field--category_content" data-selected="0" href="#category2" id="category2-link"> Type <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span> </a> </li> <li class="adb-tags_field--category adb-js-tags_field--category"> <a class="adb-tags_field--category_content" data-selected="0" href="#category3" id="category3-link"> Attribute <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span> </a> </li> </ul> <div class="adb-tags_field--subcategories"> <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category1"> <label class="adb-selector adb-js-checkbox" for="subcategory7"> <span class="adb-selector--input"> <input id="subcategory7" type="checkbox" value="Real Estate"> </span> <span class="adb-selector--value"> Real Estate </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory8"> <span class="adb-selector--input"> <input id="subcategory8" type="checkbox" value="Law"> </span> <span class="adb-selector--value"> Law </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory9"> <span class="adb-selector--input"> <input id="subcategory9" type="checkbox" value="Education"> </span> <span class="adb-selector--value"> Education </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory10"> <span class="adb-selector--input"> <input id="subcategory10" type="checkbox" value="Salon"> </span> <span class="adb-selector--value"> Salon </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory11"> <span class="adb-selector--input"> <input id="subcategory11" type="checkbox" value="Fitness"> </span> <span class="adb-selector--value"> Fitness </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory12"> <span class="adb-selector--input"> <input id="subcategory12" type="checkbox" value="Health Care"> </span> <span class="adb-selector--value"> Health Care </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory13"> <span class="adb-selector--input"> <input id="subcategory13" type="checkbox" value="Hotel"> </span> <span class="adb-selector--value"> Hotel </span> </label> </div> <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category2"> <label class="adb-selector adb-js-checkbox" for="subcategory3"> <span class="adb-selector--input"> <input id="subcategory3" type="checkbox" value="Customer Relationship Management"> </span> <span class="adb-selector--value"> Customer Relationship Management </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory4"> <span class="adb-selector--input"> <input id="subcategory4" type="checkbox" value="Call Management"> </span> <span class="adb-selector--value"> Call Management </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory5"> <span class="adb-selector--input"> <input id="subcategory5" type="checkbox" value="Live Chat"> </span> <span class="adb-selector--value"> Live Chat </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory6"> <span class="adb-selector--input"> <input id="subcategory6" type="checkbox" value="Scheduling and Appointments"> </span> <span class="adb-selector--value"> Scheduling and Appointments </span> </label> </div> <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category3"> <label class="adb-selector adb-js-checkbox" for="subcategory1"> <span class="adb-selector--input"> <input id="subcategory1" type="checkbox" value="Conferencing"> </span> <span class="adb-selector--value"> Conferencing </span> </label> <label class="adb-selector adb-js-checkbox" for="subcategory2"> <span class="adb-selector--input"> <input id="subcategory2" type="checkbox" value="Email"> </span> <span class="adb-selector--value"> Email </span> </label> </div> </div> </div> <div class="adb-tags adb-tags_field--tags adb-js-tags_field--tags"></div> </div>
Selectable Table Rows
Edition | Included | Price | |
---|---|---|---|
Gold Edition |
3 users
25 Gigabytes |
|
|
Silver Edition | 2 users |
|
|
Bronze Edition | 1 users |
|
<table class="adb-table__actionable adb-table__multiline"> <colgroup> <col span="1"> <col width="30%"> <col width="20%"> <col width="50%"> </colgroup> <thead> <tr> <th></th> <th>Edition</th> <th>Included</th> <th>Price</th> </tr> </thead> <tbody> <tr class="adb-js-radio"> <td> <input checked id="purchase-pricing-plan1" name="purchase-pricing-plans" type="radio"> </td> <td>Gold Edition</td> <td> 3 users <br> 25 Gigabytes </td> <td> <ul class="adb-list__feature"> <li> <strong>$199.95 / user / month</strong> <span class="adb-badge adb-badge__free">Free Trial</span> </li> <li> <strong>$180.00 / month for 1-25 users</strong> <span class="adb-caption">+ $9.95.00 / email</span> </li> <li> <strong> $180.00 / month Distinctio nemo iusto ea minus repudiandae voluptas vel quo ut sapiente sapiente accusamus repellat </strong> <span class="adb-caption"> + $9.95.00 / email Et earum accusamus et officiis </span> </li> </ul> </td> </tr> <tr class="adb-js-radio"> <td> <input id="purchase-pricing-plan2" name="purchase-pricing-plans" type="radio"> </td> <td>Silver Edition</td> <td>2 users</td> <td> <ul class="adb-list__feature"> <li> <strong>$79.95 / user / month</strong> <span class="adb-caption">+ $0.00 / email / month</span> <span class="adb-badge adb-badge__info">2-Month Contract</span> </li> <li> <strong>$199.95 / user / day</strong> <span class="adb-caption">+ $0.00 / email / month</span> <span class="adb-badge adb-badge__info">2-Day Contract</span> </li> </ul> </td> </tr> <tr class="adb-js-radio"> <td> <input id="purchase-pricing-plan3" name="purchase-pricing-plans" type="radio"> </td> <td>Bronze Edition</td> <td>1 users</td> <td> <ul class="adb-list__feature"> <li> <strong>$9.95 / user / month for 1-25 users</strong> <span class="adb-caption">+ $0.00 / email / month</span> </li> </ul> </td> </tr> </tbody> </table>
Toggleable Table Rows
Group | Users | Origin | Group Membership |
---|---|---|---|
Design
voluptatem doloribus voluptate tempora voluptatibus
|
24 | Internal | |
Marketing
enim ducimus dolore non illum
|
182 | LDAP | |
Event Planning
cumque exercitationem dolorum aut vitae
|
12 | Internal | |
Trump Fan Club
mollitia non et deleniti itaque
|
42 | LDAP | |
Ciabatto's
sunt esse eum at eum
|
8 | Internal | |
Engineering
voluptas eligendi recusandae ut maiores
|
8 | Internal |
<div class="adb-table" data-toggle-rows> <table> <colgroup> <col span="1" width="40%"> <col span="1" width="20%"> <col span="1" width="20%"> <col span="1" width="20%"> </colgroup> <thead> <tr> <th class="adb-is-active" data-sort data-sort-order="descending"> Group </th> <th data-sort> Users </th> <th>Origin</th> <th>Group Membership</th> </tr> </thead> <tbody> <tr> <td class="adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Design </a> </h4> <div class="adb-summary--details"> corporis delectus dicta eveniet accusantium </div> </td> <td> 24 </td> <td> Internal </td> <td> <label class="adb-toggle" for="user-group1"> <input checked class="adb-toggle--input" id="user-group1" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> <tr> <td class="adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Marketing </a> </h4> <div class="adb-summary--details"> rerum consectetur maiores est ab </div> </td> <td> 182 </td> <td> LDAP </td> <td> <label class="adb-toggle" for="user-group2"> <input checked class="adb-toggle--input" id="user-group2" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> <tr> <td class="adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Event Planning </a> </h4> <div class="adb-summary--details"> minima aut et tenetur necessitatibus </div> </td> <td> 12 </td> <td> Internal </td> <td> <label class="adb-toggle" for="user-group3"> <input class="adb-toggle--input" id="user-group3" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> <tr> <td class="adb-table--card"> <div class="adb-table--card_text adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Trump Fan Club </a> </h4> <div class="adb-summary--details"> accusantium quam aut optio excepturi </div> </div> </td> <td> 42 </td> <td> LDAP </td> <td> <label class="adb-toggle" for="user-group4"> <input class="adb-toggle--input" id="user-group4" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> <tr> <td class="adb-table--card"> <div class="adb-table--card_text adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Ciabatto's </a> </h4> <div class="adb-summary--details"> eos error exercitationem maiores adipisci </div> </div> </td> <td> 8 </td> <td> Internal </td> <td> <label class="adb-toggle" for="user-group5"> <input class="adb-toggle--input" id="user-group5" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> <tr> <td class="adb-table--card"> <div class="adb-table--card_text adb-summary"> <h4 class="adb-summary--title"> <a data-truncate="line" href="#">Engineering </a> </h4> <div class="adb-summary--details"> nihil eaque odit quibusdam quia </div> </div> </td> <td> 8 </td> <td> Internal </td> <td> <label class="adb-toggle" for="user-group6"> <input class="adb-toggle--input" id="user-group6" type="checkbox"> <span class="adb-toggle--control"></span> <span class="adb-toggle--value"> Member </span> </label> </td> </tr> </tbody> </table> </div>