Code
The Code component allows users to input multi-line code snippets with configurable options such as fullscreen, language, size, and showSuggestions. These properties enable flexible integration and enhanced usability for various use cases.
Examples
Field Properties
Detailed descriptions of each field property are essential for understanding how to configure and utilize the Code component effectively.
| Name | Description | Type |
|---|---|---|
| displayName | Label shown above the code field | string |
| displayType | Type of the field to be displayed | string |
| placeholder | Hint shown in the code field | string |
| required | Indicates if the field is mandatory | boolean |
| description | Additional description below the code field | string |
| fullscreen | Toggle for enabling fullscreen mode | boolean |
| language | Programming language of the code snippet | string |
| size | Size of the code field (xs, sm, md, lg) | enum |
| showSuggestions | Toggle to show or hide suggestions | boolean |
| showCopyToClipboard | Option to enable copy to clipboard functionality | boolean |
| showInfoIcon | Toggle to show or hide an informational icon | boolean |
| allowDynamic | Enable static and dynamic code snippets for custom suggestions | boolean |
| showHtmlPreview | Toggle to display a preview of HTML rendering the code snippet | boolean |
| height | Set the height of the code field (note: you need to pass size property along with height) | string |
| readOnly | A readonly field is not editable and value cannot be changed | boolean |
Field Properties - Validation Details
The validation settings within the Code component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:
| Property | Description |
|---|---|
| required | Boolean value that specifies whether entering data into the field is mandatory. |
| infoDetail | Provides additional information related to the field. Can be used to display messages like hints or guidelines to users. |
| requiredDetail | Contains the specific properties related to required validation, such as custom error messages. |
| minLength | Specifies the minimum number of characters allowed in the input. |
| maxLength | Specifies the maximum number of characters allowed in the input. |
| min | Specifies the minimum value allowed for number inputs, with support for dynamic values. |
| max | Specifies the maximum value allowed for number inputs, also supporting dynamic conditions. |
| pattern | A regex pattern that the input must match to be considered valid. |
| validate | A function for custom validation logic, which can return a boolean or an error message. |