# Health questionnaire A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Clinic](https://beamline.io/components/apps/clinic) app. Live demo: https://beamline.io/components/health-questionnaire A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a Yes opens its follow-up, which is then required. Sections show how many of their questions are answered; the form reads in the chosen language. Earlier versions sit on a rail with their dates and who signed them; a signed one opens read only, and a history signed over a year ago says to update it. A draft saves the answers but isn't a reviewed history; a provider signs it once nothing is missing (what is, is listed), and a refused save keeps the answers. The provider's panel lists what changed since the last signed history (was → now, a question's old answer also said under it) and every question still to answer, each opening its section. ## Use it for - Taking or updating a patient's medical history at a visit, with a provider's review. - Any questionnaire where unknown must stay apart from no and versions are kept. ## Not for - A general multi-step form ([step-form](https://beamline.io/components/step-form)). - Configuring which forms clients get ([client-forms](https://beamline.io/components/client-forms)). ## Anatomy - header: the product's mark, the title and patient, the form language - stale notice: when the last signed history is over a year old - versions: this visit, then earlier versions with date and signer - sections with answered counts; questions with Yes, No or I don't know, not answered said, the follow-up after a Yes - review: answered count, what's missing, save as draft, the provider, sign as reviewed ## States - question: not answered (dashed), yes (warning edge), I don't know (info edge), no - follow-up: needed with a Yes - section: some answered (warning) or all (success) - version: this visit (new, draft or signed), earlier (read only) - draft saved (not a review); signed; refused (answers kept) - stale: said - phone: one column, the questions first - right to left: the layout mirrors - reduced motion: nothing animates ## Keyboard - Tab through versions, sections and each question's choices; arrows move within a question's choices; Tab to the review ## Motion Nothing moves. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `patient` (required) | `string` | — | | | `sections` (required) | `HealthSection[]` | — | | | `languages` (required) | `{ id: string; label: string; }[]` | — | | | `defaultLanguage` | `string` | — | | | `versions` (required) | `HealthVersion[]` | — | Earlier versions, newest first; signed ones are read only. | | `draft` | `HealthVersion \| null` | — | This visit's draft, if one was saved. | | `providers` (required) | `{ id: string; name: string; }[]` | — | | | `now` | `string` | — | | | `onSaveDraft` | `((answers: Record) => Promise)` | — | | | `onSign` | `((answers: Record, providerId: string) => Promise)` | — | Sign this visit's answers as reviewed; reject with the reason to keep them. | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Import ```tsx import { HealthQuestionnaire } from "@beamline/health-questionnaire"; ``` ## Get it Health questionnaire 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 Clinic - [Appointment book](https://beamline.io/components/appointment-book): The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is… - [Book an appointment](https://beamline.io/components/client-booking): A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with… - [Services and hours](https://beamline.io/components/booking-setup): A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand… - [Patient overview](https://beamline.io/components/patient-overview): One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth… - [Patient chart](https://beamline.io/components/patient-chart): A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when… - [Case workspace](https://beamline.io/components/case-workspace): A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts… - [Care plan](https://beamline.io/components/care-plan): A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the… - [Treatment plan](https://beamline.io/components/treatment-plan): A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known… - [Plan templates](https://beamline.io/components/plan-templates): Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as… - [Plan acceptance](https://beamline.io/components/plan-acceptance): A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how… - [Plan follow-up](https://beamline.io/components/plan-follow-up): The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value… - [Session notes and tasks](https://beamline.io/components/session-notes): A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the… - [Note templates](https://beamline.io/components/note-templates): A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last… - [Probing chart](https://beamline.io/components/probing-chart): A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and… - [Procedure picker](https://beamline.io/components/procedure-picker): Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each… - [Results notebook](https://beamline.io/components/results-notebook): A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their… - [Insurance claims](https://beamline.io/components/claims-queue): Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not… - [Account ledger](https://beamline.io/components/account-ledger): A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that… - [Dispensing](https://beamline.io/components/dispensing): Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its… - [Record sharing](https://beamline.io/components/record-sharing): Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much… - [Client journal](https://beamline.io/components/client-journal): A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done… 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).