Skills

syncfusion-aspnetcore-textbox

Installation
SKILL.md

Implementing TextBox in ASP.NET Core

The TextBox is a fundamental input component that enables users to enter text data with advanced features like floating labels, validation states, adornments (icons/buttons), and accessibility support. This skill guides you through implementing TextBox in ASP.NET Core applications using Syncfusion's tag helper syntax.

When to Use This Skill

Use this skill when you need to:

  • Create text input fields with floating labels and placeholder support
  • Add validation visual states (success, error, warning)
  • Display icons or buttons within text inputs (prepend/append templates)
  • Build multiline textarea fields with auto-grow behavior
  • Implement password fields with visibility toggles
  • Create accessible forms following WCAG 2.2 Level AA standards
  • Integrate TextBox with ASP.NET Core models and data binding

Key Features

Feature Use Case
Floating Labels Professional form UI that floats labels above input on focus
Validation States Visual feedback with error, warning, and success classes
Adornments Add icons, buttons, or text before/after the input
Multiline Mode Create textarea fields with optional auto-grow
Icon Groups Combine icons with floating labels for better UX
WCAG Compliance Built-in accessibility support for screen readers and keyboard navigation
Data Binding Two-way binding with ASP.NET Core models
Event Handling Respond to Created, Change, Input, Focus, and Blur events

Documentation Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Prerequisites and system requirements
  • Installing Syncfusion.EJ2.AspNet.Core NuGet package
  • Configuring TagHelper in _ViewImports.cshtml
  • Adding stylesheets and script resources via CDN
  • Registering the script manager
  • Creating your first TextBox
  • Running and testing the application

Tag Helper Syntax

📄 Read: references/tag-helper-syntax.md

  • TextBox tag helper structure and properties
  • Common properties (Placeholder, Value, Readonly, Disabled)
  • Data binding with ASP.NET Core models
  • Event binding in tag helpers
  • Tag helper vs programmatic approaches
  • Best practices and performance tips

Validation States

📄 Read: references/validation-states.md

  • Implementing error, warning, and success validation states
  • CSS class-based validation styling
  • Server-side validation integration
  • Client-side validation patterns
  • Real-world form validation examples
  • Accessibility for validation messages

Adornments and Icons

📄 Read: references/adornments-and-icons.md

  • Adding prepend and append templates
  • Icon integration (FontAwesome, Material Icons, Bootstrap Icons)
  • Password visibility toggle implementation
  • Clear button functionality
  • Unit indicators (currency, measurements)
  • Complex adornment patterns

Floating Labels

📄 Read: references/floating-labels.md

  • FloatLabelType property (Auto, Always, Never)
  • Styling and animating floating labels
  • Accessibility with floating labels
  • Dynamic label positioning patterns
  • Edge cases and troubleshooting

Multiline TextBox

📄 Read: references/multiline-textarea.md

  • Converting TextBox to textarea
  • Multiline property configuration
  • Character counting implementation
  • Auto-grow and resize behavior
  • Placeholder in multiline mode
  • Validation in multiline TextBox
  • Accessibility for textarea fields

Advanced Patterns

📄 Read: references/advanced-patterns.md

  • Data binding with HTML helpers
  • Programmatic TextBox creation with C# and JavaScript
  • Event handling patterns (Created, Change, Input, Focus, Blur)
  • Template-based rendering
  • Integration with ASP.NET Core Forms and Validation
  • Model binding examples
  • Security: XSS prevention and input sanitization

Quick Start Example

Basic TextBox with Floating Label (Tag Helper)

@* Pages/Index.cshtml *@
<div class="form-group">
    <ejs-textbox id="email" 
                  placeholder="Enter email" 
                  floatLabelType="Auto"
                  type="email">
    </ejs-textbox>
</div>

In _ViewImports.cshtml (one-time setup)

@addTagHelper *, Syncfusion.EJ2

In _Layout.cshtml (one-time setup)

<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
</head>
<body>
    @RenderBody()
    
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

Result

User sees:

  1. Input field with placeholder "Enter email"
  2. When focused or filled, label "email" floats above the input
  3. Email validation applied automatically

Common Patterns

Pattern 1: Contact Form with Validation States

<form asp-action="Submit">
    <div class="form-group">
        <ejs-textbox id="name" 
                      placeholder="Full Name" 
                      floatLabelType="Auto"
                      cssClass="e-success">
        </ejs-textbox>
        <small class="d-block mt-2">Name is valid</small>
    </div>

    <div class="form-group">
        <ejs-textbox id="email" 
                      placeholder="Email Address" 
                      floatLabelType="Auto"
                      cssClass="e-error">
        </ejs-textbox>
        <small class="text-danger d-block mt-2">Invalid email format</small>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Pattern 2: Password Field with Visibility Toggle

<div class="form-group">
    <ejs-textbox id="password" 
                  type="password"
                  placeholder="Password" 
                  floatLabelType="Auto"
                  appendTemplate="<span class='e-input-group-icon' onclick='togglePassword()'>👁️</span>">
    </ejs-textbox>
</div>

<script>
    function togglePassword() {
        const input = document.getElementById('password');
        const type = input.type === 'password' ? 'text' : 'password';
        input.type = type;
    }
</script>

Pattern 3: Search Input with Icon

<div class="form-group">
    <ejs-textbox id="search" 
                  placeholder="Search products..." 
                  prependTemplate="<span class='e-input-group-icon'>🔍</span>"
                  floatLabelType="Auto">
    </ejs-textbox>
</div>

Key Properties Reference

Property Type Default Purpose
id string - Unique identifier for the TextBox
value string - Initial text value
placeholder string - Placeholder text displayed when empty
floatLabelType FloatLabelType Never Label animation (Auto, Always, Never)
multiline bool false Enable multiline textarea mode
readonly bool false Prevent user input while allowing focus
disabled bool false Disable input completely
cssClass string - CSS classes (e.g., "e-error", "e-warning", "e-success")
prependTemplate string - HTML template prepended to input
appendTemplate string - HTML template appended to input
type string "text" Input type (text, email, password, number, etc.)

Common Use Cases

Use Case 1: Contact Form Builder

Create a professional contact form with floating labels, validation, and email/phone patterns:

  • When: Building user contact information collection
  • Reference: validation-states.md
  • Key Features: Floating labels, validation states, pattern validation

Use Case 2: Search Interface

Implement a search box with prepended icon and dynamic filtering:

  • When: Building product/content search features
  • Reference: adornments-and-icons.md
  • Key Features: Icon adornments, event handling

Use Case 3: Feedback/Comments Section

Build textarea for user comments with character counting and auto-grow:

  • When: Creating feedback forms, comment sections
  • Reference: multiline-textarea.md
  • Key Features: Multiline mode, character limit, auto-grow

Use Case 4: Accessible Registration Form

Create a registration form following WCAG 2.2 Level AA standards:

  • When: Building public-facing registration forms
  • Reference: advanced-patterns.md
  • Key Features: ARIA labels, keyboard navigation, screen reader support

Next Steps:

  1. Review getting-started.md to set up your first TextBox
  2. Choose your use case and follow the corresponding reference guide
  3. Copy code examples and adapt to your project
  4. Refer to advanced-patterns.md for complex scenarios
Related skills

More from syncfusion/aspnetcore-ui-components-skills

Installs
11
Repository
syncfusion/aspn…s-skills
First Seen
Mar 31, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykWarn