Layout picker

A React component in Beamline's Form controls category.

Shared record layouts for one page. Each layout says where it's used ("Used on 3 pages: Deals, this page, Forecast") and how many fields it shows, and a chosen layout other pages share says that an edit reaches them too; Duplicate makes an independent copy for this page in one step and chooses it, leaving the other pages on the original; a layout for another table is listed but can't be chosen, with why; Delete, in the row's menu, names every page that uses it before it asks, and a refused delete keeps it with the reason.

Use it for

Choosing a saved layout, template or view that several pages share, where a change to it reaches all of them.
Anywhere a shared thing must say where it's used before it's edited, copied or deleted.

Not for

Picking one of a few plain options (select, radio-cards).
Editing the layout itself (record-setup, review-page-builder).

Anatomy

layouts: each with its name, field count, where it's used or why it can't be chosen, the shared note when chosen, and its actions menu (Duplicate for this page, Delete)
said: duplicating, the copy made, deleted, or the refusal
delete dialog: the layout, the pages that use it, Keep it, Delete layout

States

layout: chosen (ink ring), choosable, another table's (sunken, said), unused
chosen and shared with other pages: said in the warning tone
duplicate: duplicating, copied and chosen (said)
delete: asked with the pages named; deleting; deleted; refused (kept, reason said)
right to left: the layout mirrors
reduced motion: no transitions

Keyboard

Tab through the layouts (Enter or Space chooses) and each row's actions menu; Escape or Keep it closes the dialog

Motion

Rows ease between chosen and not over the standard duration. Nothing runs at rest.

Props

Prop	Type	Default	Description
`layouts` (required)	`SharedLayout[]`	—
`table` (required)	`string`	—	The table this page shows; layouts for other tables are listed but can't be chosen.
`page` (required)	`string`	—	This page's name, as it appears in usedOn.
`value`	`string`	—	Controlled selected value; omit to use defaultValue.
`defaultValue`	`string`	—	Initial selection when uncontrolled; omitted by default.
`onChange`	`((id: string) => void)`	—
`onDuplicate`	`((id: string) => Promise<SharedLayout>)`	—	Make an independent copy for this page; resolve with the copy.
`onDelete`	`((id: string) => Promise<unknown>)`	—	Delete a layout; reject with the reason to keep it.
`labels`	`Partial<{ label: Message; usedOn: Message; thisPage: Message; otherTable: Message; fiel…`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Used in

Review page builder

Dependencies

lucide-react

Import

import { LayoutPicker } from "@beamline/layout-picker";

Get it

Layout picker is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent