Drawing area
The Drawing area component is used to allow users to draw in a designated space and attach that drawing to the app.
Example
You can use the Drawing area component to create an app with a drawing area at the end of a form. In this app:
- Users can fill in the different inputs.
- Users can attach a drawing.
Note: The Drawing area component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Drawing area component properties are available:
Main
| Property | Description |
|---|---|
| Component ID | Enter a unique name for the component. See templating in components for more details. |
| Label | Enter the name you want to be displayed above the component. |
| Button text | Enter the name you want to be displayed inside the button. When the user selects the button, it will clear the drawing area. |
Styles
| Property | Description |
|---|---|
| Size | Select the size from the drop-down menu. |
Validation
| Property | Description |
|---|---|
| Required field | Turn on to make the component mandatory. By default, the component is optional. |
| Add rule | Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. See add rules to trigger properties for more details. |
| Message | Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown. |
Interactions
| Property | Description |
|---|---|
| Disabled | Select the checkbox to disable the component in the end-user app. |
| Disabled rule | You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. |
Note: See add rules to trigger properties for more information on setting rules to these properties.
HTML
| Property | Description |
|---|---|
| Aria label | Enter a text designed to help assistive technology attach a label to the component. |