# Permit application A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Government & legal](https://beamline.io/components/apps/government-legal) app. Live demo: https://beamline.io/components/permit-application 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](https://beamline.io/components/permit-services)). - A submitted permit's progress ([permit-record](https://beamline.io/components/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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - stepper - input - [number-field](https://beamline.io/components/number-field) - select - textarea - [file-dropzone](https://beamline.io/components/file-dropzone) - button ## Dependencies `lucide-react` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Government & legal - [Permit services](https://beamline.io/components/permit-services): Where a permit starts on a city's permitting portal. The work's address resolved to the city (its permits are here) or the county around it (that office… - [Permit fees](https://beamline.io/components/permit-fees): An applicant's permit fees on a city's portal. What's owed across how many permits and how much of it is overdue; every unpaid invoice with its permit… - [Permit record](https://beamline.io/components/permit-record): A submitted permit seen by the applicant. The overview leads with what's waiting on them: the corrections to answer before the next version goes in, each… - [Parcel record](https://beamline.io/components/parcel-record): A property's parcel on a permitting portal. The lot drawn to scale as a site plan: the street, the property lines with their lengths, the dashed setback… - [Document review](https://beamline.io/components/document-review): A PDF going through review: the document in the viewer with every comment pinned to its place, the reviewers' threads beside it (open or resolved, one… - [Signing request](https://beamline.io/components/signing-request): A document sent for signature, its signature page drawn in miniature with each side's block in order. Sides sign as numbered stages that move earlier or… - [Playbook check](https://beamline.io/components/playbook-check): A document's changes checked against a versioned playbook (a rulebook of what's acceptable). Each change shows what it was and is now, then two records… - [Audit room](https://beamline.io/components/audit-room): A compliance audit seen by the company preparing it or by the auditor reviewing it. Evidence keeps the company's readiness (not ready, flagged, ready for… - [Agency book](https://beamline.io/components/agency-book): An insurance agency's book in two places. Estimated commission: the report named an estimate (not received or earned), as of a time; each source system… - [Applicant company](https://beamline.io/components/applicant-company): A contractor's company on a permitting portal. Its identity with the licence and insurance it applies under, each said valid, expiring within 60 days… - [Applicant projects](https://beamline.io/components/applicant-projects): An applicant's permits on a city's portal in one place. Projects through saved views (theirs, their company's, expiring within 30 days) and a search… - [Lease renewals](https://beamline.io/components/lease-renewals): Leases coming up for renewal. The window leads: every tracked lease placed on the days ahead at its end date, coloured by whose step it is (yours, the… - [Queue display](https://beamline.io/components/queue-display): The screen in a waiting room, read from across the room. It draws only a public projection of the queue (ticket codes and counters, never a name or a… - [Visitor journey](https://beamline.io/components/visitor-journey): A visitor's way into a walk-in queue, on their phone. Branches first: each card names its address, whether it's open (until when, closing soon, full, or… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).