Sorting allows users to quickly re-organize similar content on a long list when the default order may be insufficient for users to scan the data set.


Loading story...
Add to Pajamas UI kit. Create an issue


Add structure image. Create an issue


When to use

  • Use the sorting component when the list has pagination and spans multiple pages, as it can make it easier for users to digest and find relevant content.
  • A user's sort selections are meant to be persisted. If they make a sort selection and then leave the page, when they return to the page, their previous sort selections will be preserved.
  • Sorting can occur in tables and in lists. While sorting in lists relies on the sorting component described on this page, sorting within a table happens in the table header. See table sorting guidelines.

When not to use

  • When using the sorting component, make sure the list in the dropdown doesn't contain more than 10 items, otherwise it will create usability problems. See combobox guidelines.
  • If a list is static, easy to search/scan, or where the data set won't grow, the sorting component is unnecessary.


  • The sorting component is comprised of two parts: a dropdown, and a sort direction icon button.


  • The dropdown allows users to choose their sorting criteria, whether it be by label, date, or popularity.
  • As soon as an item in the dropdown is selected, the list content re-sorts automatically.
  • The sort dropdown allows for sorting by a single selected item.
  • The sort direction icon button allows users to change the direction of the sort, from ascending to descending or vice-versa.
  • Avoid using invisible attributes for sorting because it lacks visual reinforcement of the user's action, which can be confusing.
  • The default sort order on a list is determined by the designer on a page-by-page basis.


Add accessibility guidelines. Create an issue

Last updated at: