Officina UI
Components

SignaturePad

Canvas where users draw a signature, emitted as a PNG data URL on every stroke.

SignaturePad is a pointer-driven canvas for capturing a hand-drawn signature or sketch. As the user draws, onChange fires with the current canvas content as a PNG data URL, which you can store or submit. A clear button resets the canvas; relabel it with clearLabel.

Example

Preview
import { SignaturePad } from '@officina/ui';
import { useState } from 'react';

function ConsentSignature() {
  const [signature, setSignature] = useState('');
  return <SignaturePad onChange={setSignature} clearLabel="Reset" />;
}

API

PropTypeDefaultDescription
onChange*(dataUrl: string) => void—Called with a PNG data URL whenever the signature changes.
clearLabelstringClearLabel for the clear button.

SwatchPicker

Controlled preset selector that picks one swatch from a fixed palette, with optional custom.

FileUpload

Click-or-drag dropzone that validates and hands selected files to your upload logic.

On this page

ExampleAPI