Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.

Usage notes

General notes

• Combobox uses .spectrum-PickerButton instead of a .spectrum-Picker
• The following classes must be added:
  • .spectrum-Combobox-textfield is required on the Textfield outer element (.spectrum-Textfield)
  • .spectrum-Combobox-input is required on the <input> element inside of Textfields (.spectrum-Textfield-input)
  • .spectrum-Combobox-button is required on the FieldButton (.spectrum-ActionButton spectrum-ActionButton--sizeM)

Indicating validity and focus

Validity and focus must be bubbled up to the parent so descendants siblings can be styled. Implementations should add the following classes to the .spectrum-Combobox parent class in the following situations:

• .is-focused
  • when the input or button is focused with the mouse
• .is-keyboardFocused
  • when the input or button is focused with the keyboard
• .is-valid
  • when the input has an explicit valid state
• .is-invalid
  • when the input has an explicit invalid state
• .is-disabled
  • when the control is disabled; should also add to the .spectrum-Combobox-textfield and include a [disabled] attribute to the .spectrum-Combobox-button
• .is-loading
  • when the progress circle is being shown

Don't use placeholder text

Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible. Once a value is entered, placeholder text is no longer viewable; if someone is using an automatic form filler, they will never get the information in the placeholder text.

Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. If there's placeholder text and help text at the same time, it becomes redundant and distracting, especially if they're communicating the same thing.