Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add signature-pad

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::signature-pad> is a canvas you can sign on with a mouse, a finger or a stylus — and a text field beside it for typing your name instead.

The second one is not a nicety. Drawing a curve is a pointer gesture with no keyboard equivalent, so a signature pad on its own is a WCAG 2.1.1 failure at Level A and, in practice, a form some people cannot submit at all. The typed alternative sits next to the canvas as an equal, not behind a link, and the field states which of the two produced the value.

Basic Usage

Signature

Nothing signed yet Signature drawn 

<x-aura::signature-pad label="Signature" name="signature" />

What it posts

  • A drawing posts as a data:image/png;base64,… URL.
  • A typed name posts as typed:Mario Rossi, so your application can tell the two apart and store or render them differently.
  • Nothing signed posts an empty string.

Props

Prop Type Default Description
label string|null null Names the whole control.
name string 'signature' The hidden field's name.
height int 160 Canvas height in pixels.
typedFallback bool true Turning this off removes the keyboard path — do not, unless something else in your form provides one.
hint, error string|null null Description and error text.

Accessibility

  • The canvas is role="img" with a name, so it is not an unlabelled blank in the reading order.
  • The status line is a role="status" live region: "Nothing signed yet" becomes "Signature drawn" or the typed name, which is the only feedback a non-sighted user gets that anything happened.
  • touch-action: none stops the page scrolling out from under a signature on a phone.
  • The canvas is drawn at device pixel ratio, so the line is not a blurry smear on a modern screen.

A note on what a signature is worth

This captures an image or a name. It is not a qualified electronic signature and carries none of the legal weight of one — if you need eIDAS-grade signing, this is the wrong tool.