syncfusion-javascript-textbox
Implementing TextBox
The TextBox is a lightweight input control that accepts text and allows customization with floating labels, adornments, validation states, and styling. This skill guides you through implementing and configuring TextBox components for various use cases.
When to Use This Skill
Use this skill when you need to:
- Create basic text inputs with placeholders and initial values
- Add floating labels that animate when focused or filled
- Enhance inputs with adornments (icons, buttons, prefixes/suffixes)
- Implement validation states (error, warning, success)
- Build multiline text areas with auto-resizing
- Apply custom styling with sizing variations and themes
- Support accessibility with ARIA attributes and keyboard navigation
- Add interactive features like clear buttons or password toggles
Control Overview
The TextBox is essential for collecting user input in modern applications. It provides:
More from syncfusion/javascript-ui-controls-skills
syncfusion-javascript-gantt-chart
Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling, columns, resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing, and export functionality (Excel/PDF).
10syncfusion-javascript-maps
Guide to implementing Syncfusion Maps in TypeScript and JavaScript. Use this skill whenever the user needs to create interactive maps, add markers, visualize geographical data, work with map layers, apply color mapping, add annotations, configure legends, or handle map interactions and events. Works with TypeScript (module-based) and JavaScript (CDN/ES5).
9syncfusion-javascript-accumulation-chart
Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5).
9syncfusion-javascript-rich-text-editor
Implements the Syncfusion Rich Text Editor and Markdown Editor using TypeScript (ej2-richtexteditor). Supports both HTML (WYSIWYG) and Markdown modes via editorMode on a single RichTextEditor class. Use this skill for toolbar setup, image/media/table handling, inline or iframe editing, AI assistant, smart editing, import/export, and all content editor scenarios.
9syncfusion-javascript-chart
Implements Syncfusion JavaScript chart controls (Line, Area, Bar, Column, Pie, Polar, Radar, Waterfall, Stock). Use when building interactive data visualizations, dashboards, or real-time charts. Covers series and axes configuration, styling, animations, exporting, and technical indicators. Works with TypeScript (webpack/modules) and JavaScript (CDN/ES5).
9syncfusion-javascript-dropdowntree
Implement Syncfusion Dropdown Tree control to display hierarchical data in dropdown format. Use this skill when implementing single or multiple value selection from hierarchical data, enabling checkboxes with dependent parent-child states, lazy-loading large datasets, customizing tree items with templates, and configuring multi-language support. Comprehensive coverage of properties, methods, events, data binding modes, checkbox selection, templates, and accessibility features.
8