Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

People Picker

People Picker is a lightweight vanilla renderer for local people lists. It covers search, suggestions, keyboard selection, selected tags, and removal without owning remote directory lookup.

Playground

The example below is initialized by SeventhUI.init(document) using per-instance options from the docs script.

Selection Examples

Use multiple selection for sharing flows or single selection when a field must resolve to one person.

Scope

This controller is intentionally small. Keep server lookup and invite workflows in the consuming application.

Included Out of scope
Local data rendering, keyword filter, keyboard navigation, multiple or single selection, selected tags, removal, ARIA state, and runtime events. Remote search orchestration, async loading states, avatar images, grouped results, virtualization, free-form invite creation, and server validation.

Hooks

Generated controls expose hooks for behavior and testing. Styling remains owned by @seventh-ui/css.

Hook Purpose
data-sui-people-picker Root initialized by the component registry.
data-sui-people-picker-search Generated combobox input used for filtering and keyboard navigation.
data-sui-people-picker-option Generated suggestion option for selecting a person.
data-sui-people-picker-remove Generated selected-tag action for removing a person.

Events

Events bubble from the People Picker root and include the controller, current state, selected people, visible suggestions, source event, and active person metadata.

sui:people-picker:open
sui:people-picker:close
sui:people-picker:filter
sui:people-picker:select
sui:people-picker:remove
sui:people-picker:change
sui:people-picker:render

Markup

Pass people data through JavaScript options. The runtime renders the DS field, menu, options, and selected tags.

<section id="share-people" data-sui-people-picker></section>
<script>
  SeventhUI.createPeoplePickerController(document.querySelector("#share-people"), {
    people: [
      { id: "ana", name: "Ana Silva", email: "ana.silva@example.com" },
      { id: "andre", name: "Andre Souza", email: "andre.souza@example.com" }
    ],
    selectedIds: ["ana"],
    placeholder: "Search people",
    maxResults: 6
  });
</script>