SignatureProps

Represents the props of the KendoReact Signature component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) which will describe the component. jsx <Signature ariaDescribedBy="description-id" />
ariaLabel?	string		Specifies the accessible label of the Signature. jsx <Signature ariaLabel="Signature field" />
ariaLabelledBy?	string		Identifies the element(s) which will label the component. jsx <Signature ariaLabelledBy="label-id" />
backgroundColor?	string		Specifies the background color of the Signature. jsx <Signature backgroundColor="lightgray" />
className?	string		Adds custom CSS classes to the Signature. jsx <Signature className="custom-class" />
color?	string		Specifies the stroke color of the Signature. jsx <Signature color="blue" />
dir?	string		Represents the dir HTML attribute. jsx <Signature dir="rtl" />
disabled?	boolean		Disables the Signature when set to true. jsx <Signature disabled={true} />
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. jsx <Signature exportScale={2} />
fillMode?	"null" | "flat" | "solid" | "outline"		Configures the fill mode of the Signature. jsx <Signature fillMode="solid" />
height?	number		Specifies the height of the Signature in pixels. jsx <Signature height={300} />
hideLine?	boolean	false	Hides the dotted line in the background. jsx <Signature hideLine={true} />
id?	string		Specifies the id of the Signature. jsx <Signature id="signature-component" />
inputStyle?	React.CSSProperties		Represents the input element style HTML attribute. jsx <Signature inputStyle={{ padding: '10px' }} />
maximizable?	boolean		Enables the maximizable feature of the Signature. jsx <Signature maximizable={true} />
name?	string		Specifies the name of the Signature input. jsx <Signature name="signature" />
onBlur?	(event: SignatureBlurEvent) => void		Fires when the Signature is blurred. jsx <Signature onBlur={(event) => console.log('Blurred')} />
onChange?	(event: SignatureChangeEvent) => void		Fires when the value of the Signature changes. jsx <Signature onChange={(event) => console.log(event.value)} />
onClose?	(event: SignatureCloseEvent) => void		Fires when the Signature popup is closed. jsx <Signature onClose={(event) => console.log('Popup closed')} />
onFocus?	(event: SignatureFocusEvent) => void		Fires when the Signature is focused. jsx <Signature onFocus={(event) => console.log('Focused')} />
onOpen?	(event: SignatureOpenEvent) => void		Fires when the Signature popup is opened. jsx <Signature onOpen={(event) => console.log('Popup opened')} />
open?	boolean		Sets the open state of the Signature popup. jsx <Signature open={true} />
popupScale?	number	3	The scale factor for the popup. The Signature width and height will be multiplied by the scale when showing the popup. jsx <Signature popupScale={1.5} />
readOnly?	boolean		Sets the Signature to read-only mode. 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?	"null" | "small" | "large" | "medium"		Configures the roundness of the Signature. jsx <Signature rounded="medium" />
size?	"null" | "small" | "large" | "medium"		Configures the size of the Signature. jsx <Signature size="large" />
smooth?	boolean		Enables smoothing of the signature lines. jsx <Signature smooth={true} />
strokeWidth?	number		Specifies the stroke width of the Signature. jsx <Signature strokeWidth={2} />
style?	React.CSSProperties		Represents the style HTML attribute. jsx <Signature style={{ border: '1px solid black' }} />
tabIndex?	number		Specifies the tabIndex of the Signature. 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. jsx <Signature value="data:image/png;base64,..." />
width?	number		Specifies the width of the Signature in pixels. jsx <Signature width={500} />