Signature Pad

#Basic usage

signature-pad/basic Vue React

Sign below

signature-pad/basic.vue

<script setup lang="ts">
import { rotate_ccw } from "@bysages/icons";
import { Icon, SignaturePad } from "@bysages/vue";
</script>

<template>
  <SignaturePad.Root>
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>
        <Icon :glyph="rotate_ccw" />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
    <SignaturePad.HiddenInput />
  </SignaturePad.Root>
</template>

#Props

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#Guide

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

Prop	Type	Default	Description
`value`	`string`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`defaultPaths`	`string[]`		The default paths of the signature pad.
`disabled`	`boolean`		Whether the signature pad is disabled.
`drawing`	`signaturePad.DrawingOptions`	`'{ size: 2, simulatePressure: true }'`	The drawing options.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; control: string; hiddenInput: string; label: string; }>`		The ids of the signature pad elements. Useful for composition.
`name`	`string`		The name of the signature pad. Useful for form submission.
`paths`	`string[]`		The controlled paths of the signature pad.
`readOnly`	`boolean`		Whether the signature pad is read-only.
`required`	`boolean`		Whether the signature pad is required.
`translations`	`signaturePad.IntlTranslations`		The translations of the signature pad. Useful for internationalization.

#Segment

A styled part — no props of its own; it takes the anatomy's shared styling.