Organisms

Checkout select

The checkout picker used in the preview context bar. Unlike a plain Select it is a searchable list where each row carries the checkout name + an optional Default badge, the checkout ID with a copy button, and a Go to custom checkouts footer that routes to the checkouts table. Archived checkouts are hidden. Sibling of the Account chip.

Updated Jul 27, 2026 by Juan Pablo Turina

Live preview

import { CheckoutSelect } from "@/components/organisms/checkout-select";

<CheckoutSelect onChange={(id) => setCheckout(id)} />

Anatomy

A Select-style trigger opens a 327px panel: a search field, then a list of checkout rows (name + optional Default badge on top, checkout ID + copy button below), and a bordered footer that navigates to the custom-checkouts table.

1
Trigger
A Select-style button (h-9, border-input) showing the active checkout name + a caret.
2
Search
Filters the list by name or checkout ID. Focused when the panel opens.
3
Checkout row
Name + an optional blue Default badge; below, the checkout ID (cid_...) and a copy button that flashes 'The ID has been copied.'.
4
Footer
Go to custom checkouts (Layout + ArrowCircleRight) — routes to the checkouts table via onGoToCheckouts.

Common configurations

The zero-config demo, and a real configuration with a Default checkout, an archived one (hidden), and onGoToCheckouts wired to the host.

Default (demo checkouts)

Zero-config drop-in. Renders three demo checkouts with IDs. Use in any prototype that needs the picker before real data exists.

import { CheckoutSelect } from "@/components/organisms/checkout-select";

<CheckoutSelect onChange={(id) => setCheckout(id)} />

Real checkouts + archived

Pass options[] with isDefault / archived flags and onGoToCheckouts. Archived checkouts are filtered out of the list; the footer routes to the checkouts table.

<CheckoutSelect
  options={[
    { id: "default", name: "Checkout default", checkoutId: "cid_a8f23k", isDefault: true },
    { id: "latam", name: "Checkout Latam", checkoutId: "cid_nkts3b" },
    { id: "old", name: "Legacy checkout", checkoutId: "cid_zz00", archived: true },
  ]}
  value={active}
  onChange={setActive}
  onGoToCheckouts={() => router.push("/checkouts")}
/>

Import

Copy this import at the top of the file. CheckoutSelect is self-contained — it ships demo checkouts, so it renders with zero props.

Also re-exports the { CheckoutOption } type for the options list. Self-contained — ships demo checkouts, so it renders on its own.

import { CheckoutSelect } from "@/components/organisms/checkout-select";

Props

CheckoutSelect is controlled-friendly: pass options + value + onChange to model real state, or drop it in with defaults. onGoToCheckouts wires the footer to the checkouts table.

Prop	Type	Default	Description
options	CheckoutOption[]	3 demo checkouts	The checkouts. Each { id, name, checkoutId, isDefault?, archived? }. Archived ones are hidden from the list.
value	string	—	Controlled active checkout id.
defaultValue	string	first option	Initial active id (uncontrolled).
onChange	(id: string) => void	—	Fires when a checkout is picked. Closes the panel.
onGoToCheckouts	() => void	—	Footer action — route to the custom-checkouts table.
placeholder	string	'Select checkout'	Trigger label when nothing is selected.
className	string	—	Merged onto the trigger button (e.g. a fixed width).

When to use

In the Checkout Builder preview context bar, to pick which checkout the preview simulates.
Anywhere a user selects a checkout and may need its ID at a glance (with copy).
When the list can grow and needs search + a route to the full checkouts table.

When not to use

For a short, id-less list of options — use a plain Select.
For selecting an account — use the Account chip.
For multi-select — this is single-select by design.

Usage

Keep the checkout ID + copy on every row — it is the reason this is not a plain Select.
Wire onGoToCheckouts so the footer actually routes to the checkouts table.
Hide archived checkouts (archived: true) from the picker.

Don't

Don't drop the Default badge — it tells the user which checkout is the fallback.
Don't turn it into a multi-select.
Don't use it for accounts — that's the Account chip.

Cross-links to atoms and patterns you may reach for next.

Preview context barThe toolbar that hosts this picker next to the Account chip.
Account chipThe sibling picker for accounts (searchable panel, same pattern).
PopoverThe floating panel primitive under the hood.
BadgeThe Default badge on a row.