Check with your designers to help you design this section
Check with your designers to help you design this section
In very simple cases you can substitute a <select>, however drowpdowns
provide bettercross-browser support if your items include markup instead of simple text.
Dropdowns also support groupsand include an automatic type-ahead search when the
dropdown has 5+ items, making longer lists much moreaccessible for the power user.
Breaking Change: v2.75.0 introduced a raul- class prefix to
dropdown and
loader components. This namespacing
prevents RAUL components from conflicting with non-RAUL components.
Update your markup for these components when moving to 2.75 and later.
<div class="raul-dropdown-select ">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="raul-dropdown-select">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Select a pet...</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-search">
<div class="dropdown-row">
<div class="form-control-wrapper">
<input
type="search"
class="form-control dropdown-search-input"
placeholder="Search..."
/>
<div class="form-icon-box">
<i
class="fa fa-search form-icon form-icon-search form-icon-grey"
aria-hidden="true"
></i>
</div>
</div>
</div>
</div>
<div class="dropdown-body">
<div class="dropdown-search-not-found-wrapper">
<h6 class="dropdown-header">No items found</h6>
</div>
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Aardvark</span>
<input
type="radio"
name="form-style-second-section"
value="aardvark"
data-text="Aardvark"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Bat</span>
<input
type="radio"
name="form-style-second-section"
value="bat"
data-text="Bat"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Crocodile</span>
<input
type="radio"
name="form-style-second-section"
value="crocodile"
data-text="Crocodile"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Dung Beetle</span>
<input
type="radio"
name="form-style-second-section"
value="dung-beetle"
data-text="Dung Beetle"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Elephant</span>
<input
type="radio"
name="form-style-second-section"
value="elephant"
data-text="Elephant"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Ferret</span>
<input
type="radio"
name="form-style-second-section"
value="ferret"
data-text="Ferret"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Gecko</span>
<input
type="radio"
name="form-style-second-section"
value="gecko"
data-text="Gecko"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Horned Owl</span>
<input
type="radio"
name="form-style-second-section"
value="horned-owl"
data-text="Horned Owl"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="raul-dropdown-select">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Select a food...</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row dropdown-row-header">
<h6 class="dropdown-header section-title">
Fruit
</h6>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Apple</span>
<input
type="radio"
name="form-style-second-section"
value="apple"
data-text="Apple"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Banana</span>
<input
type="radio"
name="form-style-second-section"
value="banana"
data-text="Banana"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Cherry</span>
<input
type="radio"
name="form-style-second-section"
value="cherry"
data-text="Cherry"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Dragonfruit</span>
<input
type="radio"
name="form-style-second-section"
value="dragonfruit"
data-text="Dragonfruit"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
<div class="dropdown-group">
<div class="dropdown-row dropdown-row-header">
<h6 class="dropdown-header section-title">
Vegetables
</h6>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Broccoli</span>
<input
type="radio"
name="form-style-second-section"
value="broccoli"
data-text="Broccoli"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Brussel Sprouts</span>
<input
type="radio"
name="form-style-second-section"
value="brussel-sprouts"
data-text="Brussel Sprouts"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Cauliflower</span>
<input
type="radio"
name="form-style-second-section"
value="cauliflower"
data-text="Cauliflower"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">None of the above</span>
<input
type="radio"
name="form-style-second-section"
value="none"
data-text="None of the above"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="raul-dropdown-select dropdown-no-border">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="raul-dropdown-select dropdown-no-border dropdown-sm">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
The standard <select multiple> performs notoriously poorly in user
experience testing. RAUL includes two alternatives: a checkbox version and a
typeahead version. Grouping can be added to/removed from either multiselect as needed.
Useful when there's not enough space for checkboxes, when you need type-ahead or selecting groups is important.
<div class="raul-dropdown-select dropdown-multiple">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Select users...</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-search">
<div class="dropdown-row">
<div class="form-control-wrapper">
<input
type="search"
class="form-control dropdown-search-input"
placeholder="Search..."
/>
<div class="form-icon-box">
<i
class="fa fa-search form-icon form-icon-search form-icon-grey"
aria-hidden="true"
></i>
</div>
</div>
</div>
</div>
<div class="dropdown-body">
<div class="dropdown-search-not-found-wrapper">
<h6 class="dropdown-header">No matching users</h6>
</div>
<div class="dropdown-group">
<div class="dropdown-row dropdown-row-header">
<h6 class="dropdown-header">
<div class="custom-control custom-checkbox custom-control-right">
<input type="checkbox" class="custom-control-input check-all" id="custom-check-1">
<label class="custom-control-label section-title" for="custom-check-1">
Leasing Agents 1
</label>
</div>
</h6>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-first-section"
class="custom-control-input"
id="custom-check-2"
value="arthur-anydonuts"
data-text="Arthur Anydonuts"
>
<label class="custom-control-label" for="custom-check-2">
Arthur Anydonuts
</label>
</div>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-first-section"
class="custom-control-input"
id="custom-check-3"
value="lars-ofthemohicans"
data-text="Lars Ofthemohicans (Disabled)"
disabled
>
<label class="custom-control-label" for="custom-check-3">
Lars Ofthemohicans (Disabled)
</label>
</div>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-first-section"
class="custom-control-input"
id="custom-check-4"
value="oswald-hatendswald"
data-text="Oswald Thatendswald"
>
<label class="custom-control-label" for="custom-check-4">
Oswald Thatendswald
</label>
</div>
</div>
</div>
</div>
<div class="dropdown-group">
<div class="dropdown-row dropdown-row-header">
<h6 class="dropdown-header">
<div class="custom-control custom-checkbox custom-control-right">
<input type="checkbox" class="custom-control-input check-all" id="custom-check-5">
<label class="custom-control-label section-title" for="custom-check-5">
Regional Managers
</label>
</div>
</h6>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-second-section"
class="custom-control-input"
id="custom-check-6"
value="colin-themarines"
data-text="Colin Themarines"
>
<label class="custom-control-label" for="custom-check-6">
Colin Themarines
</label>
</div>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-second-section"
class="custom-control-input"
id="custom-check-7"
value="faye-knews"
data-text="Faye Knews"
>
<label class="custom-control-label" for="custom-check-7">
Faye Knews
</label>
</div>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<div class="custom-control custom-checkbox custom-control-right">
<input
type="checkbox"
name="form-style-second-section"
class="custom-control-input"
id="custom-check-8"
value="wes-fillingmoretaste"
data-text="Wes Fillingmoretaste"
>
<label class="custom-control-label" for="custom-check-8">
Wes Fillingmoretaste
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Useful for selecting emails, tagging, or giving the sense that you're attaching items. Optionally supports grouped items.
<div class="raul-dropdown-select dropdown-multiple dropdown-multiple-type-ahead">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Email recipients...</span>
<i class="fa fa-plus dropdown-chips-plus-icon" aria-hidden="true"></i>
</div>
<div class="dropdown-chips">
<i class="fa fa-plus dropdown-chips-plus-icon" aria-hidden="true"></i>
<input
type="search"
class="dropdown-search-input"
>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-search-not-found-wrapper">
<h6 class="dropdown-header">No renters found</h6>
</div>
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Bob Fourapples (bob@realpage.com)</span>
<input
type="checkbox"
name="form-style-second-section"
value="bob@realpage.com"
data-text="Bob Fourapples"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Ima E. Mail (ima@realpage.com)</span>
<input
type="checkbox"
name="type-ahead-first-section"
value="ima@realpage.com"
data-text="Ima E. Mail"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Thor Throat (thor@realpage.com)</span>
<input
type="checkbox"
name="type-ahead-first-section"
value="thor@realpage.com"
data-text="Thor Throat"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item" data-option-value="Example 5">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Vern Babyvern (vern@realpage.com)</span>
<input
type="checkbox"
name="type-ahead-first-section"
value="vern@realpage.com"
data-text="Vern Babyvern"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item" data-option-value="Example 6">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Wendy Dew-Gethere (wendy@realpage.com)</span>
<input
type="checkbox"
name="type-ahead-first-section"
value="wendy@realpage.com"
data-text="Wendy Dew-Gethere"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-checkbox-wrapper">
<span class="raul-form-input-text">Woodrow Butnopaddle (woody@realpage.com)</span>
<input
type="checkbox"
name="type-ahead-first-section"
value="woody@realpage.com"
data-text="Woodrow Butnopaddle"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
In very simple cases you can substitute a <select>, however dropdowns
provide better cross-browser support if your items include markup instead of simple text.
Dropdowns also support groups and include an automatic type-ahead search when the
dropdown has 5+ items, making longer lists much more accessible for the power user.
<ui-dropdown-select
dropdown-title="Colors"
name="colors"
>
<ui-dropdown-select-item
item-title="Red"
item-value="red"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Orange"
item-value="orange"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Yellow"
item-value="yellow"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Green"
item-value="green"
></ui-dropdown-select-item>
</ui-dropdown-select>
<ui-dropdown-select
dropdown-title="Select a pet"
name="pets"
>
<ui-dropdown-select-item
item-title="Cat"
item-value="cat"
checked
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Dog"
item-value="dog"
disabled
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Hamster"
item-value="hamster"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Goldfish"
item-value="goldfish"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Pigeon"
item-value="pigeon"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Turtle"
item-value="turtle"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Iguana"
item-value="iguana"
></ui-dropdown-select-item>
</ui-dropdown-select>
<ui-dropdown-select
dropdown-title="Food"
name="food"
grouped
>
<ui-dropdown-select-group group-title="Fruits">
<ui-dropdown-select-item
item-title="Apple"
item-value="apple"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Strawberry"
item-value="strawberry"
></ui-dropdown-select-item>
</ui-dropdown-select-group>
<ui-dropdown-select-group group-title="Vegetables">
<ui-dropdown-select-item
item-title="Onion"
item-value="onion"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Beans"
item-value="beans"
></ui-dropdown-select-item>
</ui-dropdown-select-group>
</ui-dropdown-select>
<ui-dropdown-select
dropdown-title="Colors"
name="colors" no-border
>
<ui-dropdown-select-item
item-title="Red"
item-value="red"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Orange"
item-value="orange"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Yellow"
item-value="yellow"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Green"
item-value="green"
></ui-dropdown-select-item>
</ui-dropdown-select>
<ui-dropdown-select
dropdown-title="Colors"
name="colors" no-border small-size
>
<ui-dropdown-select-item
item-title="Red"
item-value="red"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Orange"
item-value="orange"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Yellow"
item-value="yellow"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Green"
item-value="green"
></ui-dropdown-select-item>
</ui-dropdown-select>
The standard <select multiple> performs notoriously poorly in user
experience testing. RAUL includes two alternatives: a checkbox version and a
typeahead version. Grouping can be added to/removed from either multiselect as needed.
Useful when there's not enough space for checkboxes, when you need type-ahead or selecting groups is important.
<ui-dropdown-select
dropdown-title="Food"
name="food"
type="multiple"
grouped
>
<ui-dropdown-select-group group-title="Fruits">
<ui-dropdown-select-item
item-title="Apple"
item-value="apple"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Strawberry"
item-value="strawberry"
></ui-dropdown-select-item>
</ui-dropdown-select-group>
<ui-dropdown-select-group group-title="Vegetables">
<ui-dropdown-select-item
item-title="Onion"
item-value="onion"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Beans"
item-value="beans"
></ui-dropdown-select-item>
</ui-dropdown-select-group>
</ui-dropdown-select>
Useful for selecting emails, tagging, or giving the sense that you're attaching items. Optionally supports grouped items.
<ui-dropdown-select
dropdown-title="Select a color"
name="colors"
type="type-ahead"
>
<ui-dropdown-select-item
item-title="Red"
item-value="red"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Orange"
item-value="orange"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Yellow"
item-value="yellow"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Green"
item-value="green"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="Blue"
item-value="blue"
></ui-dropdown-select-item>
<ui-dropdown-select-item
item-title="White"
item-value="white"
></ui-dropdown-select-item>
</ui-dropdown-select>
| Custom element | Attribute | Value type | Default Value | Description |
|---|---|---|---|---|
ui-dropdown-select
|
dropdown-title
|
String
|
None | Sets dropdown's title text. This attribute is required! |
name
|
String
|
None |
Sets each dropdown item name attribute. This attribute is required!
|
|
type
|
String
|
None |
Sets the type of the dropdown. Available values are
multiple or type-ahead.
|
|
grouped
|
Boolean
|
This option is valueless | Allows grouping by sections. | |
no-border
|
Boolean
|
This option is valueless | Removes dropdown's border. | |
small-size
|
Boolean
|
This option is valueless | Changes dropdown's size to small. | |
search-text
|
String
|
"Search..."
|
Sets search field placeholder text. | |
search-failed-text
|
String
|
"No items found"
|
Sets failed search message. | |
ui-dropdown-select-group
|
group-title
|
String
|
None | Sets dropdown's group title text. This attribute is required! |
group-id
|
String
|
Internally generated |
Sets the id attribute for the group title
input if dropdown type is multiple.
|
|
ui-dropdown-select-item
|
item-title
|
String
|
None | Sets dropdown's item title text. This attribute is required! |
item-value
|
String
|
None |
Sets dropdown's item value attribute.
|
|
item-id
|
String
|
Internally generated |
Sets the id attribute.
|
|
disabled
|
Boolean
|
This option is valueless | Disables the item. | |
checked
|
Boolean
|
This option is valueless | Checks the item. |