Permit application

A React block (a whole screen) in Beamline's Government & legal app.

A permit application filled in over several sittings on a city's portal. Steps with how many answers each still misses; the draft saved as you go and saying when (just now, minutes ago, or the day and time), and that it keeps; each step's fields (text, numbers with their unit or as money, choices, long answers, documents attached). A last review of every answer by step with the missing ones counted and listed, each taking you back to its field, and every answer changeable from there; submitted only when nothing required is missing, saying the reference it got and how long the city usually takes. Beside the steps, when given: the fees as the answers stand (each line, or what it waits for, never $0) and what happens after it's submitted (plan review with its usual time, the permit issued, each inspection in order).

Use it for

Long public or regulated forms people finish over several visits and must check before sending.
Any multi-step application whose review lists what's missing and links back to it.

Not for

Finding which permit to apply for (permit-services).
A submitted permit's progress (permit-record).

Anatomy

side: permit and address; steps with what each misses and Review; when the draft was saved
step: its fields; Back and Next
review: missing count with each missing answer's way back, or everything in; answers by step with Change or Add; Back and Submit; submitted with the reference

States

draft saved
answer missing
everything in
submitted

Keyboard

Tab through the steps, fields and answers; Enter on a missing answer goes to its field

Props

Prop	Type	Default	Description
`title` (required)	`string`	—	The permit and address it's for ("Residential deck · 412 Alder Street").
`steps` (required)	`ApplicationStep[]`	—
`fields` (required)	`ApplicationField[]`	—
`values`	`ApplicationValues`	—
`defaultValues`	`ApplicationValues`	—
`onValuesChange`	`((v: ApplicationValues) => void)`	—
`defaultSavedAt`	`number`	—	When the draft was last saved.
`defaultStep`	`number`	—
`reference` (required)	`string`	—	The reference the application gets when it's submitted, and how long review usually takes.
`review` (required)	`string`	—
`onSubmit`	`((v: ApplicationValues) => void)`	—
`fees`	`(values) => { label, amount: number \| null }[]`	—	The fees as they stand for the answers so far, beside the steps: each line's amount, or null while the answer it's worked out from is missing (said, never shown as $0).
`inspections`	`string[]`	—	What happens after it's submitted, in order ("Footings", "Framing", "Final").
`now`	`(() => number)`	—	Now, for how long ago the draft was saved; a clock in tests and demos.
`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

stepper
input
number-field
select
textarea
file-dropzone
button

Dependencies

lucide-react

Import

import { PermitApplication } from "@beamline/permit-application";

Get it

Permit application is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent