Search Select A selection element converted to a searchable/filtered list

Table of contents


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>
AttributeTypeDescription
thresholdnumberSet minimum number of options required to build search UI
disabledbooleanSet initial state to disabled
requiredbooleanSet required state
errorstringSet error state along with message
infostringSet info state along with message

API

NameTypeDataDescription
thresholdpropertynumberMinimum number of options required to build search UI
disabledpropertybooleanGet/set disabled state
errorpropertystringGet/set error state (pass string to set message)
infopropertystringGet/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 options
Supported optional DOM

If added as children, these elements will receive specific styles and/or functionality.

  • <label> - Select label

History

VersionNote
0.22.0Initial build