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

Semantic Select

A Select should be used for choices that have more than 5 options. The list interface allows users to select from a large set of options without initially feeling choice paralysis. Dropdowns can bet set to have an initial recommended value without the user needing to see all available options.

States

Selects can have a placeholder, a required state, an error state, and a disabled state. You can use any combination of those states for the experience.

Sizes

Multiselect

For dropdowns that can have multiple selections we allow the selected options to appear as tags in the field. Like normal Selects, Multiselect elements can be searchable and group the dropdown items into categories. Categories are listed alphabetically.

Custom Content

Dropdowns can also take advantage of other Anvil components. Icons, badges, and avatars help provide context to particular situations.

Remote Dropdown

For dropdowns that have to fetch options from a remote server, we allow passing of a callback which takes over the default search functionality and should return a promise of options.

Clearable


Best Practices

The select component should:

  • Be used for lists of five or more items
  • List items within the menu alphabetically or some other logical order so users can easily find the selection they need
  • Provide a label to clearly identify the content being presented in the drop down menu
  • Have a default option selected, where possible

The list of options in a menu should:

  • Be concise but still give the user enough information so they can easily make a selection
  • Be arranged alphabetically or in some other clear logical order

The placeholder should:

  • The placeholder option with the text "Choose <Noun>" to direct the user what do with the UI element

  • To build a full form, use the Form component.
  • For less than 5 options, a Radio or Checkbox list surfaces options faster.

Importing

import { Select } from '@servicetitan/design-system';