Components inputs

Signature

A signature capture pad for forms that need handwritten signatures. The component records the signature and provides it as a data URL for storage.

Aktualisiert Feb 19, 2026

Signature

A signature capture pad for forms that need handwritten signatures. The component records the signature and provides it as a data URL for storage.

Use Cases

  • Contract signing
  • Consent forms
  • Waiver agreements
  • Delivery confirmation
  • Approval workflows

Properties

name

Field name for form submission. Type: string.

label

Label displayed above signature pad. Type: string.

required

Whether signature is required. Type: boolean. Default: false

width

Width of signature pad. Type: string. Options: 100%, 75%, 50%, 400px, 600px. Default: 100%

height

Height of signature pad. Type: string. Options: 100px, 150px, 200px. Default: 150px

penColor

Pen/stroke color (hex). Type: string. Default: #000000

backgroundColor

Background color of pad (hex). Type: string. Default: #ffffff

Best Practices

  • Use height of 150px for most use cases
  • Include clear button for signature redo
  • Set required: true for legally binding forms
  • Use contrasting pen/background colors for visibility

Tags

signature form contract signing consent forms waiver agreements

Verwandte Komponenten

Signature

Bereit zu bauen?

Starten Sie die Erstellung Ihrer App kostenlos mit Qödiak.

Kostenlos loslegen

Verwandte Artikel

AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view, ideal for showcasing statistics, metrics, and numbers on any site.

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

AppSettings

App-level configuration that applies to the entire application. It controls app metadata, publishing, authentication, email notifications, SEO, webhooks, and branding. These settings are distinct from page-level and component-level properties.

Badge

A small label or tag component used for status indicators, categories, highlights, and similar purposes. It supports multiple visual variants.

Button

An interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom script with navigation. The component offers two visual variants and can enable or disable dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.