People Picker

Plain CSS implementation of the Figma Share+multi selection section, node 3080:8020.

Field States

Selections

Ana Silva

Ana Silva Andre Souza Alice Rocha

The CSS describes the visual structure. Filtering, keyboard selection, and remote data loading stay with the consuming application.

CSS API

Use .sui-people-picker for the composition, .sui-people-picker--open for the suggestion menu, and .sui-people-picker__tag for selected people.

<div class="sui-people-picker sui-people-picker--selected">
  <div class="sui-people-picker__field">
    <input class="sui-people-picker__control" aria-label="Search people">
  </div>
  <div class="sui-people-picker__selection" aria-label="Selected people">
    <span class="sui-people-picker__tag">...</span>
  </div>
</div>