CodeEditor

The CodeEditor provides a text input field that is specifically designed for editing code. It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping. Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.

OverviewPropertiesUsage

When to use

• Users need to write, edit, or read code with syntax highlighting for programming languages.
• The input requires features like line numbers, code folding, bracket matching, or multi-line editing with proper indentation.

When not to use

• Short snippets of read-only code. Use CodeSnippet instead.
• Users need to write queries using DQL syntax. Use DQLEditor instead.
• Plain text inputs without code syntax or structure. Use TextArea instead.
• Inputs that are single lines of text or short-form content. Use TextInput instead.
• To filter or search data with structured syntax. Use FilterField instead.

Content guidelines

Label (optional)

Add a label that describes the purpose or context for the input. It should be descriptive but short (1-2 words).

• Do: Custom conditions
• Do: JSON snippet
• Don't: CodeEditor

Placeholder (required)

Generic default text: Add code Default text for JSON: Add JSON Default text for TypeScript: Add TypeScript Default text for Markdown: Add Markdown Default text for YAML: Add YAML

The default placeholder text works for most use cases. Optionally, you can customize the placeholder text for more specificity to your use case.

Use hint for essential information

Don't use the placeholder for information users need to complete the task, as placeholders disappear as soon as users start typing.

Hint (optional)

Use the hint for additional information that helps users add valid code and avoid errors. Provide any error messages with the hint.

• Keep the hint short.
• Only add periods after sentences.