KQ-927 · FORM/CARD
Form Card
A real form that lives in a thread and keeps its answer. Sending collapses the fields and stamps the values into a summary whose rows arrive from 8px on snap in a cascade while the box glides on glide to the height a ResizeObserver measured, and a Sent chip lands on recoil. An empty required field refuses the send instead of celebrating: it takes aria-invalid with a named message and focus, and Edit returns the fields with their values and puts focus back in the first one.
KQ-927 · FORM/CARD
- Coldbrook Supply · 11:02
Open · 0 of 4 answered · not sent
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/form-card
Props
- fields
- FormCardField[]
- default —
- The questions in order; each is { id, label, kind?, options?, placeholder?, required?, hint? } and renders a real input or select.
- values / defaultValues
- Record<string, string>
- default {}
- Controlled or initial answers, keyed by field id.
- onValuesChange
- (values: Record<string, string>) => void
- default —
- Fires from the change handler that caused it, with the next whole record.
- submitted / defaultSubmitted
- boolean
- default false
- Controlled or initial face: true shows the summary, false the fields.
- onSubmittedChange
- (submitted: boolean) => void
- default —
- Fires from Send and from Edit, in that direction.
- onSubmit
- (values: Record<string, string>) => void
- default —
- Fires once from a send that passed, with the frozen answers.
- title
- string
- default "Delivery details"
- The card's heading, which names the form for assistive technology.
- note
- string
- default —
- One quieter line under the heading.
- submitLabel
- string
- default "Send details"
- The word on the submit control.
- editLabel
- string
- default "Edit"
- The word on the summary's control.
- sentLabel
- string
- default "Sent"
- The chip's word once the card is sent.
- disabled
- boolean
- default false
- Holds every field and control.
- className
- string
- default —
- Extra classes on the card.
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | FormCardField[] | — | The questions in order; each is { id, label, kind?, options?, placeholder?, required?, hint? } and renders a real input or select. |
| values / defaultValues | Record<string, string> | {} | Controlled or initial answers, keyed by field id. |
| onValuesChange | (values: Record<string, string>) => void | — | Fires from the change handler that caused it, with the next whole record. |
| submitted / defaultSubmitted | boolean | false | Controlled or initial face: true shows the summary, false the fields. |
| onSubmittedChange | (submitted: boolean) => void | — | Fires from Send and from Edit, in that direction. |
| onSubmit | (values: Record<string, string>) => void | — | Fires once from a send that passed, with the frozen answers. |
| title | string | "Delivery details" | The card's heading, which names the form for assistive technology. |
| note | string | — | One quieter line under the heading. |
| submitLabel | string | "Send details" | The word on the submit control. |
| editLabel | string | "Edit" | The word on the summary's control. |
| sentLabel | string | "Sent" | The chip's word once the card is sent. |
| disabled | boolean | false | Holds every field and control. |
| className | string | — | Extra classes on the card. |