QEditableForm

A schema-agnostic record form with a create mode (edit all fields) and an edit mode (per-field click-to-edit).

Updated 2026-06-04

Create form

<QEditableForm
  mode="create"
  fields={[
    { key: "name", label: "Name", required: true },
    { key: "email", label: "Email" },
  ]}
  values={{ name: "", email: "" }}
  renderInput={(field, value, onChange) => (
    <Input
      value={(value as string) ?? ""}
      placeholder={field.label}
      onInput={(e) => onChange(e.currentTarget.value)}
    />
  )}
  onCreate={async (values) => console.log(values)}
  submitLabel="Create"
/>

A schema-agnostic record form with a create mode (edit all fields) and an edit mode (per-field click-to-edit).

Installation

railbase ui add QEditableForm

Note

railbase ui add also copies the button component — they ship alongside this component automatically.

Usage

import { QEditableForm } from "@/lib/ui/QEditableForm";

<QEditableForm
  mode="edit"
  fields={fields}
  values={record}
  onSaveField={(name, value) => save(name, value)}
/>