SOROUSH.DESIGN
Design SystemMarkdownStyled System

TransferList

Two lists, and the buttons that move the checked items from one to the other.

Source

Accessibility

  • The group is a role="group". Each list is a role="list" named by its title, each row a role="listitem" whose checkbox is named by its label (aria-labelledby).
  • Name every button: moveRightLabel, moveLeftLabel and, with shouldShowMoveAll, the two move-all labels - an icon alone says nothing.
  • The header checkbox is named by its list's title.
  • Right to left, the lists swap sides and the chevrons turn around.