# Layout picker

A React component in [Beamline](https://beamline.io/)'s [Form controls](https://beamline.io/components/forms) category. Live demo: https://beamline.io/components/layout-picker

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](https://beamline.io/components/radio-cards)).
- Editing the layout itself ([record-setup](https://beamline.io/components/record-setup), [review-page-builder](https://beamline.io/components/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

- [Alert Dialog](https://beamline.io/components/alert-dialog.md)
- [Button](https://beamline.io/components/button.md)
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md)
- [Empty state](https://beamline.io/components/empty-state.md)
- [Skeleton](https://beamline.io/components/skeleton.md)
- [Spinner](https://beamline.io/components/spinner.md)

## Used in

- [Review page builder](https://beamline.io/components/review-page-builder.md)

## Dependencies

`lucide-react`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Form controls

- [Target table](https://beamline.io/components/target-table): Rows of repeated rounds with typed targets (a load × a count, a count range, a time, a load held for a time), each row drawn as a bar beside its numbers…
- [Color Palette](https://beamline.io/components/color-palette): A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
- [Rich text editor](https://beamline.io/components/rich-text-editor): A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
- [Allocation editor](https://beamline.io/components/allocation-editor): Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
- [Radio cards](https://beamline.io/components/radio-cards): One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
- [Calendar](https://beamline.io/components/calendar): Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
- [Availability rule editor](https://beamline.io/components/availability-rule-editor): When someone (or something) can be booked: hours for each day of the week, one or more ranges a day, a day turned off, a day's hours copied to the others…
- [Recurrence editor](https://beamline.io/components/recurrence-editor): How something repeats, set in plain controls and said back in a sentence: every N days, weeks, months or years; which weekdays; in a month, on a date or…
- [Signature pad](https://beamline.io/components/signature-pad): A pad for a drawn signature whose ink follows a stylus's pressure (and thins with speed under a mouse or finger); undo, replay, PNG or SVG export, and…
- [Image cropper](https://beamline.io/components/image-cropper): Frame a picture before it is saved: a fixed window (square, round for avatars, wide for covers, or free with handles) over the picture, which you drag…
- [Input Dissolve](https://beamline.io/components/input-dissolve): A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
- [Password field](https://beamline.io/components/password-field): A password field with a reveal control, and a strength meter when a password is being created.
- [Card field](https://beamline.io/components/card-field): A payment card in one field: the number groups as it is typed and names its network, the expiry and security code follow on their own as each part…
- [File drop zone](https://beamline.io/components/file-dropzone): A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
- [Scrubber](https://beamline.io/components/scrubber): A budget, a timeout or a position on a scale where the neighbourhood matters: the readout says how far under or over the named limit the value is, the…
- [Slider](https://beamline.io/components/slider): A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
- [Rating](https://beamline.io/components/rating): A score on a small scale: stars that fill as you point (halves too) and light one after another when chosen, with the word for the score beside them…
- [Date range picker](https://beamline.io/components/date-range-picker): A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days…
- [OTP input](https://beamline.io/components/otp-input): A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
- [Segmented control](https://beamline.io/components/segmented-control): Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
- [Stage field](https://beamline.io/components/stage-field): A record's status as its stages in order, editable in place. Stages before the current one read as passed (gone through, never "complete"); only the…
- [Tooth picker](https://beamline.io/components/tooth-picker): Teeth and their surfaces for one procedure. The arch by Universal number as you face the patient (upper 1–16, lower 32–17; supernumerary teeth on their…
- [Colour picker](https://beamline.io/components/color-picker): A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
- [Emoji picker](https://beamline.io/components/emoji-picker): An emoji chosen from a search and a grid. The trigger shows the chosen emoji and opens a search above the emoji by group, with the recently used first…
- [Chip group](https://beamline.io/components/chip-group): Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N”.
- [Shortcut recorder](https://beamline.io/components/shortcut-recorder): Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
- [Mention input](https://beamline.io/components/mention-input): A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
- [Tag input](https://beamline.io/components/tag-input): Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
- [Multi-select](https://beamline.io/components/multi-select): Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear…
- [Tree select](https://beamline.io/components/tree-select): A field that picks from a tree: departments and teams, categories and subcategories, folders, regions and cities; the list opens as an indented tree…
- [Combobox](https://beamline.io/components/combobox): One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
- [Phone input](https://beamline.io/components/phone-input): A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
- [Date picker](https://beamline.io/components/date-picker): One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
- [Time picker](https://beamline.io/components/time-picker): A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
- [Reminder picker](https://beamline.io/components/reminder-picker): Snooze or remind, at an exact time. Two named actions on one picker: Snooze hides the item until then, Remind me keeps it in view and reminds at that…
- [Number field](https://beamline.io/components/number-field): A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
- [Stock adjust](https://beamline.io/components/stock-adjust): An on-hand count changed with its reason: received, recounted, damaged, lost or returned; by an amount or to a new count; in the item's unit or in packs…
- [Inline edit](https://beamline.io/components/inline-edit): Text, a number or an amount of money that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves…
- [Search field](https://beamline.io/components/search-field): The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
- [Switch](https://beamline.io/components/switch): A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
- [Form](https://beamline.io/components/form): Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
- [Select](https://beamline.io/components/select): One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
- [Toggle group](https://beamline.io/components/toggle-group): Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.
- [Input](https://beamline.io/components/input): A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments. With complete or emailDomains it offers…
- [Checkbox](https://beamline.io/components/checkbox): A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
- [Radio group](https://beamline.io/components/radio-group): One choice from a short visible set, each option with an optional description, vertical or in a row.
- [Textarea](https://beamline.io/components/textarea): Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
- [Label](https://beamline.io/components/label): The text label tied to a form control, with a required marker that screen readers announce.
- [Value grip](https://beamline.io/components/value-grip): A grip on a scale your screen draws (a bar's end, a flag, a markup's edge): drag it, or use the arrows, to a value snapped to its step; the value arrives…
- [Count adjust](https://beamline.io/components/count-adjust): A count of whole things against its whole (received of ordered, credits of bought), set by hand: what is on record stays solid, the change is drawn as…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).