Search Select A selection element converted to a searchable/filtered list >res-select< examples Options count below threshold Select something One Two Three Four Five Six (Disabled) Searchable select, beyond threshold Select something Eater Eater (All) Eater Atlanta Eater Austin Eater Boston Eater Charleston Eater Chicago Eater DC Eater Dallas Eater Demo Eater Denver Eater Detroit Eater Field Guide Eater Houston Eater LA Eater London Eater Louisville Eater Maine Eater Miami Eater Montreal Eater NY Eighty Six Forever Engineering Field Guide Every Day Should Be Saturday Eyes On The Prize FMF State Of Mind FUT Nation Fake Blog Fake Teams Fantasy Hockey Scouts Fear The Fin Fear The Sword Fear The Wall Federal Baseball Field Guide Field Guide (All) Field Guide Network Field Gulls Fish Stripes Five For Howling Funny Or Die Funny Or Die (All) Funny Or Die Too Gals Guide To MMA Gang Green Nation Garnet And Black Attack Gaslamp Ball Global Futbol Gobbler Country Golden State Of Mind Good Bull Hunting Got The Battle Fever On Grizzly Bear Blues Growth and Development Field Guide HBCU Showtime Hail to the Orange Hall Of Canes High School Sports Zoom Hockey Wilderness Hogs Haven Hot Hot Hoops Hot Time In Old Town Hound Dog LPGA House of Sparky Hudson River Blue Hustle Belt Hymnal I Am The 12th Man IT Ice Cream Sandwich Import Test Blog In Lax We Trust In The Top One Indomitable City Soccer Indy Cornrows Inhistoric John Frieda | Your Hair Talks John Frieda | Your Hair Talks (All) John Frieda | Your Hair Talks | V2 Knights On Ice Knuckle Sandwich LAG Confidential Land-Grant Holy Land Let's Go Tribe Liberty Ballers Lighthouse Hockey Lion Of Vienna Suite Litter Box Cats Lone Star Ball Lookout Landing MKBHD MLB Bonus Baby MLB Daily Dish MMA Fighting MMA For Real MMA Nation MMAmania.com Maize n Brew Male Pattern Fitness Managing Madrid Massive Report Matchsticks and Gasoline Mavs Moneyball McCovey Chronicles Meridian Mid-Major Madness Mile High Hockey Mile High Report Miner Rush Minor League Ball Missing Toof Mobile Live Mocking The Draft Moneypixels Mount Royal Soccer Mountain West Connection Music City Miracles NASCAR Ranting and Raving NNS Racing NetsDaily Never Manage Alone Niners Nation Nucks Misconduct Off Tackle Empire Off the Bar and Out Orlando Pinstriped Post Our Daily Bears Outsports Over the Monster Pacific Takes Pats Pulpit Peachtree Hoops PensBurgh Pension Plan Puppets People and Culture Field Guide Pie Eaters Footie Polygon Polygon (All) Polygon Field Guide Polygon Guides Pop Off Valve Posting and Toasting Pounding The Rock Pride Of Detroit Product Field Guide Product Video Field Guide REVOLT RSL Soapbox Racked Racked (All) Racked Boston Racked Chicago Racked DC Racked Dallas Racked Field Guide Racked LA Racked Miami Racked NY Racked Philly Racked SF Racked Vegas Rakes Of Mallow Raptors HQ Raw Charge Recode Recode Field Guide Recruitocosm Red And Black Attack Red Cup Rebellion Red Reporter Required Elements Restrictor-Plate This Revenge of the Birds Ridiculous Upside Rule Of Tree Rumble In The Garden SB Nation SB Nation (All) SB Nation Arizona SB Nation Atlanta SB Nation Bay Area SB Nation Boston SB Nation Chicago SB Nation Cleveland SB Nation College Hockey SB Nation DC SB Nation Dallas SB Nation Denver SB Nation Detroit SB Nation Field Guide SB Nation Houston SB Nation Indiana SB Nation Kansas City SB Nation Los Angeles SB Nation Minnesota SB Nation New York SB Nation Philly SB Nation Pittsburgh SB Nation Seattle SB Nation St. Louis SB Nation Tampa Bay SB Nation Video Network SBN Community Corner SBN Demo Tape SLC Dunk SXSW test Sactown Royalty Sales Searching for Billy Edelin Second City Hockey Serpents of Madonnina Shakin The Southland Silver And Black Pride Stanley Cup of Chowder Star Tribune Stars and Stripes FC State of The U Straight Line Today Streaking The Lawn Stride Nation Studio-MMA Fighting Stumptown Footy Sunday Morning Quarterback Swish Appeal Talking Chop Tar Heel Blog Team Speed Kills Test Hub Testing Ground: Field Guide Testing Provider Testudo Times The AC Milan Offside The Bent Musket The Bird Writes The Blue Testament The Boxing Bulletin The Buckeye Battle Cry The Busby Babe The Flying Courier The Good Phight The Ice Garden The Jersey Doesn't Shrink The Liverpool Offside The Mane Land The McElroy Family The Offside Athletic Bilbao The Only Colors The Skip Shot The Slipper Still Fits The Smoking Musket The Tilehurst End The UConn Blog The Verge The Verge (All) The Verge Field Guide Three Lions Roar Through It All Together Tomahawk Nation Trailing Tiger Troy Nunes Is An Absolute Magician True Blue LA Turf Show Times Twice a Cosmo Twinkie Town UW Dawg Pound Uncommon Sportsman Underdog Dynasty Unranked America East VRGE VU Hoops Vanquish The Foe Verge Science Video Blog Vox Creative Vox Entertainment Vox Field Guide Vox Media Vox Media (All) Vox Media Authentication Vox Media Company Blog Vox Media Employee Resource Groups Vox Media Marketing Vox Media QA Vox Media Storytelling Blog Vox Media Studio Blog Vox Product Blog Vox Studios Vox.com Waggle Room Wahoo Review Winging It In Motown World Soccer Digest vu hoops test Info message select, beyond threshold Select something One Two Three Four Five Six (Disabled) Error message, beyond threshold Select something One Two Three Four Five Six (Disabled) Disabled select, beyond threshold Select something One Two Three Four Five Six (Disabled) Seven (Disabled) Eight (Disabled) Usage guidelines When to use Use a search select when one option can be selected from a long list of items. Ideally, for lists greater than 7, however, this threshold can be changed. Use the Select component for lists below 7 items or the specified threshold. How to use Search select should always include a label. Search selects may optionally include placeholder text, but this does not replace the label. Add placeholder text by including an option that has a placeholder
attribute. A placeholder option is useful for when you want the selection of any option to be opt-in. Without a placeholder option, the first option in the list will be selected by default. Use sentence case for both the label and the placeholder text. Always be sure to include error handling: Use the info attribute for warnings or tips specific to the content in the select. Use the error attribute for invalid entries. Accessibility Placeholder text isn’t always visible and may be inaccessible on screen readers. It should contain only additional, optional information that reinforces the label rather than replaces it. Keyboard navigation is supported in the searchable list. Native select element support is carried over to Resonance selects when the set of options are below the threshold. Content Guidelines When including placeholder text, follow the pattern of the label and include an article (e.g., a, an). Don’t use Select one as a catchall. Example for category:Select label: Category Placeholder text: Select a category Attributes An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>
Attribute Type Description threshold
number Set minimum number of options required to build search UI disabled
boolean Set initial state to disabled required
boolean Set required state error
string Set error state along with message info
string Set info state along with message
API Name Type Data Description threshold
property number Minimum number of options required to build search UI disabled
property boolean Get/set disabled state error
property string Get/set error state (pass string to set message) info
property string Get/set info state (pass string to set message)
Notes Depends on: Required DOM Without these, the component will throw an error on render.
<option>
- Select optionsSupported optional DOM If added as children, these elements will receive specific styles and/or functionality.
History Version Note 0.22.0 Initial build