SelectionCard
ImplementedShows the entity a picker has selected, with a divided action rail on the trailing edge. Use when a chosen value needs confirming (two venues can share a name) or acting on (edit, clear). Composes Surface.
patterns/molecules/selectioncard.htmlShows the entity a picker has selected, with a divided action rail on the trailing edge.
SelectionCard
Form & Choice — Family 3
Chosen-entity card: title, supporting details, optional leading media and a divided trailing action rail. Composes Surface.
Usage
Use SelectionCard after a picker resolves to one entity and the user must confirm they picked the right one (two venues can share a name) or act on it (edit, clear). A bare label in the input cannot do either. Put IconButtons in actions — they render in the divided trailing rail and keep their 44px tap targets; the card itself is a display container with no interactive role.
import { SelectionCard, IconButton } from '@epasslive/design-system'
<SelectionCard
title="Foufounes Électriques"
media={<Avatar /* … */ />}
actions={
<>
<IconButton ariaLabel={t('editVenue')} icon={<Pencil />} variant="ghost" size="sm" />
<IconButton ariaLabel={t('clearVenue')} icon={<X />} variant="ghost" size="sm" />
</>
}
>
<div className="text-ep-xs text-ep-text-muted">
87 Rue Sainte-Catherine E, Montréal, QC H2X 1K5
</div>
</SelectionCard>Props
title*React.ReactNodePrimary line — the chosen entity's name.
childrenReact.ReactNodeSupporting lines under the title.
actionsReact.ReactNodeControls in the divided trailing rail, typically IconButtons.
mediaReact.ReactNodeLeading slot — thumbnail, avatar or icon.
classNamestringExtra classes on the root Surface.
idstringForwarded to the root.
Props
SelectionCard
titleReact.ReactNode—Primary line — the chosen entity's name.
childrenReact.ReactNode—Supporting lines under the title.
actionsReact.ReactNode—Controls in the divided trailing rail, typically IconButtons.
mediaReact.ReactNode—Leading slot — thumbnail, avatar or icon.
classNamestring—Extra classes on the root Surface.
idstring—Forwarded to the root.
<SelectionCard />Accessibility
layout
1 rulecomposition
1 ruleUsage
Import
import { SelectionCard } from "@epasslive/design-system"Example 1
<SelectionCard title="Foufounes Électriques" />Example 2
<SelectionCard title="Venue" actions={<IconButton />} />