Combo

    Use the Combo Component to let the user select one or more items from a collection that is displayed upon user interaction in a scrollable list. In case you want to costrain the selection to a single item only, you should use the Dropdown instead. The Combo is visually identical to the Ignite UI for Angular Combo Component

    Combo Demo

    The Combo has two pieces: an input containing the current selection and a dropdown that is shown in order to select one or more items.

    Input Type

    The Combo input provides selection between a line type for a more airy style, border type for a more structured perception on solid color backgrounds, and a boxed type that is most appropriate when placed on top of a vivid image to improve readability.

    line

    border

    box

    Interaction State

    Each of the three Combo input types can be inserted in an enabled or disabled state.

    State

    When the user interacts with the Combo, its input goes through various selection states: idle with a placeholder in the place of the content, focused when the dropdown is open, filled once the user has finished with selection and moved on. These flexibility enhancements afford a more dynamic interaction design that can seamlessly flow into high-fidelity prototyping.

    idle

    focused

    filled

    Every experienced designer uses constraints wisely to limit the user input and avoid invalid states, hence the availability of validation styles. Through the available validation styles, the Combo is consistent with the standard Input and equipped for sophisticated designs that display success, warning, and error visuals.

    In Sketch, the states and validation states are achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between them.

    Note

    The Combo input has only one layout option, but this override has been preserved in Sketch to ensure consistency with the standard Input.

    The dropdown used for the Combo comes with the appropriate sizing for desktop and mobile use similarly to the normal Dropdown component.

    The dropdown contains a Search Input that comes with a selection of states and options for layout akin to the standard Input.

    The dropdown used for the Combo supports two types of items: header and multi-select item. Through headers, it is possible to organize items in groups. In Sketch, the dropdown uses a smart layout allowing it to adjust accordingly when one or more of its items are set to ~No Symbol. In Adobe XD you should delete the unnecessary ones, and the layout will adjust through the use of a Stack.

    The dropdown items within the Combo support five different states: disabled, idle, focused, selected and selected&focused.

    Styling

    The Combo comes with the combined styling flexibility of its input and dropdown pieces. There are options for the input text elements' color and bottom line style and color. For the dropdown one may change the background color, or use the various options related to the items in the Combo dropdown, such as the search input and the items with their background and text colors.

    Usage

    When using the Combo, its input and dropdown should have the same width and their left and right borders should match. Regarding how the dropdown is shown when the Combo is focused, you should always show it on top of the content that follows the Combo triggering its display. Combos don't push content like expansion panels do.

    Do Don't

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.