New to KendoReact? Start a free 30-day trial

SignatureProps

Interface

Represents the props of the KendoReact Signature component.

Definition

Package:@progress/kendo-react-inputs

Properties

ariaDescribedBy?

string

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

Example:

jsx

<Signature ariaDescribedBy="description-id" />

ariaLabel?

string

Specifies the accessible label of the Signature.

Example:

jsx

<Signature ariaLabel="Signature field" />

ariaLabelledBy?

string

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

Example:

jsx

<Signature ariaLabelledBy="label-id" />

backgroundColor?

string

Specifies the background color of the Signature.

Example:

jsx

<Signature backgroundColor="lightgray" />

className?

string

Adds custom CSS classes to the Signature.

Example:

jsx

<Signature className="custom-class" />

color?

string

Specifies the stroke color of the Signature.

Example:

jsx

<Signature color="blue" />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<Signature dir="rtl" />

disabled?

boolean

Disables the Signature when set to true.

Example:

jsx

<Signature disabled={true} />

exportScale?

number

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.

Default:

Example:

jsx

<Signature exportScale={2} />

fillMode?

"flat" | "solid" | "outline"

Configures the fill mode of the Signature.

Default:

undefined (theme-controlled)

Example:

jsx

<Signature fillMode="solid" />

height?

number

Specifies the height of the Signature in pixels.

Example:

jsx

<Signature height={300} />

hideLine?

boolean

Hides the dotted line in the background.

Default:

false

Example:

jsx

<Signature hideLine={true} />

id?

string

Specifies the id of the Signature.

Example:

jsx

<Signature id="signature-component" />

inputStyle?

CSSProperties

Represents the input element style HTML attribute.

Example:

jsx

<Signature inputStyle={{ padding: '10px' }} />

maximizable?

boolean

Enables the maximizable feature of the Signature.

Example:

jsx

<Signature maximizable={true} />

name?

string

Specifies the name of the Signature input.

Example:

jsx

<Signature name="signature" />

onBlur?

(event: SignatureBlurEvent) => void

Fires when the Signature is blurred.

Parameters:eventSignatureBlurEvent

Example:

jsx

<Signature onBlur={(event) => console.log('Blurred')} />

onChange?

(event: SignatureChangeEvent) => void

Fires when the value of the Signature changes.

Parameters:eventSignatureChangeEvent

Example:

jsx

<Signature onChange={(event) => console.log(event.value)} />

onClose?

(event: SignatureCloseEvent) => void

Fires when the Signature popup is closed.

Parameters:eventSignatureCloseEvent

Example:

jsx

<Signature onClose={(event) => console.log('Popup closed')} />

onFocus?

(event: SignatureFocusEvent) => void

Fires when the Signature is focused.

Parameters:eventSignatureFocusEvent

Example:

jsx

<Signature onFocus={(event) => console.log('Focused')} />

onOpen?

(event: SignatureOpenEvent) => void

Fires when the Signature popup is opened.

Parameters:eventSignatureOpenEvent

Example:

jsx

<Signature onOpen={(event) => console.log('Popup opened')} />

open?

boolean

Sets the open state of the Signature popup.

Example:

jsx

<Signature open={true} />

popupScale?

number

The scale factor for the popup.

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

Default:

Example:

jsx

<Signature popupScale={1.5} />

readOnly?

boolean

Sets the Signature to read-only mode.

Example:

jsx

<Signature readOnly={true} />

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

rounded?

"small" | "medium" | "large" | "none"

Configures the roundness of the Signature.

Default:

undefined (theme-controlled)

Example:

jsx

<Signature rounded="medium" />

size?

"small" | "medium" | "large"

Configures the size of the Signature.

Default:

undefined (theme-controlled)

Example:

jsx

<Signature size="large" />

smooth?

boolean

Enables smoothing of the signature lines.

Example:

jsx

<Signature smooth={true} />

strokeWidth?

number

Specifies the stroke width of the Signature.

Example:

jsx

<Signature strokeWidth={2} />

style?

CSSProperties

Represents the style HTML attribute.

Example:

jsx

<Signature style={{ border: '1px solid black' }} />

tabIndex?

number

Specifies the tabIndex of the Signature.

Example:

jsx

<Signature tabIndex={0} />

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 as a Data URL.

Example:

jsx

<Signature value="data:image/png;base64,..." />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

width?

number

Specifies the width of the Signature in pixels.

Example:

jsx

<Signature width={500} />