LogSheet

Preview

Installation

pnpm dlx shadcn@latest add @opsinjs/log-sheet

Usage

import { LogSheet } from "@/components/ui/log-sheet"

<LogSheet
  open={open}
  onOpenChange={setOpen}
  title="An example entry"
  values={values}
  saveLabel="Save the example entry"
  onSave={(entry) => store(entry)}
>
  <Field label="Example measurement">
    <Field.Control value={held ?? ""} onChange={write} />
  </Field>
</LogSheet>

When to use it

Clinical meaning

Asserts. That the reader recorded this value, at this time, themselves. LogEntry.provenance is the literal "self-reported" and no prop changes it. See Data provenance and device accuracy.

Never read as. A clinical observation or an assessment. The sheet never evaluates what is entered or says whether it is worth acting on.

Colour axis. Category only, on one band beneath the heading carrying data-category with no word and no glyph. The status axis never appears here: an amber field mid-keystroke teaches a person to stop logging honestly.

Thresholds. None. LogSheet holds no ranges and never blocks a save, so an unlikely value still saves. A plausibility warning belongs on ReadingInput. maxBackdateDays has no default and constrains the platform picker, not the save.

Timing. occurredAt is the time the entry is about and recordedAt the save time. backdated is true only when the reader moved the time control.

Anatomy

Examples

Leaving with unsaved input

Escape, the background, a drag and the close control all ask the same question in the footer. onDiscard receives the entry about to be lost.

Two fields, and the window the product owns

Two controls write two keys into one entry through values. maxBackdateDays sets the picker's earliest day, and the sheet still refuses no save.

Content guidelines

The title names what is being logged: Blood pressure, How you slept. saveLabel says what it saves, Save reading, never Done, so it has no default. Ask for nothing you can infer; the fourth field stops people logging.

Accessibility

Audited against WCAG 2.2 AA in a source pass and a rendered pass. This audit is author-run, not an independent review, and clinical review is still pending.

The audit found nothing to change here. Both inputs take their name and description from Field, so name, role and value hold; the only coloured element is the aria-hidden category band; and the single tokenised column reflows and scales.

Three items are argued, not measured.

• The discard question is announced by a focus move and aria-describedby, not a live region; a second modal was declined on purpose.
• No Saved status is announced: onSave never closes the sheet, so the component cannot know the save landed and that feedback belongs to the product.
• Save is one explicit tap with no confirm step: no autosave, every field visible, sheet stays open for undo.

The open sheet was not re-measured in a browser: port 4000 holds a stale build. axe on the static rendered page is clean.

Data attributes

API reference

open, onOpenChange, title, detents and className come from Sheet. footer, modal and dismissible are omitted on purpose. onSave never closes the sheet; only the product knows whether the save landed. Both handlers receive a LogEntry:

export interface LogEntry {
  values: Record<string, number | string | null>
  occurredAt: string
  recordedAt: string
  backdated: boolean
  provenance: "self-reported"
  note?: string
}

Related

• Sheet is the general surface. LogSheet adds a capture contract and one save.
• ReadingInput is the single control that goes inside.
• Questionnaire is an assessment, not a record.
• Field is for entries that belong on a page, and wires every control here.
• ConsentSheet asks for permission rather than a record.