---
title: "Signature capture field"
description: "Lets a user sign by drawing or by typing their name and choosing a font, chosen via a"
sidebar_label: "Signature capture field"
slug: /reference/components/signature-capture-field
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Signature capture field

Lets a user sign by drawing or by typing their name and choosing a font, chosen via a

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `SignatureCaptureFieldProps`  
**Story source:** [`demo/stories/Signaturecapturefield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Signaturecapturefield.stories.tsx)

## Live demo

<ComponentDemo name="Signature capture field" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `reflection` | Yes |  |
| `defaultMode` | `SignatureMode` |  | Which capture method is shown first when the field is empty. Ignored once  |
| `disabled` | `boolean` |  |  |
| `errorText` | `string` |  |  |
| `fonts` | `array` |  | Fonts offered in "type" mode. Defaults to the library's bundled signature fonts. When supplying a custom list, the consumer must load those font families themselves. |
| `fullWidth` | `boolean` |  | Stretches the draw pad to the full available width. |
| `helperText` | `string` |  |  |
| `nameLabel` | `string` |  | Label for the typed name input. Defaults to "Full name". |
| `onEnd` | `reflection` |  | Fired when the signer stops drawing — use to re-enable a parent ScrollView. |
| `onStart` | `reflection` |  | Fired when the signer starts drawing — use to disable a parent ScrollView. |
| `placeholder` | `string` |  | Placeholder for the typed name input. Defaults to "Type your full name". |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |
| `testIDs` | `FieldTestIDs` |  |  |
| `title` | `string` |  | Section title rendered above the field. Defaults to "Signature". |
| `value` | `SignatureCaptureValue` |  | Controlled value. When omitted the field starts empty in  |