Comment on page

Input Pen

An input field to capture a signature and save it as an image.

Overview
The Input Pen component allows users to input handwritten text or drawings using a stylus or their finger (on mobile). It typically consists of a blank canvas or input field and tools or options for customizing the handwriting or drawing experience. The user can use the stylus or finger to write or draw on the canvas or input field, and the component will translate their handwriting or drawing into digital text or lines.
The Input Pen component may include various features and elements, such as different pen styles or colors, erasing tools, and the ability to zoom in or out on the canvas or input field. It may also include formatting options like font size and alignment to help the handwritten text or drawings fit seamlessly into the interface.
Works on Desktop and Mobile
Tutorials
Name
Description
Image
​Add the custom toolbar​
This guide will show you how to add a custom toolbar to the signature pad screen.
​
​
​Create a Signature Pad​
This tutorial will guide you through creating a signature pad and how to save the signature as an image.
​
​
Changing the Properties
Choosing a mode
The Mode selection allows you to configure the default Input Pen mode. The Pen mode can be drawn, Paint, Ink or Erase. 
Choosing a variant
When the Hide Controls toggle is unchecked, you can display the toolbar at the bottom or the top of the drawing pad.
Add a signature pad
When the Show Signature Pad is activated, a signature line will be added at the bottom of the drawing area. It's helpful if you need to transform your drawing area into a signature pad.
Advanced options
Using Advanced options, you can:
Select buttons to be disabled in the toolbar
Set the drawing pen size
Disable the input pen interaction
Adding Interactions
No interactions are available
Styling the Input Pen
From the Styles panel, you can customize styling attributes for the Input Date Range: 
Header: to customize main label text
Size: to customize a specific size for the component
You can find the instructions for styling here.
Name
Description
Image
​Add the custom toolbar​
This guide will show you how to add a custom toolbar to the signature pad screen.
​
​
​Create a Signature Pad​
This tutorial will guide you through creating a signature pad and how to save the signature as a file.
​
​
Specifications
Attributes
Name
Type
Description
color
String
Color of the pen.
disabled
Boolean
If present, the input field is disabled and users cannot interact with it.
disabledButtons
String[]
Array of buttons to remove from the toolbar. Values include pen, paintbrush, eraser, ink, size, color, background, download, undo, redo, clear.
fieldLevelHelp
String
Help text detailing the purpose and function of the input.
hideControls
Boolean
If present, hide the tool bar.
label
String
Text label for the input.
mode
String
Current mode of input. Valid modes include draw, paint, ink and erase.
readOnly
Boolean
If present, the input field is read-only and cannot be edited by users.
required
Boolean
If present, the input field must be filled out before the form is submitted.
showSignaturePad
Boolean
If present, adds signature pad at the bottom of input. Also sets default drawing mode to ink.
size
String
Size of the pen.
value
String
Input value encoded as Base64. Ex: 'data:image/png;base64, …
variant
String
The variant changes the appearance of the toolbar. Accepted variant is bottom-toolbar and top-toolbar which causes the toolbar to be displayed below the box.
Events
 No events are available.
Styling Hooks
Name
Description
Height
To specify a specific height for the component
Width
To specify a specific width for the component
Text Color
Define a label text color if a label a present
Font Size
Define a label font size if a label a present
Font Style
Define a label font style if a label a present
Font Weight
Define a label font weight if a label a present

Name	Description	Image
Add the custom toolbar	This guide will show you how to add a custom toolbar to the signature pad screen.
Create a Signature Pad	This tutorial will guide you through creating a signature pad and how to save the signature as an image.

Name	Description	Image
Add the custom toolbar	This guide will show you how to add a custom toolbar to the signature pad screen.
Create a Signature Pad	This tutorial will guide you through creating a signature pad and how to save the signature as a file.

Name	Type	Description
`color`	String	Color of the pen.
`disabled`	Boolean	If present, the input field is disabled and users cannot interact with it.
`disabledButtons`	String[]	Array of buttons to remove from the toolbar. Values include pen, paintbrush, eraser, ink, size, color, background, download, undo, redo, clear.
`fieldLevelHelp`	String	Help text detailing the purpose and function of the input.
`hideControls`	Boolean	If present, hide the tool bar.
`label`	String	Text label for the input.
`mode`	String	Current mode of input. Valid modes include draw, paint, ink and erase.
`readOnly`	Boolean	If present, the input field is read-only and cannot be edited by users.
required	Boolean	If present, the input field must be filled out before the form is submitted.
`showSignaturePad`	Boolean	If present, adds signature pad at the bottom of input. Also sets default drawing mode to ink.
`size`	String	Size of the pen.
`value`	String	Input value encoded as Base64. Ex: 'data:image/png;base64, …
`variant`	String	The variant changes the appearance of the toolbar. Accepted variant is bottom-toolbar and top-toolbar which causes the toolbar to be displayed below the box.

Name	Description
Height	To specify a specific height for the component
Width	To specify a specific width for the component
Text Color	Define a label text color if a label a present
Font Size	Define a label font size if a label a present
Font Style	Define a label font style if a label a present
Font Weight	Define a label font weight if a label a present

Last modified 15d ago