Patterns

Routing connection card

A selectable connection card for the Routing 'Select connections' sheet, opened when you Add step on the canvas (Figma 'Routing / Sheet_connections cards'). A 40px brand logo, the provider name + subtitle + a type Badge, and a selection control pinned top-right. Two control variants: checkbox (processors / payment methods, multi-select) and radio (fraud solutions, single-select — used inside a RadioGroup). Everything is top-aligned; hover lifts the card.

Updated Aug 6, 2026 by Juan Pablo Turina

Live preview

Fraud solutions

Processors and payment methods

import { RoutingConnectionCard } from "@/components/patterns/routing-connection-card";
import { RadioGroup } from "@/components/ui/radio-group";

{/* Processors / payment methods — checkbox, multi-select */}
<div className="grid grid-cols-2 gap-4">
  <RoutingConnectionCard
    name="Adyen"
    subtitle="pureba routing"
    type="Processor"
    logo={<Logo />}
    control="checkbox"
    checked={checked}
    onCheckedChange={setChecked}
  />
</div>

{/* Fraud solutions — radio, single-select */}
<RadioGroup value={fraud} onValueChange={setFraud} className="grid grid-cols-2 gap-4">
  <RoutingConnectionCard name="Riskified" subtitle="Fraud engine" type="Fraud solution" logo={<Logo />} control="radio" value="Riskified" />
</RadioGroup>

Anatomy

A bordered card (rounded-xl, p-4) laid out as a top-aligned row: a 40px logo, then a column with the name (text-base semibold) + a muted subtitle + a secondary type Badge, and the selection control (Checkbox or RadioGroupItem) pinned to the top-right. Hover switches the border to primary and adds shadow-xl. Meant to be laid out in a two-column grid inside the sheet.

  1. 1
    Logo

    The 40px brand logo of the connection, top-left.

  2. 2
    Name + subtitle

    Provider name (text-base semibold, tight) over a muted subtitle (text-xs).

  3. 3
    Type badge

    A secondary Badge naming the connection type: Processor / Payment method / Fraud solution.

  4. 4
    Control

    The selection control top-right: a Checkbox (processors) or a RadioGroupItem (fraud solutions).

States

Checkbox (processors / payment methods)

Multi-select connections. control='checkbox' with checked + onCheckedChange.

Radio (fraud solutions)

Single-select connections. control='radio' with a value, used inside a RadioGroup.

Hover

The border turns primary and the card lifts (shadow-xl) — the same lift the Figma hover state shows.

Import

Copy this import line at the top of the file where you compose this molecule.

Import the card and lay several out in a two-column grid; wrap the radio (fraud) group in a RadioGroup.

import { RoutingConnectionCard } from "@/components/patterns/routing-connection-card";

Props

The card renders a checkbox or a radio depending on the control prop.

PropTypeDefaultDescription
namestring—The connection name (text-base semibold).
subtitlestring—A muted line under the name.
typestring—Type badge: Processor / Payment method / Fraud solution (secondary Badge).
logoReactNode—The 40px brand logo, top-left.
control"checkbox" | "radio""checkbox"The selection control. 'radio' must live inside a RadioGroup.
checkedboolean—Checkbox state (control='checkbox').
onCheckedChange(v: boolean) => void—Checkbox change handler.
valuestring—RadioGroupItem value (control='radio').
classNamestring—Extra classes on the card surface.

When to use

  • Inside the Routing Select connections sheet, to pick a processor / payment method or a fraud solution.
  • Any two-column list of selectable connections with a logo + type.
  • When fraud connections must be single-select (radio) and the rest multi-select (checkbox).

When not to use

  • For a route provider node on the canvas — that is the routing provider card.
  • For a generic selectable list row without a logo + type — use a plain Checkbox / Radio.
  • Outside the Routing connection picker.

Usage

Do
  • Lay the cards out in a two-column grid so the sheet width is used well.
  • Use radio for fraud solutions (single-select) and checkbox for processors / payment methods.
  • Keep the content top-aligned — logo and control at the top, never vertically centered.
Don't
  • Don't center the logo or the control vertically — align everything to the top.
  • Don't use a radio outside a RadioGroup — it needs the group for selection.
  • Don't invent the hover look — it is primary border + shadow-xl.

Related

Cross-links to the atoms this molecule composes and sibling patterns.

  • CheckboxThe processors / payment methods control.
  • Radio groupThe fraud-solutions control (single-select).
  • BadgeThe connection-type chip.