Field Type Picker

A searchable list of field types with their icons, in groups, for adding a field or changing its type.

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Field Type Picker before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify field-type-picker

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/field-type-picker

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

The same command installs the registry items it composes: @vegastack/button, @vegastack/command.

Usage

import { FieldTypePicker } from "@/components/ui/field-type-picker";

<PopoverContent className="p-0">
  <FieldTypePicker types={fieldTypes} onSelect={(type) => addField(type)} />
</PopoverContent>;

Scope

Choosing a field's type: "+ Add field" on a table, a form builder, the Type row of a field's settings. The app passes its types with their icons and groups; the picker searches names, descriptions and keywords.

Anatomy

FieldTypePicker — data-slot="field-type-picker" | "field-type-picker-back" | "field-type-picker-item" | "field-type-picker-step-content" | "field-type-picker-step-header"

Examples

Add a field

Ungrouped types come first, then the groups in groupOrder. The current type is checked; a type with a disabledReason shows why and can't be chosen.

A second step

A type with next opens a second step instead of being chosen — "Link to" asking which kind of record. renderStep(type, { back, setTitle }) draws it under a back header (data-slot="field-type-picker-step-header", the type's icon and label, retitled with setTitle); the step reports its own final choice. For a link field, FieldTypeLinkStep is that step: grouped kinds of record with one-line explanations, and a table choice for Rows.

<FieldTypePicker
  types={[
    ...types,
    { id: "link", label: "Link to", icon: <Link2 />, next: true },
  ]}
  onSelect={addField}
  renderStep={(type, { back }) => (
    <LinkKindStep onBack={back} onPick={addLink} />
  )}
/>

API Reference

Prop	Type	Default	Description
`onSelect`*	`(id: string) => void`	—	Called with the chosen type's id.
`types`*	`readonly FieldTypeOption[]`	—	The types, in order within their groups.
`backLabel`	`string`	`"Back"`	The step header's back button name.
`className`	`string`	—	Classes on the command root.
`currentLabel`	`string`	`"current"`	Read after the current type's name.
`emptyLabel`	`string`	`"No field type matches."`
`groupOrder`	`readonly string[]`	—	Group order; groups not listed follow in first-seen order.
`placeholder`	`string`	`"Search field types"`
`renderStep`	`((type: FieldTypeOption, controls: FieldTypePickerStepControls) => React.ReactNode)`	—	The second step for a type with `next`: a back header (the type's icon and label) and this. The step reports its own final choice.
`value`	`string`	—	The current type, checked.

Data attributes and CSS variables on FieldTypePicker

Attribute	Values
`data-checked`	`""`
`data-slot`	`"field-type-picker" \| "field-type-picker-back" \| "field-type-picker-item" \| "field-type-picker-step-content" \| "field-type-picker-step-header"`
`data-step`	mirrors a prop or state value

FieldTypeOption

Prop	Type	Default	Description
`icon`*	`React.ReactNode`	—	Its icon.
`id`*	`string`	—	Stable id ("text", "number", "relation").
`label`*	`string`	—	Its name ("Number").
`description`	`string`	—	A muted line about it ("Links to rows in another table").
`disabledReason`	`string`	—	Why it can't be chosen here — shown, and the pick is refused.
`group`	`string`	—	The group heading it sits under; ungrouped types come first.
`keywords`	`readonly string[]`	—	Extra words a search matches ("integer", "currency").
`next`	`boolean`	—	Choosing it opens a second step (`renderStep`) instead of calling `onSelect` — "Link to" asking which record kind.

Accessibility

A combobox search over a grouped listbox: ↑/↓ move, Enter chooses, Esc closes the host popover.
Icons are decorative; each type is named by its label.

Contract	States tested
Behaviour	`default`, `search`, `disabled-item`, `current`, `step`
Accessibility	`labeled`
Visual	`default`, `with-icon`

Do / Don't

Offer field types through FieldTypePicker with an icon for every type.

Don't

List field types in a plain Select with no search or icons.

On this page