People picker

Choose members by circle and by person.

Members and circles

Choose circles or individual people. Clear keeps Di Ng selected. These examples reset when you reload.

<fieldset class="people-picker" id="members-picker">
  <legend>Members</legend>
  <div class="people-picker-groups cluster gap-025" role="group" aria-label="Circles">
    <button type="submit" class="button button--small" name="picker_action"
            value="circle:board" aria-pressed="true" formnovalidate>Board</button>
  </div>
  <table class="people-picker-table table--lined">
    <thead><tr>
      <th scope="col"><span class="visually-hidden">Select</span></th>
      <th scope="col">Member</th>
      <th scope="col">Organizer</th>
    </tr></thead>
    <tbody>
      <tr>
        <td class="people-picker-select">
          <label class="checkbox checkbox--icon">
            <input type="checkbox" id="pick-ada" name="member_ids" value="ada"
                   aria-describedby="pick-ada-detail" checked aria-labelledby="pick-ada-label">
            <span class="visually-hidden" id="pick-ada-label">Select Ada Okafor</span>
          </label>
        </td>
        <td>
          <label class="people-picker-person flex gap-05 min-w-0" for="pick-ada">
            <span class="avatar avatar--sm"><span class="initials" aria-hidden="true">A</span></span>
            <span class="people-picker-name">Ada Okafor
              <span class="people-picker-detail" id="pick-ada-detail">Organizer, Board</span>
            </span>
          </label>
        </td>
        <td class="people-picker-trailing" data-th="Organizer">
          <label class="switch switch--small">
            <input type="checkbox" role="switch" name="organizer_ids" value="ada"
                   aria-label="Make Ada Okafor an organizer" checked>
            <span></span>
          </label>
        </td>
      </tr>
    </tbody>
  </table>
  <p class="people-picker-status visually-hidden" role="status" aria-atomic="true"></p>
  <div class="people-picker-actions cluster cluster-compact">
    <button type="submit" class="button button--small button--ghost"
            name="picker_action" value="clear" formnovalidate>Clear selection</button>
  </div>
</fieldset>

Members

The Members circle is unavailable because it has too many people to list here.

Select	Member	Organizer
Select Ada Okafor	Ada OkaforOrganizer, Board
Select Bo Lindqvist	Bo LindqvistBoard
Select Cy Moreno	Cy MorenoRemoved
Select Di Ng	Di NgSuper admin
Select Ed Sato	Ed Sato

Circles and organizers, without details

Keep the circle toggles and organizer switches, with just a name and avatar in each row.

Code

<fieldset class="people-picker" id="members-picker">
  <legend>Members</legend>
  <div class="people-picker-groups cluster gap-025" role="group" aria-label="Circles">
    <button type="submit" class="button button--small" name="picker_action"
            value="circle:board" aria-pressed="true" formnovalidate>Board</button>
  </div>
  <table class="people-picker-table table--lined">
    <thead><tr>
      <th scope="col"><span class="visually-hidden">Select</span></th>
      <th scope="col">Member</th>
      <th scope="col">Organizer</th>
    </tr></thead>
    <tbody>
      <tr>
        <td class="people-picker-select">
          <label class="checkbox checkbox--icon">
            <input type="checkbox" id="plain-pick-ada" name="member_ids" value="ada"
                   checked aria-labelledby="plain-pick-ada-label">
            <span class="visually-hidden" id="plain-pick-ada-label">Select Ada Okafor</span>
          </label>
        </td>
        <td>
          <label class="people-picker-person flex gap-05 min-w-0" for="plain-pick-ada">
            <span class="avatar avatar--sm"><span class="initials" aria-hidden="true">A</span></span>
            <span class="people-picker-name">Ada Okafor</span>
          </label>
        </td>
        <td class="people-picker-trailing" data-th="Organizer">
          <label class="switch switch--small">
            <input type="checkbox" role="switch" name="organizer_ids" value="ada"
                   aria-label="Make Ada Okafor an organizer" checked>
            <span></span>
          </label>
        </td>
      </tr>
    </tbody>
  </table>
  <p class="people-picker-status visually-hidden" role="status" aria-atomic="true"></p>
  <div class="people-picker-actions cluster cluster-compact">
    <button type="submit" class="button button--small button--ghost"
            name="picker_action" value="clear" formnovalidate>Clear selection</button>
  </div>
</fieldset>

Members

The Members circle is unavailable because it has too many people to list here.

Select	Member	Organizer
Select Ada Okafor	Ada Okafor
Select Bo Lindqvist	Bo Lindqvist
Select Cy Moreno	Cy Moreno
Select Di Ng	Di Ng
Select Ed Sato	Ed Sato

Collaborators

Leave out groups, avatars and extra controls for a simple list.

Code

<fieldset class="people-picker">
  <legend>Draft collaborators</legend>
  <p class="people-picker-description">Collaborators can read, discuss and edit this draft.</p>
  <table class="people-picker-table table--lined">
    <!-- Selection and member columns, as above; omit the trailing column. -->
  </table>
</fieldset>

Draft collaborators

Collaborators can read, discuss and edit this draft.

Select	Member
Select Ada Okafor	Ada Okafor
Select Bo Lindqvist	Bo Lindqvist

Roles

Use the last column for a role field.

Code

<td class="people-picker-trailing" data-th="Role in this circle">
  <label class="visually-hidden" for="circle-ada-role">Role in this circle for Ada Okafor</label>
  <input type="text" id="circle-ada-role" name="role_ada" value="Chair" placeholder="Optional role">
</td>

Circle members

Select	Member	Role in this circle
Select Ada Okafor	Ada Okafor	Role in this circle for Ada Okafor

Narrow containers

Truncated rows center the controls. Turn truncation off to align them at the top.

Code

<!-- Optional, inside the person label. Keep the full text. -->
<span class="people-picker-name">
  <span class="block truncate" title="Maximiliana Featherstonehaugh-Abernathy">
    Maximiliana Featherstonehaugh-Abernathy
  </span>
  <span class="people-picker-detail truncate">Organizer, Festival submissions working group</span>
</span>

Members Truncate long text

Select	Member	Organizer
Select Maximiliana Featherstonehaugh-Abernathy	Maximiliana Featherstonehaugh-AbernathyOrganizer, Festival submissions working group

Empty state

Omit the table when nobody is available.

Code

<fieldset class="people-picker">
  <legend>Members</legend>
  <p class="people-picker-description">No members are available.</p>
</fieldset>

Members

No members are available.

Using the picker

Use a fieldset and legend to name the picker. Keep each checkbox’s name and detail separate with aria-labelledby and aria-describedby. Use the existing avatar component; its image or initials are decorative beside a visible name. Your application handles group membership, permissions and saving, and preserves locked values because disabled inputs are not submitted.

Open the standalone examples.