Signature

A component that allows users to draw a signature using mouse or touch input.

<script setup lang="ts">
import { Signature } from '@destyler-ui/vue'
</script>

<template>
  <Signature.Root>
    <Signature.Label>Sign below</Signature.Label>
    <Signature.Control>
      <Signature.Segment />
      <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
      <Signature.Guide />
    </Signature.Control>
  </Signature.Root>
</template>

import { Signature } from '@destyler-ui/react'

export function Basic() {
  return (
    <Signature.Root>
      <Signature.Label>Sign below</Signature.Label>
      <Signature.Control>
        <Signature.Segment />
        <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
        <Signature.Guide />
      </Signature.Control>
    </Signature.Root>
  )
}

import { Signature } from '@destyler-ui/solid/signature'

export function Basic() {
  return (
    <Signature.Root>
      <Signature.Label>Sign below</Signature.Label>
      <Signature.Control>
        <Signature.Segment />
        <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
        <Signature.Guide />
      </Signature.Control>
    </Signature.Root>
  )
}

<script lang="ts">
  import { Signature } from '@destyler-ui/svelte'
</script>

<Signature.Root>
  <Signature.Label>Sign below</Signature.Label>
  <Signature.Control>
    <Signature.Segment />
    <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
    <Signature.Guide />
  </Signature.Control>
</Signature.Root>

Anatomy

<script setup lang="ts">
import { Signature } from '@destyler-ui/vue'
</script>

<template>
  <Signature.Root>
    <Signature.Label />
    <Signature.Control>
      <Signature.Segment />
      <Signature.Guide />
    </Signature.Control>
    <Signature.ClearTrigger />
    <Signature.HiddenInput />
  </Signature.Root>
</template>

import { Signature } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Signature.Root>
      <Signature.Label />
      <Signature.Control>
        <Signature.Segment />
        <Signature.Guide />
      </Signature.Control>
      <Signature.ClearTrigger />
      <Signature.HiddenInput />
    </Signature.Root>
  )
}

import { Signature } from '@destyler-ui/solid'
import { createSignal } from 'solid-js'

export default function Basic() {
  const [value, setValue] = createSignal('')

  return (
    <Signature.Root
      onDrawEnd={(details) => {
        if (details.paths.length === 0) {
          setValue('')
          return
        }
        void details.getDataUrl('image/png').then(setValue)
      }}
    >
      <Signature.Label />
      <Signature.Control>
        <Signature.Segment />
        <Signature.Guide />
      </Signature.Control>
      <Signature.ClearTrigger />
      <Signature.HiddenInput value={value()} />
    </Signature.Root>
  )
}

<script lang="ts">
  import { Signature } from '@destyler-ui/svelte'
</script>

<Signature.Root>
  <Signature.Label>Sign below</Signature.Label>
  <Signature.Control>
    <Signature.Segment />
    <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
    <Signature.Guide />
  </Signature.Control>
</Signature.Root>

Examples

Basic

<script setup lang="ts">
import { Signature } from '@destyler-ui/vue'
</script>

<template>
  <Signature.Root>
    <Signature.Label>Sign below</Signature.Label>
    <Signature.Control>
      <Signature.Segment />
      <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
      <Signature.Guide />
    </Signature.Control>
  </Signature.Root>
</template>

import { Signature } from '@destyler-ui/react'

export function Basic() {
  return (
    <Signature.Root>
      <Signature.Label>Sign below</Signature.Label>
      <Signature.Control>
        <Signature.Segment />
        <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
        <Signature.Guide />
      </Signature.Control>
    </Signature.Root>
  )
}

import { Signature } from '@destyler-ui/solid/signature'

export function Basic() {
  return (
    <Signature.Root>
      <Signature.Label>Sign below</Signature.Label>
      <Signature.Control>
        <Signature.Segment />
        <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
        <Signature.Guide />
      </Signature.Control>
    </Signature.Root>
  )
}

<script lang="ts">
  import { Signature } from '@destyler-ui/svelte'
</script>

<Signature.Root>
  <Signature.Label>Sign below</Signature.Label>
  <Signature.Control>
    <Signature.Segment />
    <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
    <Signature.Guide />
  </Signature.Control>
</Signature.Root>

Image Preview

Preview the signature as an image.

<script setup lang="ts">
import { Signature } from '@destyler-ui/vue'
import { ref } from 'vue'

const imageUrl = ref<string | null>(null)

const handleDrawEnd = async (details: Signature.DrawEndDetails) => {
  imageUrl.value = await details.getDataUrl('image/png')
}
</script>

<template>
  <Signature.Root @draw-end="handleDrawEnd">
    <Signature.Label>Sign below</Signature.Label>
    <Signature.Control>
      <Signature.Segment fill="orange" />
      <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
      <Signature.Guide />
    </Signature.Control>
  </Signature.Root>
  <img v-if="imageUrl" :src="imageUrl" alt="Signature preview" />
</template>

'use client'

import type { DrawEndDetails } from '@destyler-ui/react'
import { useState } from 'react'
import { Signature } from '@destyler-ui/react'

export function ImagePreview() {
  const [imageUrl, setImageUrl] = useState<string | null>(null)

  const handleDrawEnd = async (details: DrawEndDetails) => {
    setImageUrl(await details.getDataUrl('image/png'))
  }

  return (
    <>
      <Signature.Root onDrawEnd={handleDrawEnd}>
        <Signature.Label>Sign below</Signature.Label>
        <Signature.Control>
          <Signature.Segment fill="orange" />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
      </Signature.Root>
      {imageUrl && <img src={imageUrl} alt="Signature preview" />}
    </>
  )
}

import { Signature } from '@destyler-ui/solid/signature'
import { createSignal, Show } from 'solid-js'

export function ImagePreview() {
  const [imageUrl, setImageUrl] = createSignal<string>()

  return (
    <>
      <Signature.Root
        onDrawEnd={details => details.getDataUrl('image/png').then(url => setImageUrl(url))}
      >
        <Signature.Label>Sign below</Signature.Label>
        <Signature.Control>
          <Signature.Segment fill="orange" />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
      </Signature.Root>
      <Show when={imageUrl()}>
        <img src={imageUrl()} alt="Signature" />
      </Show>
    </>
  )
}

<script lang="ts">
  import type { DrawEndDetails } from '@destyler-ui/svelte'
  import { Signature } from '@destyler-ui/svelte'

  let imageUrl = $state<string | null>(null)

  async function handleDrawEnd(details: DrawEndDetails) {
    imageUrl = await details.getDataUrl('image/png')
  }
</script>

<Signature.Root onDrawEnd={handleDrawEnd}>
  <Signature.Label>Sign below</Signature.Label>
  <Signature.Control>
    <Signature.Segment fill="orange" />
    <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
    <Signature.Guide />
  </Signature.Control>
</Signature.Root>

{#if imageUrl}
  <img src={imageUrl} alt="Signature preview" />
{/if}

With Field

Combine with a form field for validation and labeling.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { Signature } from '@destyler-ui/vue'
import { ref } from 'vue'

interface Props {
  disabled?: boolean
  invalid?: boolean
  readOnly?: boolean
  required?: boolean
}

defineProps<Props>()

const imageUrl = ref('')

const handleDrawEnd = async (details: Signature.DrawEndDetails) => {
  imageUrl.value = await details.getDataUrl('image/png')
}
</script>

<template>
  <Field.Root :disabled="disabled" :invalid="invalid" :read-only="readOnly" :required="required">
    <Signature.Root @draw-end="handleDrawEnd">
      <Signature.Label>Label</Signature.Label>
      <Signature.Control>
        <Signature.Segment />
        <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
        <Signature.Guide />
      </Signature.Control>
      <Signature.HiddenInput :value="imageUrl" />
    </Signature.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

'use client'

import type { DrawEndDetails } from '@destyler-ui/react'
import { useState } from 'react'
import { Field } from '@destyler-ui/react'
import { Signature } from '@destyler-ui/react'

export function WithField(props: Field.RootProps) {
  const [imageUrl, setImageUrl] = useState('')

  const handleDrawEnd = async (details: DrawEndDetails) => {
    setImageUrl(await details.getDataUrl('image/png'))
  }

  return (
    <Field.Root {...props}>
      <Signature.Root onDrawEnd={handleDrawEnd}>
        <Signature.Label>Label</Signature.Label>
        <Signature.Control>
          <Signature.Segment />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
        <Signature.HiddenInput value={imageUrl} />
      </Signature.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { Signature } from '@destyler-ui/solid/signature'
import { createSignal } from 'solid-js'

export function WithField(props: Field.RootProps) {
  const [value, setValue] = createSignal('')

  return (
    <Field.Root {...props}>
      <Signature.Root
        onDrawEnd={details => details.getDataUrl('image/png').then(url => setValue(url))}
      >
        <Signature.Label>Label</Signature.Label>
        <Signature.Control>
          <Signature.Segment />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
        <Signature.HiddenInput value={value()} />
      </Signature.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends FieldRootProps {}
</script>

<script lang="ts">
  import type { DrawEndDetails } from '@destyler-ui/svelte'
  import { Field } from '@destyler-ui/svelte'
  import { Signature } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
  let imageUrl = $state('')

  async function handleDrawEnd(details: DrawEndDetails) {
    imageUrl = await details.getDataUrl('image/png')
  }
</script>

<Field.Root {...props}>
  <Signature.Root onDrawEnd={handleDrawEnd}>
    <Signature.Label>Label</Signature.Label>
    <Signature.Control>
      <Signature.Segment />
      <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
      <Signature.Guide />
    </Signature.Control>
    <Signature.HiddenInput value={imageUrl} />
  </Signature.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { Signature, useSignature } from '@destyler-ui/vue'

const signaturePad = useSignature()
</script>

<template>
  <button @click="signaturePad.clear()">Clear</button>

  <Signature.RootProvider :value="signaturePad">
    <Signature.Label>Sign below</Signature.Label>
    <Signature.Control>
      <Signature.Segment />
      <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
      <Signature.Guide />
    </Signature.Control>
  </Signature.RootProvider>
</template>

'use client'

import { Signature, useSignature } from '@destyler-ui/react'

export function RootProvider() {
  const signature = useSignature()

  return (
    <>
      <button onClick={() => signature.clear()}>Clear</button>
      <Signature.RootProvider value={signature}>
        <Signature.Label>Sign below</Signature.Label>
        <Signature.Control>
          <Signature.Segment />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
      </Signature.RootProvider>
    </>
  )
}

import { Signature, useSignature } from '@destyler-ui/solid/signature'

export function RootProvider() {
  const signature = useSignature()

  return (
    <>
      <button onClick={() => signature().clear()}>Clear</button>

      <Signature.RootProvider value={signature}>
        <Signature.Label>Sign below</Signature.Label>
        <Signature.Control>
          <Signature.Segment />
          <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
          <Signature.Guide />
        </Signature.Control>
      </Signature.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Signature, useSignature } from '@destyler-ui/svelte'

  const id = $props.id()
  const signature = useSignature({ id })
</script>

<button type="button" onclick={() => signature().clear()}>Clear</button>

<Signature.RootProvider value={signature}>
  <Signature.Label>Sign below</Signature.Label>
  <Signature.Control>
    <Signature.Segment />
    <Signature.ClearTrigger>Clear</Signature.ClearTrigger>
    <Signature.Guide />
  </Signature.Control>
</Signature.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the signature is disabled.
`drawing`	`'{ size: 2, simulatePressure: true }'`	`signature.DrawingOptions` 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 elements. Useful for composition.
`name`	—	`string` The name of the signature. Useful for form submission.
`readOnly`	—	`false \| true` Whether the signature is read-only.
`required`	—	`false \| true` Whether the signature is required.
`translations`	—	`signature.IntlTranslations` The translations of the signature. Useful for internationalization.

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Guide

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Segment

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the signature pad is disabled.
`drawing`	`'{ size: 2, simulatePressure: true }'`	`signature.DrawingOptions` The drawing options.
`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.
`onDraw`	—	`(details: signature.DrawDetails) => void` Callback when the signature pad is drawing.
`onDrawEnd`	—	`(details: DrawEndDetails) => void` Callback when the signature pad is done drawing.
`readOnly`	—	`false \| true` Whether the signature pad is read-only.
`required`	—	`false \| true` Whether the signature pad is required.
`translations`	—	`signature.IntlTranslations` The translations of the signature pad. Useful for internationalization.

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseSignatureContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Guide

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseSignatureReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Segment

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the signature pad is disabled.
`drawing`	`'{ size: 2, simulatePressure: true }'`	`signature.DrawingOptions` The drawing options.
`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.
`onDraw`	—	`(details: DrawDetails) => void` Callback when the signature pad is drawing.
`onDrawEnd`	—	`(details: DrawEndDetails) => void` Callback when the signature pad is done drawing.
`readOnly`	—	`false \| true` Whether the signature pad is read-only.
`required`	—	`false \| true` Whether the signature pad is required.
`translations`	—	`signature.IntlTranslations` The translations of the signature pad. Useful for internationalization.

ClearTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseSignatureContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Guide

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`(props: (userProps?: solid_js384.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseSignatureReturn`
`asChild`	—	`(props: (userProps?: solid_js384.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Segment

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js384.JSX.SvgSVGAttributes<SVGSVGElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`disabled`	—	`false \| true` Whether the signature pad is disabled.
`drawing`	`'{ size: 2, simulatePressure: true }'`	`import("/home/runner/work/ui/ui/packages/svelte/dist/index").SignatureDrawingOptions` The drawing options.
`id`	—	`string`
`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.
`onDraw`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SignatureDrawDetails) => void` Callback when the signature pad is drawing.
`onDrawEnd`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").DrawEndDetails) => void` Callback when the signature pad is done drawing.
`readOnly`	—	`false \| true` Whether the signature pad is read-only.
`required`	—	`false \| true` Whether the signature pad is required.
`translations`	—	`IntlTranslations \| undefined` The translations of the signature pad. Useful for internationalization.

ClearTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseSignatureContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Guide

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

HiddenInput

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseSignatureReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Segment

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"svg">]>`
`children`	—	`Snippet<[]> \| undefined`