• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Inputs / API / SignatureProps / 

SignatureProps

Represents the props of the KendoReact Signature component.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

ariaLabel?

string

The accessible label of the component.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

backgroundColor?

string

The background color of the signature.

Accepts CSS color names and hex values.

The default value is determined by the theme $kendo-input-bg variable.

className?

string

Sets a class of the Signature DOM element.

color?

string

The stroke color of the signature.

Accepts CSS color names and hex values.

The default value is determined by the theme $kendo-input-text variable.

dir?

string

Represents the dir HTML attribute.

disabled?

boolean

Determines whether the Signature is in its disabled state.

exportScale?

number

2

The scale factor for the exported image.

The Signature width and height will be multiplied by the scale when converting the signature to an image.

fillMode?

"null" | "flat" | "solid" | "outline"

solid

Configures the fillMode of the Signature.

The available options are:

  • solid
  • outline
  • flat
  • null—Does not set a fillMode className.

height?

number

Specifies the height of the Signature in pixels.

hideLine?

boolean

false

A flag indicating whether the dotted line should be displayed in the background.

id?

string

Sets the id of the Signature DOM element.

inputStyle?

React.CSSProperties

Represents the input element style HTML attribute.

maximizable?

boolean

true

A flag indicating if the signature can be maximized.

name?

string

Specifies the name of the Signature input.

onBlur?

(event: SignatureBlurEvent) => void

The event handler that will be fired when Signature is blurred.

onChange?

(event: SignatureChangeEvent) => void

Determines the event handler that will be fired when the user edits the value.

onClose?

(event: SignatureCloseEvent) => void

The event handler that will be fired when Signature popup is closed.

onFocus?

(event: SignatureFocusEvent) => void

The event handler that will be fired when Signature is focused.

onOpen?

(event: SignatureOpenEvent) => void

The event handler that will be fired when Signature popup is open.

open?

boolean

Sets the open and close state of the Signature.

popupScale?

number

3

The scale factor for the popup.

The Signature width and height will be multiplied by the scale when showing the popup.

readOnly?

boolean

Determines whether the Signature is in its read-only state.

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

rounded?

"null" | "small" | "large" | "medium"

medium

Configures the roundness of the Signature.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a rounded className.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the Signature.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

smooth?

boolean

false

A flag indicating whether to smooth out signature lines.

strokeWidth?

number

1

The stroke width of the signature.

style?

React.CSSProperties

Represents the style HTML attribute.

tabIndex?

number

Sets the tabIndex property of the Signature.

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

string

Specifies the value of the Signature.

The value is an image encoded as a Data URL.

width?

number

Specifies the width of the Signature in pixels.

In this article

Not finding the help you need?

Contact Support