You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs

Select

Data Options

Single Select

Multiselect

Selects can also allow for multiple selections. Each option in a multiselect has a built-in Checkbox as a visual aid.

Grouped Options

Options in a Select can be grouped together.

Customized Options

The choices in the Select can be customized to produce many unique stylings. This can be useful when additional information can enhance the functionality of the Select.

Secondary Actions

A secondary action can be performed on individual options. Example actions include editing, deleting, or navigating to more information. Secondary actions are only visible on hover.

Empty State

Displayed when there are no options available, typically discovered when searching a Select.

Trigger

Select Addons

Select Addons can be added to help describe the content. They can be used to help with formatting or show contextual indicators of the content we’re asking for.

With Description

Error State

Trigger Sizes

The Select's trigger can be configured into three sizes

Tags

Tag display on selection

In multiselects, tags are populated in the trigger for each selection. This allows for a quick readout of selections, but this can quickly get out of hand. By default, the Select will display an X Selected when the selections span across more than 1 row, which can be configured for specific needs.

Custom Tags

Multiselects can take advantage of tag's custom color options.

Label

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

Required and Optional

A visual indicator can be applied on a Select's label.

Custom Content

The content of the trigger can be customized.

Clearable


Options within a select can be filtered through a search functionality. Search is useful with 10+ options available. The more options there are, the more desirable search functionality becomes. Search is also useful when the user knows what they are looking for (such as a specific person).

Select All

In multiselects, all options can be selected at once. There is also an option to select all items from within a single group of content.

Apply Selections

The Select allows for an option to delay applying selections until an explicit apply action is given by a user. This can be useful when selections update content on a page, where refreshing the page after each selection is unnecessary.

The Select also can accept a custom footer. This can be useful when you need more control over footer look and behavior.

Body Options

Scrollable

Like the Popover, the Select's body content can be scrolled through. By default, it begins scrolling after it has reached 90% screen height, but can be customized to a specific pixel value.

Popover Sizing

By default, the Select's trigger and its popover are the same width. The popover part of the Select can also be a custom width, which can be useful when there is little real estate for the trigger.

Drill-in State

A select has a secondary, drilled-in state that can be accessed through a Select. Like the Popover component, this content can be customized into any format.

Tree View

The Select builds off the Option List's tree view. This is useful for displaying hierarchical information.

Selection Logic

A Select's tree selection process can be customized to suit different needs. This logic is best shown on the Option List's tree selection logic section. Any option there can be applied inside of a Select.

Use Cases

Sorting Options

The Select does not give an opinion on how choices are sorted. Common types of sorting include alphabetical, time-based, and categorical. Groups can also help in sorting information. The sort type should match up to what a user expects

When to use a Select

  • There are at least 5 choices.

  • There is a default, recommended option.

  • Space is at a premium in the interface.

  • When search functionality is useful to narrow options.

When not to use a Select

  • For navigation. Use an action menu for similar behavior to a Select.

  • For commands or actions. Use an action menu in its place.

Caution in using a Select

It is easy to overuse the Select, as it can be used to hide complexity on the page. Discoverability of choices can be obscured when hidden via a Select.

  • For less than 5 options, and screen space is not constrained. Checkboxes for multi-select or Radios for single select may be better.

  • For more than 30 options. Search is highly encouraged for many options. There is not a definitive component for hundreds of choices: a table (data list, Kendo), a Modal, a complex Popover, or a Drawer.

  • When a user benefits from scanning the options, visible Checkbox or Radios on the page allows for more emphasis.

Components

  • To build a full form, use the Form component.

  • For less than 5 options, a Radio or Checkbox list surfaces options faster.

Patterns

  • Form design pattern for how related controls are ordered.