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

Simple code editor with basic configuration.

Basic Code Editor (Optional)

Enter your code here

A simple code editor with basic features

---

---

Form Data:

{}

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.