Skip to main content

Employee Picker (Teams)

Enables one or multiple employees to be selected, usually to be associated with something else (e.g. a rota, a team).

The employee picker (teams) is usually displayed in a modal.

Structure​

  • Search-by select Toggles the mode of the search box, between searching by employee name or team
  • Search box Filters the list of employees by their name or team
  • Clear filter link Clears the text our of the search box, if text is entered there
  • Select all/deselect all links Selects or deselects all the employees listed in the picker
  • Selected accordion Contain a count showing how many employees are selected and - when expanded - all the employees currently selected
  • Team accordions An accordion for each team, showing how many employees are selected within that team. When expanded, shows all the employees in that team
  • Select team/deselect team links Selects or deselects all the employees in that team
  • User card A card for each employee showing their name, and optionally any error/warning text, with an icon in the top right corner indicating either selection or warning states.

Employee picker

Guidelines​

When to use​

  • Use whenever you need the user to be able to select multiple employees, especially if selecting teams of people is likely to be useful.

When not to use​

  • If the user only needs to select one employee, use the typeahead component
  • If space is restricted consider the Employee picker (Simple) instead.

Defaults​

If employees are already associated (for example, when editing a team), all the employees that are currently associated must be down as selected. Otherwise, no employees should be selected.

Accessibility​

It must be possible to tab into the employee picker and then through all the controls and employees in a sensible order, using the keyboard to select/deselect.