caliper uidocs
DemoSign inGet Pro

Identity & navigation

Free

Search a local directory and keep your place as the page changes.

Kind CompositionComponents 9
Directory members
9

People matching the current local search.

Primary team
Developer experience and infrastructure

A long text value, without truncation.

Storage usage
—

Unavailable; no service is connected.

Audit export
Loading

Static loading preview; no request is running.

Workspace directory

Search the nine local members by name or role. Results and page limits update immediately; no directory service is queried.

The form reads the native search value. Clearing returns focus to the input.

1–3 of 9 members

  • Mara Chen

    Design

  • Inez Borges

    Frontend engineering

  • Elias Kim

    Platform engineering

Image and fallback states

One stable size. Initials handle missing or failed images; decorative avatars stay out of the accessibility tree.

Local image

Missing image

Failed image

Priya Nair

Decorative beside the visible name

First-use state

This independent local list starts empty. Its action creates one item, rather than simulating an invitation or service request.

No collaborators yet

Add a local example member to see how the empty state becomes a useful list.

People and cards

A stack for who is here, a card that can open, and a frame that keeps its ratio.

+2

Booking flow and room pages.

Mara Chen

Updated today

16:9
Implementation notes

Search composes the shared Input and Button; its ref points to the actual input. Breadcrumb uses native links and a current-page marker. Pagination is caller controlled: filter data and clamp the page in the consumer. EmptyState actions and StatCard values also belong to the application. No additional runtime dependency is required.

Tab reaches links, search, clear and page buttons; Enter activates links and buttons, and Space activates buttons. Boundary page buttons remain focusable and expose their unavailable state. Text editing, composition and Escape retain native search behavior. Use empty avatar alt text when an adjacent visible name already identifies the person.

<Label htmlFor="members">Search members</Label>
<Search id="members" name="query" value={query}
  onChange={(event) => setQuery(event.currentTarget.value)}
  onClear={() => setQuery("")} />
<Avatar name="Mara Chen" alt="" /> <span>Mara Chen</span>
<Pagination label="Member pages" page={page} pageCount={pageCount}
  onPageChange={setPage} />
<EmptyState title="No members yet" description="Start a local list.">
  <Button onClick={addMember}>Add member</Button>
</EmptyState>
<StatCard label="Members" value={members.length} />
Page appearance

Components #

Each component has its own page with a focused preview, installation, usage and API.