Single select dropdown
<zui-select-dropdown>
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Single select dropdown with pre-selected option
<zui-select-dropdown placeholder="Choose a restaurant...">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee" selected>Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Multi-select dropdown
<zui-select-dropdown multiple>
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Multi-select dropdown with pre-selected options
<zui-select-dropdown placeholder="Choose your top 3 restaurants..." multiple>
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee" selected>Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa" selected>Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield" selected>Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Multi-select dropdown with truncation
<zui-select-dropdown multiple maximum-results-display-count="5" truncated-result-message-format="{0} more">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee" selected>Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee" selected>Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee" selected>Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee" selected>SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee" selected>Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa" selected>Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Select dropdown with placeholder
<zui-select-dropdown placeholder="Choose a restaurant...">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Searchable select dropdown
<zui-select-dropdown placeholder="Search and select 3 restaurants..." multiple searchable typeahead>
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Searchable select dropdown with 1000ms debounce
<zui-select-dropdown placeholder="Choose your top 3 restaurants..." multiple searchable debounce="1000">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Grouped select dropdown options
<zui-select-dropdown placeholder="Choose your top 3 restaurants...">
<zui-option-group label="Milwaukee">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
</zui-option-group>
<zui-option-group label="Wauwatosa">
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
</zui-option-group>
<zui-option-group label="Greenfield">
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
</zui-option-group>
<zui-option-group label="West Allis">
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-option-group>
</zui-select-dropdown>
Select dropdown options with icons
<zui-select-dropdown placeholder="Choose your top 3 restaurants..." multiple>
<zui-option-group label="Milwaukee">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">
<zui-icon icon="zui-building"></zui-icon>Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">
<zui-icon icon="zui-wrench"></zui-icon>SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
</zui-option-group>
<zui-option-group label="Wauwatosa">
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">
<zui-icon icon="zui-rocket"></zui-icon>Rocket Baby Bakery
</zui-option>
</zui-option-group>
<zui-option-group label="Greenfield">
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
</zui-option-group>
<zui-option-group label="West Allis">
<zui-option value="6746 West Greenfield Avenue, West Allis">
<zui-icon icon="zui-user"></zui-icon>Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-option-group>
</zui-select-dropdown>
Select dropdown with disabled options
<zui-select-dropdown placeholder="Choose your top 3 restaurants...">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee" disabled>Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee" disabled>Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa" disabled>Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield" disabled>Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Disabled select dropdown
<zui-select-dropdown placeholder="Choose your top 3 restaurants..." disabled></zui-select-dropdown>
Extra small select dropdown
<zui-select-dropdown class="xsmall">
<zui-option value="1">1</zui-option>
<zui-option value="2">2</zui-option>
<zui-option value="3">3</zui-option>
<zui-option value="4">4</zui-option>
</zui-select-dropdown>
Small select dropdown
<zui-select-dropdown class="small">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
</zui-select-dropdown>
Medium select dropdown
<zui-select-dropdown class="medium">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
<zui-option value="egg">Egg</zui-option>
</zui-select-dropdown>
Large select dropdown
<zui-select-dropdown class="large">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
<zui-option value="egg">Egg</zui-option>
</zui-select-dropdown>
Valid select dropdown
<zui-select-dropdown class="is-valid">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit" selected>Dragonfruit</zui-option>
<zui-option value="egg">Egg</zui-option>
</zui-select-dropdown>
Invalid select dropdown
<zui-select-dropdown class="is-invalid">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
<zui-option value="egg" selected>Egg</zui-option>
</zui-select-dropdown>
Required select dropdown
<zui-select-dropdown placeholder="Please choose at least 1 fruit" multiple required>
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
<zui-option value="egg">Egg</zui-option>
</zui-select-dropdown>
Multi-select dropdown with select all option
<zui-select-dropdown multiple enable-select-all select-all-option-label="Select all">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Multi-select dropdown with select all option that overrides all other selected values
<zui-select-dropdown multiple enable-select-all select-all-option-label="Select all" enable-select-all-override select-all-option-value="<ALL>" select-all-result-label="All selected">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee">Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee">Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee">Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee">SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee">Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa">Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Multi-select dropdown with select all option and truncation
<zui-select-dropdown multiple enable-select-all select-all-option-label="Select all" maximum-results-display-count="5" truncated-result-message-format="{0} more">
<zui-option value="2301 West Wisconsin Avenue, Milwaukee" selected>Ambassador Inn
</zui-option>
<zui-option value="1872 North Commerce Street, Milwaukee" selected>Lakefront Brewery
</zui-option>
<zui-option value="600 East Ogden Avenue, Milwaukee" selected>Chipotle Mexican Grill
</zui-option>
<zui-option value="779 North Front Street, Milwaukee" selected>SafeHouse
</zui-option>
<zui-option value="2643 South Kinnickinnic Avenue, Milwaukee" selected>Honeypie
</zui-option>
<zui-option value="2500 North Mayfair Road #712, Wauwatosa" selected>Rocky Rococo Pizza and Pasta
</zui-option>
<zui-option value="2500 North Mayfair Road # M129, Wauwatosa">Chinese Gourmet Express
</zui-option>
<zui-option value="7677 West State Street, Wauwatosa">Cafe Hollander - Tosa
</zui-option>
<zui-option value="2500 North Mayfair Road, Wauwatosa">Maggiano's Little Italy
</zui-option>
<zui-option value="6822 West North Avenue, Wauwatosa">Rocket Baby Bakery
</zui-option>
<zui-option value="4645 South 76th Street, Greenfield">Red Lobster
</zui-option>
<zui-option value="4760 South 76th Street, Greenfield">Olive Garden Italian Restaurant
</zui-option>
<zui-option value="6746 West Greenfield Avenue, West Allis">Burger King
</zui-option>
<zui-option value="2900 South 108th Street, West Allis">Krispy Kreme
</zui-option>
</zui-select-dropdown>
Select dropdown custom styles with shadow part
<style>
.my-zui-select-dropdown::part(control) {
transition: border 1000ms ease-in-out, box-shadow 1000ms ease-in-out;
}
</style>
<zui-select-dropdown class="my-zui-select-dropdown">
<zui-option value="apple">Apple</zui-option>
<zui-option value="banana">Banana</zui-option>
<zui-option value="cherry">Cherry</zui-option>
<zui-option value="dragonfruit">Dragonfruit</zui-option>
<zui-option value="egg" selected>Egg</zui-option>
</zui-select-dropdown>
Usage
A form control used when there are more than 2 options and may require a user to select more than 1 option.
Anatomy
The anatomy of a dropdown multi-select.
- Select: The form field where the user can select one or more options from a list
- Selection tag: Once an option is chosen, it becomes a selection. Selections are visually defined by the encapsulation of the text in a gray rectangle
- Chevron: The chevron icon indicates there are options available in a dropdown list
- Option list: The grouping of related input options
- Option: A unique input option
- Option checkbox: A selectable checkbox beside an option
- Scrollbar: A bar used to scroll to view more options
See the Design specs for detailed sizing and spacing information
Types
Grouping
- Grouping options with proper group labels can help users scan the list more easily.
Icons
- Use icons to distinguish between options.
States
Select states
Dropdown multi-selects can display the following states: unselected, hover, focus, active, and disabled.
Option states
Within Dropdown multi-select option lists, options can display the following states: selected, hover, and disabled.
Behavior
Sort the option list in a logical order. For instance, alphabetize or put the most selected option(s) at the top.
Open / close
- Normal behavior is to reveal the option list below the select box when there is sufficient space within the viewport to display it entirely. When lower in the viewport, the option list should reveal above the select box.
- Chevron behavior: When the option list is opened, the chevron rotates 180 degrees clockwise. When the option list is closed, the chevron spins back 180 degrees counter clockwise, returning to its original position.
- The option list will close automatically after making a selection or when the user clicks outside of the Dropdown multi-select component.
Scrolling
- If all options can be displayed within the viewport, it is ideal to not have a scroll bar. Scroll bars should appear when option lists exceed the height of the screen, but should not be taller than 300px.
- Note: option lists will appear below or above the select boxes depending on where they sit within the viewport. (See Open / close)
Typeahead
- Present in all dropdown selects, streamlines experience for users.
- Typeahead is relevant only to options in the list; it will not return group labels. Group labels are not seen when using typeahead.
Defaulting a selection
- A Dropdown multi-select shouldn't default a selected option. Defaulting a selection only makes sense after a user's selection has been saved and they revisit to update their choice.
- Sometimes choosing "None" as an option is necessary if no options are applicable to the user when a Dropdown multi-select is required. "None" should appear at the top of the list.
Selection wrapping and truncation
- When options are selected from the option list, they will populate inside the select form field as select tags. Multiple select tags should wrap within the select form field to fit all.
In extreme circumstances, truncation can be used to prevent the select box from continually expanding.
- We recommend displaying a maximum of 5 selection tags, and a sixth that summarizes how many other options are selected (e.g., "and 10 more").
- The truncated selection tag must not have the ability to be deselected (in other words, no X icon).
Removing the selection
After a user has chosen an option it appears as a selection within the select box. Users can remove a selection by using one of three methods:
- Selections can be removed by clicking on the X icon within the selection.
- Backspacing over a selection in the select box removes it.
- Deselecting the checkbox within the option list will also remove the selection.
Select all
In some situations, a "Select all" option is desirable (e.g., "Select all accounts" when sending an email or "Select all states" when managing preferences). There are some alternate behaviors to consider; choose what is most appropriate for your use case:
Select all to choose every option present in the UI:
- If the Dropdown multi-select has a finite list (e.g., 50 states), the "Select all" option can simply select everything, so that the user sees an individual selection tag for each in the select box.
- A user can deselect options as normal. The "Select all" option is checked in the "Option list" as long as all other options are selected.
- For example: a user is presented with a Dropdown multi-select for 50 states. They choose to "Select all" and 50 selection tags are then displayed in the select box.
Select all to choose every option present in a data store (e.g., many accounts):
- If the Dropdown multi-select is backed by an API to yield an unknown and potentially large quantity of options, the "Select all" option may need to be optimized to handle this load. In this situation, "Select all" may need to be preserved as a magic value, to be interpreted by the application in more robust ways.
- A user cannot deselect individual selections after they have chosen the "Select all" option. They must explicitly deselect "Select all", which will require them to select the individual options they want.
- For example: a user is presented with a UI to send an email to their clients. They choose "Select all" as recipients. An "All selected" selection tag is displayed in the select box.
Responsiveness
Users on mobile and touch devices should have a larger touchpoint than desktop users. The touch target increases from 36px to 42px for users on mobile or touch devices.
For more information about mobile and touch device breakpoints, see the breakpoints table.
Best practices
Labeling
Required fields
Validation
Alternate considerations
- Use checkboxes for lists smaller than 3 items.
- Use a dropdown select if users can only select 1 option.
- Use a multi-picker when the user needs to search for specific items and select them from a list with more than 7 – 10 items.