Signature
A signing field with two routes: draw a signature with a pointer, or type a name. Built on the Signature Pad primitive. One binding gives back a SignatureValue carrying how it was signed, the signature as SVG, and the typed text.
The typed route is the accessible route
A drawn signature cannot be given with a keyboard, a switch or a screen reader.
AllowTyped is on by default and removing it leaves some people unable to sign at all.
Only set AllowTyped="false" where a drawn mark is a legal requirement and another route exists outside the field.
Default
Bind with
@bind-Value and you get a SignatureValue back from either route. Drawing raises it with Kind = Drawn and the SVG; typing raises it with Kind = Typed, the text, and an SVG built from that text. The field draws a signing baseline with an “x” marker under both routes, so a typed name lands where a drawn one would.Switching Route Clears the Other One
Each route holds its own state, so pressing Draw after typing a name abandons the name rather than leaving a stale drawing behind it. The value is reset to
SignatureValue.Empty on the switch. The method toggle also cannot be left with neither route selected: a toggle group deselects on a second click, and signing has no “neither”, so that press is ignored.Tuning the Ink
The line thins as the pen speeds up, which is what makes it read as ink rather than a mouse scribble.
MinWidth and MaxWidth set the two ends of that range. StrokeColor fixes the ink colour; left unset, only geometry is stored and the signature is drawn in the theme's foreground colour, repainting when the theme changes.The Typed Route
No font is bundled.
TypedFontFamily is a CSS font stack, defaulting to the handwriting families that ship with the common desktop and mobile systems and ending in the generic cursive. A typed signature is a single <text> element rather than an outline, so it renders in whatever handwriting font the viewing machine has — where that matters, store a rendered image alongside it.Storing a Signature
The SVG is already on the bound value, for both routes — there is no
GetSvgAsync on the component. A PNG only exists for a drawn signature and comes from the field through @ref. Its ink defaults to black rather than the theme's, because a signature drawn in a dark theme is near-white and exporting it onto the white background a PDF wants produces a blank page. Every export is streamed rather than returned, so a Blazor Server circuit's 32KB message cap is never hit.Replaying a Stored Signature
GetStrokesAsync returns the raw samples — the smallest form and the only replayable one. SetStrokesAsync puts them back and switches to the drawn route. Draw on the left, press Capture, then press Replay to put the same signature into the second field.Showing a Stored Signature Back
The SVG's ink is
currentColor, so the same stored markup renders dark on paper and light on a dark page with nothing recoloured. Render it with MarkupString inside an element that sets the colour you want. Switch the site to dark mode and watch the copy below follow.Disabled
Disabled draws the root at reduced opacity and refuses both routes. The clear button is always present and is disabled when the route showing is already empty.