revido kit
Start building
← All components
actions / stable

InlineAddRow

Inline creation at the end of a related-item list, with retained drafts and an optional full form.

LIVE PREVIEW
Loading preview…

When to use

  • Create several child records using only their names.
  • Keep a section-header add action while sharing its inline editor state.

Consider an alternative

  • Records require multiple fields before creation: open the canonical form.

Import

import { InlineAddRow } from '@revido-llc/kit';

Keyboard interaction

  • Enter creates and keeps the field open for the next item.
  • Escape closes without creating; blur never submits.

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

label (required)string—Visible ghost-row action and accessible field label, e.g. "Add task".
classNamestring—
compactbooleanfalse
fullFormLabelstring"Open full form"
hideTriggerbooleanfalseA section can own the trigger while this component owns the draft.
isOpenboolean—Controlled editor state, for a collection's section-header add action.
onCreate((name: string) => void | Promise<void>)—Creates by name. Reject to keep the draft for retry.
onOpenChange((open: boolean) => void)—
onOpenFullForm(() => void)—Optional canonical form for details beyond the name.
placeholderstring—

Examples

Create repeatedly

<InlineAddRow label="Add task" onCreate={createTask} onOpenFullForm={openTaskForm} compact />

Failed draft

<InlineAddRow label="Add task" onCreate={createTask} />

Full form only

<InlineAddRow label="Add feature" onOpenFullForm={openFeatureForm} />

Related components