This component allows you to seamlessly add drawing signature functionality to your website or mobile app. It supports JS+HTML, Vue and React.
import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'
export function App() {
return (
<div className="app">
<SignatureMaker
onSave={(data) => console.log(data)}
onChange={(data) => console.log(data)}
/>
</div>
);
}
Set
false
to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.
Default false
Set
false
to disable text signature input panel.
Default true
Set
false
to disable drawing signature panel.
Default true
Set
false
to disable uploading signature image panel.
Default true
Set
false
to disable color selection. Only black color will be available.
Default true
Set
false
to disable the submit button. Any changes will be available as a base64 string in the
change
event. Custom event 'save' will be triggered on clicking the submit button.
Default true
Default Submit
Custom CSS class for the control buttons container.
Example flex gap-2
Custom CSS styles for the control buttons container. Default CSS styles will be disabled
Default display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;
Custom CSS class for the save button
Example btn btn-neutral text-white text-base w-full
Custom CSS styles for the save button
Default color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;
Custom CSS class for the disabled save button.
Example btn-disabled
Custom CSS styles for the disabled save button.
Default background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;
Default Undo
Custom CSS class for the undo button.
Example btn btn-outline btn-sm font-medium
Custom CSS styles for the undo button.
Default color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
Custom text for the clear button.
Default Clear
Custom CSS class for the clear button.
Example btn btn-outline btn-sm font-medium
Custom CSS styles for the clear button.
Default color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
Custom placeholder text for the text input field.
Default Type signature here
Custom CSS class for the text input field.
Example input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl
Custom CSS styles for the text input field.
Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;
Custom CSS class for the canvas element.
Example bg-white border border-base-300 rounded-2xl w-full
Custom CSS styles for the canvas element.
Default display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;
Custom CSS class for the type buttons container.
Example flex gap-2 mb-4 justify-center
Custom CSS styles for the type buttons container.
Default margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
Custom text for the draw type button.
Default Draw
Custom CSS class for the draw type button.
Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
Custom CSS styles for the draw type button.
Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
Custom CSS class for the active draw type button.
Example bg-neutral text-white font-semibold
Custom CSS styles for the active draw type button.
Default color: #fff; background-color: #222222; font-weight: 500;
Custom text for the text type button.
Default Type
Custom CSS class for the text type button.
Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
Custom CSS styles for the text type button.
Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
Custom CSS class for the active text type button.
Example bg-neutral text-white font-semibold
Custom CSS styles for the active text type button.
Default color: #fff; background-color: #222222; font-weight: 500;
Custom text for the upload type button.
Default Upload
Custom CSS class for the upload type button.
Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
Custom CSS styles for the upload type button.
Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
Custom CSS class for the active upload type button.
Example bg-neutral text-white font-semibold
Custom CSS styles for the active upload type button.
Default color: #fff; background-color: #222222; font-weight: 500;
Custom font URL to be used for the text signature input panel.
Default https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff
Function to be called when changes are made to the signature.
Example (data) => { console.log(data) }
Function to be called on saving changes of the signature. withSubmit attribute should be enabled to trigger this function.
Example (data) => { console.log(data) }