Syncfusion Angular Inputs

Implementing Syncfusion Angular Inputs

Uploader

The Syncfusion Angular Uploader (ejs-uploader) is a full-featured file upload component that supports asynchronous uploads, chunk uploading of large files, drag-and-drop, clipboard paste, directory upload, file validation, templates, form integration, JWT authentication, and comprehensive event handling.

Component Overview

The Syncfusion Angular Uploader provides:

• Async upload modes: Auto upload (default) or manual upload with action buttons
• Chunk upload: Split large files into configurable byte-size chunks with retry logic
• Sequential upload: Process files one at a time to reduce server traffic
• File sources: Browse dialog, drag-and-drop, clipboard paste, directory selection
• Validation: File type (extensions), min/max size, custom count limits, duplicate prevention
• Templates: Customize the file list item structure; build fully custom upload UIs
• Form support: HTML form submission, template-driven forms (ngModel), reactive forms (FormGroup)
• Accessibility: WCAG 2.2, Section 508, keyboard navigation, screen reader support
• Localization: Customize all static text via L10n

Documentation & Navigation Guide

⚠️ Agentic use note: This guide links to multiple reference documents. AI agents should read only the sections relevant to the task at hand — do not chain through all references automatically. Follow least-privilege reading: fetch only what is needed.

Getting Started

📄 Read: references/getting-started.md

• Installation of @syncfusion/ej2-angular-inputs ⚠️ Always verify the package version and integrity before running `npm install` in production pipelines (supply-chain hygiene).
• Package setup, CSS imports, and Angular standalone component usage
• Adding the <ejs-uploader> component
• Configuring async settings (saveUrl, removeUrl)
• Handling success and failure events
• Adding a custom drop area

Asynchronous Upload

📄 Read: references/async-upload.md

• Multiple and single file upload modes (multiple property)
• Save action configuration and server-side handling
• Remove action and postRawFile usage
• Auto upload vs manual upload (autoUpload property)
• Sequential upload (sequentialUpload)
• Preloaded files (files property)
• Adding custom HTTP headers to upload requests

Chunk Upload

📄 Read: references/chunk-upload.md

• Enabling chunk upload via asyncSettings.chunkSize
• Pause, resume, and cancel chunk uploads
• Retry configuration (retryCount, retryAfterDelay)
• chunkSuccess and chunkFailure events
• Server-side chunk assembly implementation

File Validation

📄 Read: references/validation.md

• Restricting file types with allowedExtensions
• Min/max file size constraints (minFileSize, maxFileSize)
• Limiting upload count via the selected event
• Preventing duplicate file uploads
• MIME type validation before upload
• Image/* validation on drag-and-drop

File Sources

📄 Read: references/file-sources.md

• Paste images from clipboard
• Directory (folder) upload with directoryUpload
• Drag-and-drop with built-in and custom drop areas
• Custom drop area styling (.e-upload-drag-hover)
• Triggering file browse from an external button

Templates & Custom UI

📄 Read: references/templates-and-custom-ui.md

• File list template with the template property
• Building a completely custom upload UI (hiding default list with showFileList)
• Customizing action buttons with HTML elements (buttons property)
• Customizing the progress bar appearance
• Preview images before uploading
• Resize images before uploading to server

Form Integration

📄 Read: references/form-integration.md

• Using Uploader inside HTML forms (synchronous submission)
• Template-driven forms with ngModel
• Reactive forms with FormGroup
• Required field validation (required attribute)
• Reset behavior with form reset

Styling & Appearance

📄 Read: references/styling-and-appearance.md

• Customizing the uploader wrapper dimensions
• Styling the browse button
• Customizing the drop area text
• Customizing the file list container
• Hiding the default drop area
• CSS class reference for key Uploader elements

Accessibility & Localization

📄 Read: references/accessibility-and-localization.md

• WCAG 2.2, Section 508, keyboard shortcuts
• Screen reader and RTL support
• Localizing all static labels and messages with L10n

Advanced How-To Patterns

📄 Read: references/advanced-patterns.md

• Upload files programmatically with the upload() method
• Invisible (background) upload
• Adding additional form data with customFormData
• JWT authentication for upload/remove requests
• Show confirmation dialog before removing files
• Get total size of selected files
• Sort selected files in the file list
• Open and edit uploaded files from the server
• Convert uploaded images to binary format

API Reference

📄 Read: references/api.md

• Complete properties, methods, and events reference
• AsyncSettingsModel, ButtonsPropsModel, FilesPropModel
• All event argument types and their fields

Quick Start Example

Minimal file uploader with async upload (Angular 21+ standalone):

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
    removeUrl: 'https://your-api/upload/remove' // Replace with your actual endpoint
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS Theme Setup (styles.css):

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Auto Upload with Drag-and-Drop

// Automatically uploads dropped or browsed files
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

Pattern 2: Chunk Upload for Large Files

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// In component:
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
  removeUrl: 'https://your-api/upload/remove', // Replace with your actual endpoint
  chunkSize: 500000  // 500 KB chunks
};

Pattern 3: Validated Upload (Type + Size)

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

Pattern 4: Preloaded Files

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// In component:
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

Pattern 5: JWT-Authenticated Upload

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

// ⚠️ Never hardcode tokens — always retrieve from a secure auth service (e.g., Angular AuthService or OAuth library).
// ⚠️ Always transmit tokens over HTTPS only. Never pass tokens as URL query parameters.
addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

Key Properties

Key Events

Key Methods

Common Use Cases

Use Case 1: Profile Photo Upload

• multiple="false", allowedExtensions=".jpg,.png,.gif,.webp", maxFileSize=5000000
• Use selected event to preview before upload
• Auto upload with progress indicator

Use Case 2: Document Upload Portal

• Multiple files, allowedExtensions=".pdf,.doc,.docx,.xlsx"
• Chunk upload for large files with pause/resume
• Sequential upload to manage server load

Use Case 3: Image Gallery Batch Upload

• Multiple files, directory upload enabled
• Preview thumbnails using selected event + FileReader
• Sort by file name before upload

Use Case 4: Secure File Upload (API-Authenticated)

• JWT token injected via uploading event header
• Custom customFormData to pass metadata
• Server validates token before saving

Use Case 5: Form with Required File

• autoUpload=false, synchronous form submission
• Required attribute validation with data-required-message
• Template-driven or reactive form binding

Next Steps

1. Getting Started → Install package and render basic uploader 2. Async Upload → Configure save/remove URLs and upload modes 3. Validation → Add extension and size constraints 4. Chunk Upload → Handle large files with pause/resume 5. Templates → Customize file list appearance 6. Form Integration → Bind to Angular forms 7. Advanced Patterns → JWT auth, programmatic upload, custom UI 8. API Reference → Full properties, methods, events list

---

For detailed implementation, start with [references/getting-started.md](references/uploader-getting-started.md)

NumericTextBox

Component Overview

The Syncfusion Angular NumericTextBox is a specialized input control for numeric values. It provides:

• Numeric validation with min/max ranges and strict mode
• Formatting (currency, percentage, decimals)
• Spin buttons for value adjustment
• Adornments (prepend/append templates for icons, labels)
• Accessibility (WCAG 2.2, ARIA, keyboard navigation)
• Localization (multiple cultures and RTL support)
• Form integration (reactive forms, template-driven forms)

---

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Angular 21+ standalone component setup
• Basic NumericTextBox implementation
• CSS imports and theme configuration
• Range validation with min/max
• Simple formatting example
• Precision and decimals control
• Two-way binding setup
• Reactive forms integration

Formats and Number Styling

📄 Read: references/formats-styling.md

• Standard formats (currency c2, percentage p, numbers n)
• Custom numeric format strings
• Decimal place control
• Currency symbols and localization
• Styling NumericTextBox wrapper and icons
• CSS customization patterns

Spinners and Step Control

📄 Read: references/spinners-and-step.md

• Spin button visibility (showSpinButton)
• Step value configuration (step property)
• Customizing spin up/down arrow icons
• Arrow key interactions
• Disabling spin buttons

Adornments and Templates

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

• Adding prefix/suffix with prependTemplate and appendTemplate
• Currency symbols and unit labels
• Action buttons and icons
• Status indicators without affecting validation
• Template usage patterns

Validation and Form Integration

📄 Read: references/validation-and-forms.md

• Range validation (min/max with strictMode)
• Custom validation rules
• Error and warning states
• Reactive forms patterns

Advanced Patterns and Edge Cases

📄 Read: references/advanced-patterns.md

• Maintaining trailing zeros on focus
• Preventing nullable input (always require a value)
• Nullable input configuration
• Clear button behavior
• Read-only and disabled states
• Focus and blur event handling
• Float label types (Always, Auto, Never)
• Performance optimization

Accessibility and Migration

📄 Read: references/accessibility-and-migration.md

• WCAG 2.2 Level AA compliance
• ARIA attributes (spinbutton role, aria-valuemin, aria-valuemax, etc.)
• Keyboard navigation (Arrow Up/Down)
• Screen reader support
• RTL support for right-to-left languages
• EJ1 to EJ2 API migration guide
• Localization and globalization

Globalization and Localization

📄 Read: references/globalization.md

• Locale property configuration
• Culture-specific number formatting
• RTL (right-to-left) support
• International number formats

API Reference

📄 Read: references/api.md

• All component properties with types, defaults, and descriptions
• All public methods with signatures and usage examples
• All events with argument interface details
• ChangeEventArgs, NumericBlurEventArgs, NumericFocusEventArgs interfaces
• Complete summary tables for quick lookup

---

Quick Start Example

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

---

Common Patterns

Currency Input with Validation

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

Percentage Input

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

With Adornments (Unit Label)

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

Two-Way Binding with Form Control

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

---

Key Properties

---

Common Use Cases

1. E-Commerce Quantity Input — Product quantity selector with min/max validation 2. Financial Forms — Currency input with currency symbol and decimal places 3. Scientific Applications — High-precision decimal inputs 4. Survey/Form Data — Percentage inputs with 0-100 range 5. Multi-Language Support — Numbers formatted per user locale 6. Accessibility-First Forms — WCAG-compliant numeric inputs 7. Mobile-Friendly — Touch-friendly spin buttons and keyboard input

---

See Also

• Syncfusion Angular Input Controls
• Angular Forms Documentation
• WCAG 2.2 Accessibility Guidelines
• Syncfusion Theme Studio

TextBox

The Syncfusion Angular TextBox component is a feature-rich input element that enhances the native HTML input with floating labels, validation states, adornments (prepended/appended elements), accessibility support, and comprehensive styling options. This skill guides you through implementation patterns, configuration, and best practices.

Component Overview

The TextBox component provides:

---

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Create your first TextBox component
• CSS imports and theme selection
• Floating label implementation
• Basic event binding and data binding
• Common setup issues and solutions

Input Features and State Management

📄 Read: references/input-features.md

• Clear button implementation (showClearButton)
• Disabled state (enabled property)
• Read-only state (readonly property)
• HTML attributes configuration (htmlAttributes)
• Supporting input types and attributes
• State management patterns for forms

Adornments and Customization

📄 Read: references/adornments-customization.md

• Prepend and append template usage
• Icon adornments for visual context
• Button adornments (password toggle, clear)
• Validation status indicators
• Unit indicators (currency, temperature, etc.)
• Performance and accessibility considerations

Validation States and Error Handling

📄 Read: references/validation-states.md

• Error, warning, and success validation states
• CSS class approach (e-error, e-warning, e-success)
• Visual feedback patterns
• Adding asterisk for required fields
• Form integration with validation
• Custom error message display

Styling and Appearance Customization

📄 Read: references/styling-appearance.md

• CSS structure and class hierarchy
• Basic sizing (height, font, padding)
• Floating label color customization
• Validation state color changes
• Borders, rounded corners, and advanced styling
• Dynamic styling based on input value
• Theme integration and customization

Multiline and Sizing Features

📄 Read: references/multiline-sizing.md

• Multiline textarea configuration
• Row and column sizing
• Responsive sizing patterns
• Height adjustments and constraints
• Character counting implementation
• Text wrapping and overflow handling

Accessibility and Migration

📄 Read: references/accessibility-migration.md

• WCAG 2.2 and Section 508 compliance
• Keyboard navigation support
• ARIA attributes (aria-labelledby, aria-invalid, aria-disabled)
• Screen reader compatibility
• Migration from CSS TextBox to Angular component
• RTL and mobile accessibility

---

Quick Start Example

Create a floating label TextBox:

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TextBoxModule],
  template: `
    <div style="margin: 50px;">
      <h2>Angular TextBox Example</h2>
      <ejs-textbox 
        #textbox
        [floatLabelType]="'Auto'"
        placeholder="Enter your name"
        (input)="onInput($event)"
      ></ejs-textbox>
      <p>Value: {{ textValue }}</p>
    </div>
  `
})
export class AppComponent {
  textValue = '';

  onInput(event: any) {
    this.textValue = event.target.value;
  }
}

Key Points:

• Use floatLabelType="'Auto'" for automatic floating labels
• Import TextBoxModule from @syncfusion/ej2-angular-inputs
• Use standard Angular (input) event binding
• Set placeholder for the floating label text

---

Common Patterns

Pattern 1: Email Input with Icon Adornment

<ejs-textbox
  placeholder="Email"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'appendTemplate'"
></ejs-textbox>
<ng-template #appendTemplate>
  <span class="e-input-group-icon">✉</span>
</ng-template>

When to Use: Email, username, or other fields with visual context

Pattern 2: Password Toggle

<ejs-textbox
  [type]="passwordVisible ? 'text' : 'password'"
  placeholder="Password"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'toggleTemplate'"
></ejs-textbox>
<ng-template #toggleTemplate>
  <button (click)="togglePassword()">👁</button>
</ng-template>

// Component
togglePassword() {
  this.passwordVisible = !this.passwordVisible;
}

When to Use: Password fields requiring visibility toggle

Pattern 3: Validation with Error Display

<ejs-textbox
  [cssClass]="isValid ? 'e-success' : 'e-error'"
  placeholder="Phone"
  (change)="validatePhone($event)"
></ejs-textbox>
<p *ngIf="!isValid" style="color: red;">{{ errorMessage }}</p>

When to Use: Form fields with validation feedback

Pattern 4: Currency Input with Unit Indicator

<ejs-textbox
  type="number"
  placeholder="Amount"
  [prependTemplate]="'prependTemplate'"
></ejs-textbox>
<ng-template #prependTemplate>
  <span style="padding: 0 8px;">$</span>
</ng-template>

When to Use: Currency, temperature, or measurement inputs

---

Key Props and Configuration

Refer to the full API summary in references/api.md.

Notes:

• Use CSS class e-corner together with e-outline to show rounded corners for box-model TextBoxes.
• rows and cols are not component properties. To set them on a multiline TextBox, use addAttributes({rows: '5'} as any) in the (created) event handler (see references/multiline-sizing.md).
• For programmatic input creation (dynamic forms), use Input.createInput from @syncfusion/ej2-inputs (see references/input-features.md).

---

Common Use Cases

1. Contact Form

Multiple TextBox fields with floating labels, validation states, and required field indicators. See validation-states.md and accessibility-migration.md.

2. Search Input with Clear Button

TextBox with showClearButton=true for quick input reset. See input-features.md.

3. Styled Input with Icon Prefix/Suffix

TextBox with prependTemplate or appendTemplate for visual context. See adornments-customization.md.

4. Password Field with Toggle

Password input with visibility toggle button via append template. See adornments-customization.md.

5. Multiline Comment Field

Textarea with row sizing and character counting. See multiline-sizing.md.

6. Accessible Form Field

TextBox with proper ARIA attributes and keyboard support for compliance. See accessibility-migration.md.

---

Related Documentation

• Syncfusion Angular Inputs: https://ej2.syncfusion.com/angular/documentation/textbox
• TextBox API Reference: https://ej2.syncfusion.com/angular/documentation/api/textbox/
• Angular Input Guide: Angular Official Docs
• WCAG Accessibility: https://www.w3.org/TR/WCAG22/

---

Next Steps

1. Start with references/textbox-getting-started.md to set up your first TextBox 2. Explore references/textbox-input-features.md for state management 3. Use references/textbox-adornments-customization.md for custom UI 4. Reference references/textbox-validation-states.md for form validation 5. Customize styling with references/textbox-styling-appearance.md 6. Handle advanced cases in references/textbox-multiline-sizing.md and references/textbox-accessibility-migration.md

---

Signature

The Syncfusion Angular Signature component (ejs-signature) provides a smooth, canvas-based digital signature capture experience with comprehensive features including undo/redo operations, multiple export formats, customizable strokes, and full accessibility support.

Package: @syncfusion/ej2-angular-inputs Selector: ejs-signature (on a <canvas> element) Module: SignatureModule

Component Overview

The Signature component provides:

• Smooth Stroke Rendering: Velocity-based stroke width adjustment for natural signing
• Complete Action History: Undo/redo with snapshot tracking
• Multiple Export Formats: PNG, JPEG, SVG, Base64, or Blob
• Full Customization: Stroke properties, colors, and background images
• Accessibility First: WCAG 2.2 compliant with keyboard shortcuts
• Read-only and Disabled States: For view-only or restricted scenarios
• Background Persistence: Option to include/exclude background in saved files

Documentation and Navigation Guide

⚠️ Agentic use note: Read only the sections relevant to your task — do not chain through all references automatically.

Getting Started

📄 Read: references/signature-getting-started.md

• Angular 21 setup and standalone architecture
• Package installation and dependencies
• CSS theme imports and configuration
• Basic component rendering
• First running application

Drawing Signatures Programmatically

📄 Read: references/signature-drawing-signatures.md

• draw() method for text-based signatures
• Font family and font size options
• Render text as signature with custom styling
• User input integration for drawing

User Interactions

📄 Read: references/signature-user-interactions.md

• Undo and redo functionality with canUndo()/canRedo() checks
• Clear method for erasing signatures
• Disabled state for preventing user input
• Read-only mode for view-only scenarios
• Button state management and change events

Customization and Styling

📄 Read: references/signature-customization.md

• Stroke width control (minStrokeWidth, maxStrokeWidth, velocity)
• Stroke color customization with hex/RGB/named colors
• Background color setup
• Background image integration
• Real-time property updates

Opening and Saving Signatures

📄 Read: references/signature-open-save.md

• Load pre-drawn signatures using load() method
• Base64 encoding and URL support
• Save as Base64 with getSignature()
• Save as Blob with saveAsBlob()
• Save as image file (save() method)
• saveWithBackground property for background inclusion

Toolbar Integration

📄 Read: references/signature-toolbar-integration.md

• Complete toolbar setup with undo/redo/save buttons
• Color picker integration for stroke and background colors
• Stroke width controls with dropdown
• Clear and disable toggles
• Button state management with change events
• Full working toolbar example

Accessibility

📄 Read: references/signature-accessibility.md

• WCAG 2.2 and Section 508 compliance
• Keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
• Screen reader support and keyboard navigation
• Color contrast and focus indicators
• Mobile device support

API Reference

📄 Read: references/signature-api.md

• Complete properties reference (backgroundColor, strokeColor, disabled, etc.)
• All methods (undo, redo, clear, draw, save, load, etc.)
• Events and event arguments (change, beforeSave, created)
• Parameters and return types

Quick Start Example

import { Component } from '@angular/core';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <h4>Sign here</h4>
      <canvas ejs-signature #signature id="signature"></canvas>
    </div>
  `
})
export class AppComponent {}

CSS Theme Setup (styles.css):

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Capture and Save Signature

import { Component, ViewChild } from '@angular/core';
import { SignatureComponent, SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-save-signature',
  template: `
    <canvas ejs-signature #signature id="signature"></canvas>
    <button (click)="saveSignature()">Save as PNG</button>
  `
})
export class SaveSignatureComponent {
  @ViewChild('signature') public signature?: SignatureComponent;

  saveSignature(): void {
    if (!this.signature?.isEmpty()) {
      this.signature?.save('Png', 'MySignature');
    }
  }
}

Pattern 2: Undo/Redo with State Management

change(): void {
  this.undoButton.disabled = !this.signature?.canUndo();
  this.redoButton.disabled = !this.signature?.canRedo();
  this.clearButton.disabled = this.signature?.isEmpty() ?? true;
}

Pattern 3: Load and Verify Signature

loadSignature(): void {
  const base64String = (document.getElementById('signatureInput') as any).value;
  try {
    this.signature?.load(base64String);
  } catch (error) {
    console.error('Invalid signature format');
  }
}

Key Properties

Key Methods

Key Events

Common Use Cases

1. Contract/Agreement Signing — Capture user signature and save as Base64 for backend storage 2. Feedback Forms — Embedded signature field with clear/undo controls 3. Document Approval — Load existing signature, verify it is not empty before form submit 4. Toolbar-Driven Signing — Full toolbar with color pickers, stroke width, undo/redo, save 5. Programmatic Signature — Draw typed name as a styled signature via draw() method

---

For detailed implementation, start with [references/signature-getting-started.md](references/signature-getting-started.md)

---

CheckBox

The Syncfusion Angular CheckBox (ejs-checkbox) is a graphical UI element that lets users select one or more options. It supports checked, unchecked, and indeterminate states, flexible label positioning, size variants, two-way binding with ngModel, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-angular-buttons Selector: ejs-checkbox Module: CheckBoxModule

Component Overview

The CheckBox component provides:

• Three States: Checked, unchecked, and indeterminate (partial selection)
• Label Control: Caption text with before/after positioning
• Size Variants: Default and small (e-small) sizes
• Form Support: name/value attributes for HTML form submission, ngModel two-way binding
• Accessibility: WCAG 2.2, Section 508, keyboard navigation (Space key), screen reader support
• Custom Styling: Color variants, round frames, custom check icons via CSS classes
• RTL Support: Right-to-left rendering

Documentation and Navigation Guide

⚠️ Agentic use note: Read only the sections relevant to your task — do not chain through all references automatically.

Getting Started

📄 Read: references/checkbox-getting-started.md

• Installing @syncfusion/ej2-angular-buttons via ng add
• CheckBoxModule import in standalone component's imports[]
• CSS theme imports (material theme)
• Minimal ejs-checkbox setup and running the app
• Checked, unchecked, and indeterminate states

Label and Size

📄 Read: references/checkbox-label-and-size.md

• label property for caption text
• labelPosition ("Before" / "After")
• Small size via cssClass="e-small"
• Default vs. small size examples

Style and Appearance

📄 Read: references/checkbox-style-and-appearance.md

• Color variant customization (primary, success, warning, danger, info) via cssClass
• Custom checkbox frame shapes (round checkbox with e-custom)
• Custom check icon with e-checkicon
• CSS rules for appearance override

Accessibility and RTL

📄 Read: references/checkbox-accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes (aria-disabled)
• Keyboard navigation (Space key)
• Right-to-left (enableRtl) support
• Screen reader support

How-To Guides

📄 Read: references/checkbox-how-to.md

• Name and value in form submission
• Two-way binding with ngModel
• Enabling right-to-left display
• Customized checkbox appearance variants

API Reference

📄 Read: references/checkbox-api.md

• All properties: checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, indeterminate, label, labelPosition, locale, name, value
• Methods: click(), destroy(), focusIn()
• Events: change, created

Quick Start Example

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

CSS Theme Setup (styles.css):

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Common Patterns

Checked, Unchecked, and Indeterminate States

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

Change Event Handler

import { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Subscribe" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('Checked:', args.checked);
  }
}

Form Submission with Name and Value

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <form>
      <ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox>
      <button type="submit">Submit</button>
    </form>`
})
export class AppComponent { }

Two-Way Binding with ngModel

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox [(ngModel)]="isChecked" label="Enable Feature"></ejs-checkbox>
    <p>State: {{ isChecked }}</p>`
})
export class AppComponent {
  public isChecked: boolean = false;
}

Key Properties

Key Methods

Key Events

Common Use Cases

1. Multi-Select Form Fields — Group checkboxes with name/value for form POST 2. Select All / Indeterminate — Parent checkbox with [indeterminate] based on child states 3. Feature Toggles — Single checkbox with ngModel two-way binding 4. Accessible Forms — WCAG-compliant checkboxes with keyboard and screen reader support 5. Styled Checkboxes — Round or color-variant checkboxes via cssClass

---

For detailed implementation, start with [references/checkbox-getting-started.md](references/checkbox-getting-started.md)

OTP Input

A focused skill for implementing and customizing the Syncfusion Angular ejs-otpinput component — a multi-box input control designed for one-time password (OTP) and verification code entry flows.

Package: @syncfusion/ej2-angular-inputs Selector: ejs-otpinput Module: OtpInputModule

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation via ng add
• Angular standalone vs module setup
• Basic component rendering
• CSS/SCSS theme imports
• autoFocus and pre-filled value

Input Types & Value

📄 Read: references/input-types-and-value.md

• Number type (digits only, default)
• Text type (alphanumeric OTP)
• Password type (masked entry)
• textTransform (uppercase/lowercase/none)
• Setting and reading the value property

Appearance & Layout

📄 Read: references/appearance.md

• Configuring OTP length
• Disabled state
• CSS classes (e-success, e-warning, e-error)
• Separator between fields
• Placeholder (single char or per-field string)
• Styling modes: outlined, filled, underlined

Events

📄 Read: references/events.md

• created — component ready
• focus / blur — field focus events
• input — per-character change
• valueChanged — full OTP entered/changed
• Practical: validate and submit on OTP completion

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 / ADA compliance table
• ARIA attributes (role=group, aria-label)
• ariaLabels property for per-field screen reader text
• htmlAttributes for extra HTML attributes
• Keyboard navigation shortcuts
• RTL support (enableRtl)

API Reference

📄 Read: references/api.md

• All properties with types and defaults
• Methods: focusIn, focusOut, destroy
• All events with argument interfaces
• Enum types: OtpInputStyle, OtpInputType, TextTransform

---

Quick Start

// app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [OtpInputModule],
  selector: 'app-root',
  template: `
    <div style="width: 350px;">
      <div ejs-otpinput
        id="otpinput"
        [length]="6"
        placeholder="x"
        (valueChanged)="onOtpComplete($event)">
      </div>
    </div>
  `
})
export class AppComponent {
  onOtpComplete(args: any) {
    console.log('OTP entered:', args.value);
  }
}

/* styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';

---

Common Patterns

Numeric PIN (4 digits)

<div ejs-otpinput [length]="4" type="number"></div>

Masked password entry

<div ejs-otpinput [length]="6" type="password"></div>

OTP with separator and filled style

<div ejs-otpinput [length]="6" separator="-" stylingMode="filled"></div>

Auto-submit when OTP is complete

<div ejs-otpinput [length]="6" (valueChanged)="submitOtp($event)"></div>

Error state after failed verification

<div ejs-otpinput [length]="6" cssClass="e-error" [disabled]="false"></div>

Accessible OTP with ARIA labels

<div ejs-otpinput
  [length]="4"
  [ariaLabels]="['Digit 1', 'Digit 2', 'Digit 3', 'Digit 4']">
</div>

Implementing Syncfusion Angular Range Slider

The Range Slider is a versatile input component from Syncfusion EJ2 Angular that enables users to select single values or ranges from a continuous range. It supports multiple slider types, custom formatting, keyboard navigation, and advanced accessibility features.

Component Overview

The Syncfusion Angular Range Slider (ejs-slider) provides:

• Three slider types: Default (single), MinRange (start to current), Range (dual handles)
• Orientations: Horizontal and vertical
• Interactive elements: Tooltips, increment/decrement buttons, tick marks, limits
• Advanced features: Custom formatting, keyboard shortcuts, RTL support
• Full accessibility: WCAG 2.2, Section 508, keyboard navigation, ARIA attributes
• Form integration: Reactive forms and template-driven forms support

Slider Types at a Glance

Documentation & Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation of @syncfusion/ej2-angular-inputs
• Package setup and imports
• CSS theme configuration
• First working example
• Understanding slider types overview

Slider Types & Orientation

📄 Read: references/slider-types-and-orientation.md

• When to use Default vs MinRange vs Range types
• Horizontal slider implementation (default)
• Vertical slider for space-saving layouts
• Practical implementation examples
• Type selection decision matrix

Ticks, Marks & Limits

📄 Read: references/ticks-and-limits.md

• Adding tick marks to slider track
• Configuring tick labels and format
• Setting min/max limits and boundaries
• Step value configuration
• Custom tick positioning

Tooltips & Buttons

📄 Read: references/tooltips-and-buttons.md

• Enable/disable tooltips
• Tooltip placement (Before, After, Above, Below)
• Increment/decrement buttons setup
• Button behavior in range sliders
• Keyboard focus management

Formatting & Value Display

📄 Read: references/formatting-and-values.md

• Format API for numeric, percentage, currency formatting
• Custom value formatting with events
• Internationalization support
• Using renderingTicks event for label transformation
• Using tooltipChange event for tooltip customization

Styling & Customization

📄 Read: references/styling-and-customization.md

• CSS classes for track, handle, buttons, ticks
• Customizing colors and dimensions
• Theme Studio integration
• RTL (right-to-left) language support
• Responsive design patterns

Forms, Validation & Accessibility

📄 Read: references/form-integration-and-accessibility.md

• Reactive forms with FormControl
• Template-driven forms with ngModel
• Form validation and error states
• WCAG 2.2 and Section 508 compliance
• Keyboard shortcuts (Arrow keys, Home, End, PageUp/PageDown)
• ARIA attributes and screen reader support

Advanced Scenarios

📄 Read: references/advanced-scenarios.md

• Date range slider implementation
• Time range slider implementation
• Numeric range slider with formatting
• Reveal slider from hidden state
• Performance optimization tips
• Common pitfalls and troubleshooting

API Reference

📄 Read: references/api.md

• Complete property listing (value, type, min, max, step, orientation, ticks, tooltip, limits, colorRange, enabled, readonly, showButtons, customValues, enableRtl, cssClass, width, enableAnimation, enablePersistence)
• All events (change, changed, created, renderingTicks, renderedTicks, tooltipChange)
• Methods (destroy, reposition)
• Data models: TicksDataModel, TooltipDataModel, LimitDataModel, ColorRangeDataModel
• EJ1 → EJ2 migration table
• Verified code examples using only documented APIs

Quick Start Example

Here's a minimal range slider in Angular 21+ (standalone):

import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="container">
      <h3>Range Slider</h3>
      <ejs-slider 
        id="range-slider"
        type="Range"
        [min]="0"
        [max]="100"
        [value]="[20, 80]"
        (change)="onSliderChange($event)">
      </ejs-slider>
      <p>Selected range: {{ selectedRange | json }}</p>
    </div>
  `,
  styles: [`
    #container {
      padding: 20px;
    }
    ejs-slider {
      width: 300px;
    }
  `]
})
export class App {
  selectedRange = [20, 80];

  onSliderChange(event: any) {
    this.selectedRange = event.value;
    console.log('Range changed:', this.selectedRange);
  }
}

CSS Theme Setup (in styles.css):

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Range Slider with Limits

<ejs-slider 
  type="Range"
  [min]="0"
  [max]="100"
  [value]="[25, 75]"
  [limits]="{ enabled: true, minStart: 10, minEnd: 90 }">
</ejs-slider>

Pattern 2: Slider with Ticks and Tooltip

<ejs-slider 
  type="Default"
  [value]="50"
  [ticks]="{ placement: 'Before', largeStep: 10, smallStep: 5 }"
  [tooltip]="{ isVisible: true, placement: 'After' }">
</ejs-slider>

Pattern 3: Vertical Slider

<ejs-slider 
  type="Range"
  [value]="[30, 70]"
  orientation="Vertical"
  [style.height]="'300px'">
</ejs-slider>

Pattern 4: Percentage Formatted Slider

<ejs-slider 
  type="Range"
  [value]="[20, 80]"
  [ticks]="{ format: 'P0' }"
  [tooltip]="{ format: 'P0' }">
</ejs-slider>

Key Props & Configuration

Properties

Events

Methods (via @ViewChild)

Common Use Cases

Use Case 1: Price Filter

• Type: Range
• Range: $0-$1000 with $100 steps
• Format: Currency (e.g., "$250")
• Tooltips: Visible with currency format

Use Case 2: Date Range Selector

• Type: Range
• Range: 0-365 (days)
• Format: Custom (date string from number)
• Ticks: Monthly intervals

Use Case 3: Volume Control

• Type: Default
• Range: 0-100
• Format: Percentage (0% - 100%)
• Orientation: Vertical

Use Case 4: Form Input with Validation

• Type: Range
• Integration: Reactive FormControl
• Validation: Min 20, Max 80
• Error display on invalid state

Next Steps

1. Start with Getting Started - Set up the component and understand types 2. Choose your slider type - Read "Slider Types & Orientation" 3. Configure features - Add ticks, tooltips, buttons as needed 4. Format values - Implement percentage, currency, or custom formats 5. Add accessibility - Review keyboard nav and ARIA attributes 6. Style & customize - Apply theme and CSS customization 7. Integrate with forms - Bind to FormControl or ngModel with validation 8. Handle edge cases - Review advanced scenarios and troubleshooting

---

For detailed implementation, start with [references/getting-started.md](references/range-slider-getting-started.md)

Syncfusion Angular TextArea Component

The Syncfusion Angular TextArea (ejs-textarea) provides a feature-rich multiline text input with floating labels, resize modes, adornments, form integration, and full accessibility support.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation (@syncfusion/ej2-angular-inputs)
• Standalone Angular 19+ component setup
• CSS/theme imports
• Basic TextArea rendering
• Getting and setting values (value property, ngModel, change event)

Configuration

📄 Read: references/configuration.md

• Floating label (floatLabelType: Auto / Always / Never)
• Placeholder with localization (locale property)
• Rows and columns (rows / cols properties)
• Max length (maxLength property)
• Resize modes (resizeMode: Vertical / Horizontal / Both / None)
• Width customization (width property)

Adornments

📄 Read: references/adornments.md

• Prepend/append custom templates (prependTemplate / appendTemplate)
• Adornment flow and orientation (adornmentFlow / adornmentOrientation)
• Common patterns: icons, formatting buttons, action buttons

Events

📄 Read: references/events.md

• created, destroyed lifecycle events
• input — real-time value changes (InputEventArgs)
• change — value changed on blur (ChangedEventArgs)
• focus / blur — focus state events (FocusInEventArgs / FocusOutEventArgs)

Style & Appearance

📄 Read: references/style-appearance.md

• Size variants (e-small, e-bigger)
• Filled and outline modes (e-filled, e-outline)
• Custom CSS via cssClass property
• Disabled (enabled: false) and read-only (readonly: true) states
• Show/hide clear button (showClearButton)
• Rounded corners, static clear button, RTL (enableRtl)
• Custom background, text, and border color overrides
• Floating label color for validation states

Form Support

📄 Read: references/form-support.md

• HTML form integration
• FormValidator integration (required, minLength, maxLength, pattern)
• State persistence (enablePersistence)
• Custom HTML attributes (htmlAttributes)

API Reference

📄 Read: references/api.md

• All properties, methods, and events with types and defaults
• Enum types: FloatLabelType, Resize, AdornmentsDirection

Quick Start

ng add @syncfusion/ej2-angular-inputs

import { Component } from '@angular/core';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule],
  selector: 'app-root',
  template: `
    <ejs-textarea
      id="comments"
      placeholder="Enter your comments"
      [floatLabelType]="'Auto'"
      [rows]="4"
      [maxLength]="500">
    </ejs-textarea>
  `
})
export class AppComponent {}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';

Common Patterns

Two-Way Binding with ngModel

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule, FormsModule],
  selector: 'app-root',
  template: `<ejs-textarea [(ngModel)]="comment" placeholder="Add comment"></ejs-textarea>`
})
export class AppComponent {
  comment: string = '';
}

Disabled TextArea

<ejs-textarea [enabled]="false" value="Read-only content"></ejs-textarea>

Resize Control

<!-- Vertical resize only -->
<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>

<!-- No resize -->
<ejs-textarea resizeMode="None" [rows]="4" [cols]="50"></ejs-textarea>

With Floating Label

<ejs-textarea floatLabelType="Auto" placeholder="Description"></ejs-textarea>

ColorPicker

The Syncfusion Angular ColorPicker lets users pick colors via a visual picker (HSV + opacity) or a palette of swatches. It renders as a SplitButton by default (opens a popup) or inline, and supports RGB, HSV, and Hex color formats.

Package: @syncfusion/ej2-angular-inputs Component: <ejs-input ejs-colorpicker type="color">

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation with Vite or Angular CLI
• npm package setup
• CSS theme imports
• Minimal working example
• Running the application

Modes and Color Value

📄 Read: references/modes-and-value.md

• Inline rendering vs popup (SplitButton)
• Picker mode vs Palette mode
• Setting initial color value (hex codes)
• Opacity support
• Rendering palette alone (locking mode)

Palette Features

📄 Read: references/palette-features.md

• Custom color palettes (presetColors)
• Custom palette tile rendering (beforeTileRender)
• No-color / clear color support (noColor)
• Custom no-color option
• Recent colors display (showRecentColors)
• Palette column count (columns)

UI Customization

📄 Read: references/ui-customization.md

• Hide the input value area
• Custom picker handle
• Custom primary button with icon
• Display hex code in input element
• Hide control buttons (Apply/Cancel)
• CSS class overrides and Theme Studio
• Excel-like custom UI with SplitButton and Dialog

Integration and Advanced

📄 Read: references/integration-and-advanced.md

• Embedding ColorPicker in a DropDownButton
• Popup toggle control
• State persistence across page reloads
• Mode switcher visibility and events
• Disabled state

Localization and RTL

📄 Read: references/localization-and-rtl.md

• Localizing Apply / Cancel / ModeSwitcher labels
• Loading translation objects with L10n
• Right-to-left rendering (enableRtl)

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes
• Keyboard navigation shortcuts
• Accessibility validation

API Reference

📄 Read: references/api.md

• All properties with types and defaults
• All methods with signatures
• All events with payload types

---

Quick Start

npm install @syncfusion/ej2-angular-inputs --save

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <div id="container">
      <div class="wrap">
        <h4>Choose Color</h4>
        <ejs-input ejs-colorpicker type="color" id="color-picker"></ejs-colorpicker>
      </div>
    </div>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

Common Patterns

Inline picker (no popup)

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

Palette-only mode

<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false" [showButtons]="false"></ejs-colorpicker>

Set initial color + handle changes

import { Component } from '@angular/core';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" [value]="colorValue" (change)="onChange($event)"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public colorValue: string = '#ff5733';

  public onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
}

Custom palette with preset colors

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color"
      mode="Palette"
      [presetColors]="presets"
      [columns]="4"
      [modeSwitcher]="false"
      [inline]="true"
      [showButtons]="false"
    ></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public presets: { [key: string]: string[] } = {
    brand: ['#0078d4', '#106ebe', '#005a9e', '#004578'],
    accents: ['#e81123', '#ff8c00', '#00b294', '#68217a']
  };
}

Disable opacity slider

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

No-color support (clear selection)

<ejs-input ejs-colorpicker type="color"
  mode="Palette"
  [noColor]="true"
  [modeSwitcher]="false"
  [showButtons]="false"
></ejs-colorpicker>

Localization (German)

import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

L10n.load({
  'de-DE': {
    colorpicker: {
      Apply: 'Anwenden',
      Cancel: 'Abbrechen',
      ModeSwitcher: 'Modus wechseln'
    }
  }
});

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

Key Props

MaskedTextBox

The Syncfusion Angular MaskedTextBox component enforces a specific input format by applying a mask pattern, guiding users to enter data in the correct structure. It is ideal for phone numbers, postal codes, dates, IP addresses, product keys, and any scenario where input must follow a predefined format.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation via npm (@syncfusion/ej2-angular-inputs)
• Angular module setup with MaskedTextBoxModule
• CSS imports for theming
• Rendering a basic MaskedTextBox
• Setting the mask property for format enforcement

Mask Configuration

📄 Read: references/mask-configuration.md

• Standard mask element tokens (0, 9, #, L, ?, &, C, A, a, <, >, |, \)
• Custom characters via customCharacters property
• Regular expression masks for flexible patterns (e.g., IP addresses)
• Prompt character customization via promptChar

Adornments (Prepend / Append Elements)

📄 Read: references/adornments.md

• Adding icons or buttons before/after the input with ng-template
• Entry guidance, quick actions, and context labels
• Template binding examples

Angular Integration

📄 Read: references/angular-integration.md

• Two-way binding with ngModel
• Reactive forms with FormControl
• Component lifecycle hooks (ngOnInit, ngOnDestroy)
• Handling the change event in Angular components
• Template reference variables for programmatic access

Style, Appearance & Customization

📄 Read: references/style-and-customization.md

• Custom styling with cssClass
• CSS overrides for wrapper, hover, and focus states
• Setting cursor position on focus using the focus event (selectionStart, selectionEnd)
• Displaying numeric keypad on mobile with type="tel"
• floatLabelType options (Never, Always, Auto)

Form Validation

📄 Read: references/form-validation.md

• Integrating with Syncfusion FormValidator
• Defining custom validation rules
• Custom error placement with customPlacement
• Checking for incomplete masked values using promptChar

API Reference

📄 Read: references/api.md

• All properties: mask, value, placeholder, floatLabelType, promptChar, customCharacters, cssClass, enabled, readonly, showClearButton, enableRtl, enablePersistence, htmlAttributes, locale, width
• Methods: focusIn(), focusOut(), getMaskedValue(), destroy(), getPersistData()
• Events: change, focus, blur, created, destroyed

Quick Start

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaskedTextBoxModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mask: string = '000-000-0000';
}

app.component.html

<ejs-maskedtextbox
  [mask]="mask"
  placeholder="Enter phone number"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Common Patterns

Phone Number Input

<ejs-maskedtextbox
  mask="000-000-0000"
  placeholder="Phone"
  floatLabelType="Always">
</ejs-maskedtextbox>

IP Address with Regex Mask

<ejs-maskedtextbox
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Custom AM/PM Time Input

// app.component.ts
export class AppComponent {
  customChars: { [key: string]: string } = {
    P: 'P,A,p,a',
    M: 'M,m'
  };
}

<!-- app.component.html -->
<ejs-maskedtextbox
  mask="00:00 >PM"
  [customCharacters]="customChars"
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Read Masked Value Programmatically

// app.component.ts
import { ViewChild } from '@angular/core';

export class AppComponent {
  @ViewChild('maskInput') maskInput: any;

  getMaskedValue(): void {
    const maskedVal = this.maskInput.getMaskedValue(); // e.g., "123-456-7890"
    const rawVal = this.maskInput.value;               // e.g., "1234567890"
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  #maskInput
  mask="000-000-0000"
  placeholder="Phone">
</ejs-maskedtextbox>

Two-Way Binding with ngModel

// app.component.ts
export class AppComponent {
  phone: string = '';

  onPhoneChange(event: any): void {
    console.log('Phone changed to:', this.phone);
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  [(ngModel)]="phone"
  mask="000-000-0000"
  (change)="onPhoneChange($event)"
  placeholder="Phone"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Rating

The Syncfusion Angular Rating component lets users select a rating value from a set of visual symbols (stars by default). It supports precision modes, custom templates, tooltips, labels, reset, read-only/disabled states, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-angular-inputs

---

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing @syncfusion/ej2-angular-inputs
• CSS theme imports for Tailwind3
• Minimal Rating component setup in AppModule
• Setting the initial value property
• Running the Angular app

Selection and Reset

📄 Read: references/selection.md

• Setting a rating value with value
• Minimum rating value with min
• Single-selection mode with enableSingleSelection
• Show/hide reset button with allowReset
• Programmatic reset() method

Precision Modes

📄 Read: references/precision-modes.md

• PrecisionType.Full — whole number increments
• PrecisionType.Half — 0.5 increments
• PrecisionType.Quarter — 0.25 increments
• PrecisionType.Exact — 0.1 increments
• Combining precision with initial value

Appearance and Customization

📄 Read: references/appearance.md

• Controlling item count with itemsCount
• Disabling the component with disabled
• Hiding/showing the component with visible
• Read-only mode with readOnly
• CSS customization with cssClass (border color, fill color, item spacing, icon)
• Changing rating icon via CSS

Labels

📄 Read: references/labels.md

• Showing the current value label with showLabel
• labelPosition options: Top, Bottom, Left, Right
• Custom label content with labelTemplate

Tooltip

📄 Read: references/tooltip.md

• Enabling tooltips with showTooltip
• Custom tooltip content with tooltipTemplate
• Tooltip appearance via cssClass

Templates

📄 Read: references/templates.md

• emptyTemplate for unrated items
• fullTemplate for rated items
• Emoji rating symbols
• SVG icon rating symbols
• PNG image rating symbols
• Precision support in templates via --rating-value

Events

📄 Read: references/events.md

• beforeItemRender — customize items before render
• created — after component initialization
• onItemHover — track hovered items
• valueChanged — react to user rating changes

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 / ADA compliance
• WAI-ARIA attributes (role=slider, aria-valuemin/max/now)
• Keyboard navigation shortcuts
• RTL support with enableRtl
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties, methods, and events with types and defaults
• RatingItemEventArgs, RatingHoverEventArgs, RatingChangedEventArgs
• LabelPosition and PrecisionType enums

---

Quick Start

npm install @syncfusion/ej2-angular-inputs --save

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RatingModule],
  bootstrap: [AppComponent],
})
export class AppModule { }

<!-- src/app.component.html -->
<input ejs-rating id="rating" [value]="3"></ejs-rating>

---

Common Patterns

Rating with value change handler

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { RatingChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="rating" (valueChanged)="onValueChanged($event)"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  rating: number = 3;

  onValueChanged(args: RatingChangedEventArgs) {
    this.rating = args.value;
  }
}

Half-precision rating with label

import { Component } from '@angular/core';
import { RatingModule, PrecisionType } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="3.5"
      [precision]="precision"
      [showLabel]="true"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  precision = PrecisionType.Half;
}

Read-only rating (display only)

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="4"
      [readOnly]="true"
      [showTooltip]="false"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

Rating with reset button

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="3" [allowReset]="true"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

---

Key Properties at a Glance

---

Accessibility and RTL — Syncfusion Angular CheckBox

Table of Contents

• Accessibility Compliance
• WAI-ARIA Attributes
• Keyboard Interaction
• Right-to-Left (RTL) Support
• Screen Reader Support

---

Accessibility Compliance

The Syncfusion Angular CheckBox meets the following standards:

---

WAI-ARIA Attributes

The CheckBox follows the WAI-ARIA checkbox pattern. The following ARIA attribute is applied automatically:

No manual ARIA attributes are needed — the component handles these automatically.

---

Keyboard Interaction

The CheckBox naturally participates in tab order. Focus is visually indicated by the default theme styles.

---

Right-to-Left (RTL) Support

Enable RTL rendering with the enableRtl property. In RTL mode, the checkbox and its label are mirrored for locales such as Arabic and Hebrew:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default" [enableRtl]="true"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

What changes in RTL mode:

• The checkbox frame appears on the right side of the label
• Layout direction mirrors horizontally
• Works in combination with labelPosition

Tip: For application-wide RTL, use the global enableRtl configuration from @syncfusion/ej2-base rather than setting it per component.

---

Screen Reader Support

The CheckBox renders a native <input type="checkbox"> element underneath, which screen readers (NVDA, JAWS, VoiceOver) natively interpret as a checkbox. The label property maps to the input's accessible name, so no additional aria-label is needed when label is set.

Accessibility best practices:

• Always provide a meaningful label — avoid empty checkboxes
• Use disabled rather than hiding checkboxes for read-only form states (screen readers still announce disabled checkboxes)
• When using indeterminate, provide context in the label so users understand the partial selection state (e.g., "Select All (partially selected)")

API Reference — Syncfusion Angular CheckBox

Full API reference for the ejs-checkbox component from @syncfusion/ej2-angular-buttons.

Source: Official API Documentation

Table of Contents

• Import
• Properties
• Methods
• Events
• ChangeEventArgs Interface
• Quick Reference Table

---

Import

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

---

Properties

checked

Type: boolean | Default: false

Specifies whether the CheckBox is in the checked state. When true, a tick mark appears in the checkbox frame.

<ejs-checkbox label="Option" [checked]="true"></ejs-checkbox>

---

cssClass

Type: string | Default: ''

Defines one or more CSS class names (space-separated) applied to the CheckBox element. Use this to add custom styles or size variants.

<!-- Small size -->
<ejs-checkbox label="Small" cssClass="e-small"></ejs-checkbox>

<!-- Multiple classes -->
<ejs-checkbox label="Custom" cssClass="e-primary e-small"></ejs-checkbox>

Common built-in value: 'e-small' (small size)

---

disabled

Type: boolean | Default: false

Specifies whether the CheckBox is in the disabled state. When true, the checkbox is non-interactive and visually dimmed. Disabled checkboxes are not submitted in form data.

<ejs-checkbox label="Disabled" [disabled]="true"></ejs-checkbox>

---

enableHtmlSanitizer

Type: boolean | Default: true

Specifies whether to sanitize untrusted HTML strings before rendering them in the CheckBox (e.g., HTML in the label property). When true, suspected scripts and unsafe HTML are sanitized. Set to false only for trusted, controlled content.

<ejs-checkbox label="<b>Bold Label</b>" [enableHtmlSanitizer]="false"></ejs-checkbox>

---

enablePersistence

Type: boolean | Default: false

Enables persisting the component's state (checked/unchecked) between page reloads using browser localStorage.

<ejs-checkbox label="Remember Me" [enablePersistence]="true"></ejs-checkbox>

---

enableRtl

Type: boolean | Default: false

Enables right-to-left rendering of the CheckBox component. When true, the layout mirrors horizontally for RTL locales (Arabic, Hebrew, etc.).

<ejs-checkbox label="خيار" [enableRtl]="true"></ejs-checkbox>

---

htmlAttributes

Type: { [key: string]: string } | Default: {}

Adds additional HTML attributes to the underlying <input> element. If the same attribute is set both via htmlAttributes and a direct property, the property value takes precedence.

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Required" [htmlAttributes]="attrs"></ejs-checkbox>`
})
export class AppComponent {
  public attrs: { [key: string]: string } = {
    required: 'required',
    'data-id': 'cb-001'
  };
}

---

indeterminate

Type: boolean | Default: false

Specifies whether the CheckBox is in the indeterminate state. When true, neither fully checked nor unchecked — visually shows a dash. Cannot be set by user interaction; must be set programmatically.

<ejs-checkbox label="Select All" [indeterminate]="true"></ejs-checkbox>

---

label

Type: string | Default: ''

Defines the caption text displayed next to the CheckBox, describing its purpose. Eliminates the need for a separate <label> HTML element.

<ejs-checkbox label="Accept Terms and Conditions"></ejs-checkbox>

---

labelPosition

Type: 'Before' | 'After' | Default: 'After'

Controls the position of the label relative to the checkbox frame.

• 'After' — Label appears to the right of the checkbox (default)
• 'Before' — Label appears to the left of the checkbox

<ejs-checkbox label="Label on Left" labelPosition="Before"></ejs-checkbox>
<ejs-checkbox label="Label on Right" labelPosition="After"></ejs-checkbox>

---

locale

Type: string | Default: ''

Overrides the global culture and localization value for this component. When empty, inherits the global culture ('en-US').

<ejs-checkbox label="Option" locale="fr-FR"></ejs-checkbox>

---

name

Type: string | Default: ''

Defines the name attribute for the checkbox <input> element. Used to group checkboxes in a form and to reference submitted data by name. Only checked, non-disabled checkboxes with a name send their value on form submit.

<ejs-checkbox name="hobbies" value="reading" label="Reading"></ejs-checkbox>

---

value

Type: string | Default: ''

Defines the value attribute for the checkbox <input> element. This value is submitted as form data when the checkbox is checked.

<ejs-checkbox name="hobbies" value="reading" label="Reading" [checked]="true"></ejs-checkbox>

---

Methods

Access methods via Angular's @ViewChild:

import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox #cb label="Option"></ejs-checkbox>`
})
export class AppComponent {
  @ViewChild('cb') public checkbox!: CheckBoxComponent;
}

click()

Returns: void

Programmatically triggers a click on the CheckBox element (native method). Toggles the checked state as if the user clicked it.

this.checkbox.click();

---

destroy()

Returns: void

Destroys the CheckBox component and cleans up event listeners and DOM modifications.

this.checkbox.destroy();

---

focusIn()

Returns: void

Sets focus to the CheckBox element (native method). Useful for programmatic focus management in forms.

this.checkbox.focusIn();

---

Events

change

Type: EmitType<ChangeEventArgs>

Triggers when the CheckBox state is changed by user interaction (click or Space key). Provides a ChangeEventArgs object.

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Toggle" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('New checked state:', args.checked);
  }
}

---

created

Type: EmitType<Event>

Triggers once the component has finished rendering. Use this for post-render initialization logic.

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Option" (created)="onCreated()"></ejs-checkbox>`
})
export class AppComponent {
  onCreated(): void {
    console.log('CheckBox component rendered');
  }
}

---

ChangeEventArgs Interface

The change event callback receives a ChangeEventArgs object:

onChange(args: ChangeEventArgs): void {
  if (args.checked) {
    console.log('Checkbox is now checked');
  } else {
    console.log('Checkbox is now unchecked');
  }
}

---

Quick Reference Table

Getting Started — Syncfusion Angular CheckBox

Table of Contents

• Prerequisites
• Dependencies
• Installation
• Adding CSS
• Basic CheckBox Setup
• CheckBox States

---

Prerequisites

Ensure your environment meets the System Requirements for Syncfusion Angular UI Components.

This guide supports Angular 19+ using the standalone component architecture (default since Angular 19). For Angular 18 and below using NgModules, import CheckBoxModule into your AppModule instead.

---

Dependencies

The CheckBox component relies on the following packages:

@syncfusion/ej2-angular-buttons
  └── @syncfusion/ej2-angular-base
  └── @syncfusion/ej2-buttons
        └── @syncfusion/ej2-base

---

Installation

Use the Angular CLI schematic for automatic setup (recommended):

ng add @syncfusion/ej2-angular-buttons

This command:

• Adds @syncfusion/ej2-angular-buttons and peer dependencies to package.json
• Registers the default Syncfusion Material theme in angular.json

To install manually:

npm install @syncfusion/ej2-angular-buttons --save

---

Adding CSS

Import theme styles in your global styles.css. The Material theme is added automatically by ng add:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Import order matters — ej2-base must come before ej2-buttons.

Other available themes: fabric.css, bootstrap5.css, fluent.css, tailwind.css.

---

Basic CheckBox Setup

In a standalone Angular component, import CheckBoxModule in the imports array:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

Bootstrap the app in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Run the application:

ng serve

---

CheckBox States

The CheckBox supports three visual states: checked, unchecked, and indeterminate.

Checked and Unchecked

Use the checked property to set the initial state:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <li><ejs-checkbox label="Checked State" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Unchecked State"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

Indeterminate State

The indeterminate state visually masks the actual value (shows a dash instead of a tick). It can only be set programmatically — not through user interaction:

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

Tip: Use indeterminate for a "Select All" parent checkbox when only some child checkboxes are selected.

Disabled State

Use the disabled property to prevent user interaction. Disabled checkboxes are not submitted in form data:

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Disabled" [disabled]="true"></ejs-checkbox>`
})
export class AppComponent { }

How-To Guides — Syncfusion Angular CheckBox

Table of Contents

• Name and Value in Form Submission
• Two-Way Binding with ngModel
• Enable Right-to-Left
• Customize CheckBox Appearance
• Programmatic Access with ViewChild

---

Name and Value in Form Submission

Use the name and value properties to group checkboxes and submit their values in an HTML form.

Rules:

• Only checked and non-disabled checkboxes send their value to the server on form submit
• disabled and unchecked checkboxes are excluded from the submitted data
• Multiple checkboxes sharing the same name form a group; all selected values are submitted

import { CheckBoxModule, ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <form>
        <ul>
          <!-- Checked: Cricket value will be submitted -->
          <li><ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox></li>

          <!-- Checked: Hockey value will be submitted -->
          <li><ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox></li>

          <!-- Disabled: Tennis value will NOT be submitted -->
          <li><ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox></li>

          <!-- Unchecked: Basketball value will NOT be submitted -->
          <li><ejs-checkbox name="Sport" value="Basketball" label="Basketball"></ejs-checkbox></li>

          <li><button ejs-button [isPrimary]="true">Submit</button></li>
        </ul>
      </form>
    </div>`
})
export class AppComponent { }

Result: On submit, the form sends Sport=Cricket&Sport=Hockey.

---

Two-Way Binding with ngModel

Use Angular's [(ngModel)] syntax ("banana in a box") to bind the checkbox state to a component property. Changes in the checkbox reflect immediately in the bound variable, and programmatic changes to the variable update the checkbox.

Requirements: Import FormsModule alongside CheckBoxModule.

import { CheckBoxModule, SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, SwitchModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <table>
        <tr>
          <td><label>Wi-Fi</label></td>
          <td><ejs-checkbox [(ngModel)]="checkedWifi"></ejs-checkbox></td>
          <td><ejs-switch [(checked)]="checkedWifi"></ejs-switch></td>
        </tr>
        <tr>
          <td><label>Bluetooth</label></td>
          <td><ejs-checkbox [(ngModel)]="checkedBluetooth"></ejs-checkbox></td>
          <td><ejs-switch [(checked)]="checkedBluetooth"></ejs-switch></td>
        </tr>
      </table>
    </div>`
})
export class AppComponent {
  public checkedWifi: boolean = true;
  public checkedBluetooth: boolean = false;
}

How it works: When the CheckBox changes state, checkedWifi updates, which in turn updates the Switch, and vice versa.

---

Enable Right-to-Left

Set enableRtl to true for right-to-left locales (Arabic, Hebrew, Persian, etc.). The checkbox frame and label mirror horizontally:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default" [enableRtl]="true"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

---

Customize CheckBox Appearance

Provide custom CSS classes via cssClass to override the default visual style.

Color Variants

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Primary" cssClass="e-primary" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Success" cssClass="e-success" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Info" cssClass="e-info" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Warning" cssClass="e-warning" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Danger" cssClass="e-danger" [checked]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

Define matching CSS rules in styles.css targeting .e-checkbox-wrapper.{class} .e-frame.

Round Frame

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Buy Groceries" cssClass="e-custom" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Pay Rent" cssClass="e-custom"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

/* styles.css */
.e-checkbox-wrapper.e-custom .e-frame {
  border-radius: 100%;
}
.e-checkbox-wrapper.e-custom .e-frame.e-check {
  background-color: #05b510;
  border-color: #05b510;
  border-radius: 100%;
}

---

Programmatic Access with ViewChild

Use Angular's @ViewChild to call CheckBox methods programmatically:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox #checkbox label="Option"></ejs-checkbox>
    <button (click)="focusCheckbox()">Focus</button>
    <button (click)="clickCheckbox()">Toggle</button>`
})
export class AppComponent {
  @ViewChild('checkbox') public checkbox!: CheckBoxComponent;

  focusCheckbox(): void {
    this.checkbox.focusIn();
  }

  clickCheckbox(): void {
    this.checkbox.click();
  }
}

Available methods:

Label and Size — Syncfusion Angular CheckBox

Table of Contents

• Label
• Label Position
• Size Variants

---

Label

The label property defines the caption displayed next to the CheckBox. It eliminates the need for a separate <label> HTML element:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Accept Terms and Conditions"></ejs-checkbox>`
})
export class AppComponent { }

Default: '' (no label rendered)

---

Label Position

Use the labelPosition property to place the label before or after the checkbox frame.

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <!-- Label on the left -->
        <li><ejs-checkbox label="Left Side Label" labelPosition="Before"></ejs-checkbox></li>

        <!-- Label on the right (default) -->
        <li><ejs-checkbox label="Right Side Label" [checked]="true"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

Gotcha: labelPosition="Before" physically places the label before the checkbox in the DOM, so tab order and screen readers follow the label first.

---

Size Variants

The CheckBox comes in two sizes: default and small. Control size via the cssClass property:

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <!-- Small CheckBox -->
        <li><ejs-checkbox label="Small" cssClass="e-small"></ejs-checkbox></li>

        <!-- Default CheckBox -->
        <li><ejs-checkbox label="Default"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

Tip: Combine size with other custom classes: cssClass="e-small e-primary" applies both small size and primary color.

Style and Appearance — Syncfusion Angular CheckBox

Table of Contents

• Overview
• Color Variants
• Custom Frame Shape
• Custom Check Icon

---

Overview

CheckBox appearance is customized using the cssClass property combined with CSS rules. Define custom CSS classes targeting the Syncfusion CheckBox elements and pass the class names via cssClass.

---

Color Variants

Create themed checkboxes (primary, success, info, warning, danger) by defining CSS rules that override the background and border colors:

Component template:

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <li><ejs-checkbox label="Primary" cssClass="e-primary" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Success" cssClass="e-success" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Info" cssClass="e-info" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Warning" cssClass="e-warning" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Danger" cssClass="e-danger" [checked]="true"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

styles.css — example CSS for color variants:

/* Primary */
.e-checkbox-wrapper.e-primary .e-frame.e-check,
.e-checkbox-wrapper.e-primary .e-frame:hover {
  background-color: #e3165b;
  border-color: #e3165b;
}

/* Success */
.e-checkbox-wrapper.e-success .e-frame.e-check,
.e-checkbox-wrapper.e-success .e-frame:hover {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

/* Info */
.e-checkbox-wrapper.e-info .e-frame.e-check,
.e-checkbox-wrapper.e-info .e-frame:hover {
  background-color: #03A9F4;
  border-color: #03A9F4;
}

/* Warning */
.e-checkbox-wrapper.e-warning .e-frame.e-check,
.e-checkbox-wrapper.e-warning .e-frame:hover {
  background-color: #FF9800;
  border-color: #FF9800;
}

/* Danger */
.e-checkbox-wrapper.e-danger .e-frame.e-check,
.e-checkbox-wrapper.e-danger .e-frame:hover {
  background-color: #F44336;
  border-color: #F44336;
}

Tip: Target .e-checkbox-wrapper.{your-class} .e-frame selectors to override the checkbox frame without affecting other components.

---

Custom Frame Shape

Customize the checkbox frame shape by overriding the border-radius CSS property. The following example creates round (circular) checkboxes using an e-custom class:

Component template:

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <li><ejs-checkbox label="Buy Groceries" cssClass="e-custom" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Pay Rent" cssClass="e-custom"></ejs-checkbox></li>
        <li><ejs-checkbox label="Make Dinner" cssClass="e-custom"></ejs-checkbox></li>
        <li><ejs-checkbox label="Finish To-do List Article" cssClass="e-custom"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

styles.css — round frame:

.e-checkbox-wrapper.e-custom .e-frame {
  border-radius: 100%;
}

.e-checkbox-wrapper.e-custom .e-frame.e-check {
  background-color: #05b510;
  border-color: #05b510;
  border-radius: 100%;
}

Use case: Round checkboxes work well for to-do lists and task management UIs.

---

Custom Check Icon

Override the check icon appearance — including the icon content, background color, and border color — by targeting the .e-check pseudo-element. The following example uses an e-checkicon class:

Component template:

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ul>
        <li><ejs-checkbox label="Buy Groceries" cssClass="e-checkicon" [checked]="true"></ejs-checkbox></li>
        <li><ejs-checkbox label="Pay Rent" cssClass="e-checkicon"></ejs-checkbox></li>
        <li><ejs-checkbox label="Make Dinner" cssClass="e-checkicon"></ejs-checkbox></li>
        <li><ejs-checkbox label="Finish To-do List Article" cssClass="e-checkicon"></ejs-checkbox></li>
      </ul>
    </div>`
})
export class AppComponent { }

styles.css — custom icon:

.e-checkbox-wrapper.e-checkicon .e-frame.e-check::before {
  content: '\e7ff';  /* Use any supported icon code */
}

.e-checkbox-wrapper.e-checkicon:hover .e-frame,
.e-checkbox-wrapper.e-checkicon .e-frame.e-check {
  background-color: #f44336;
  border-color: #f44336;
}

Tip: You can use Syncfusion icon codes from the e-icons font or replace with Font Awesome / Material Icons by adjusting font-family and content.

Accessibility — Syncfusion Angular ColorPicker

Table of Contents

• Compliance Overview
• WAI-ARIA Attributes
• Keyboard Navigation
• Ensuring Accessibility in Your App

---

Compliance Overview

The Syncfusion Angular ColorPicker component is built to meet major accessibility standards:

---

WAI-ARIA Attributes

The ColorPicker follows WAI-ARIA patterns and applies the following ARIA attributes automatically:

No extra ARIA configuration is needed — all attributes are managed automatically.

---

Keyboard Navigation

Full keyboard support is provided for both the picker gradient area and the palette grid:

Arrow key behavior:

• In Picker mode: moves the gradient selection handle to adjust hue/saturation
• In Palette mode: navigates between palette tiles

---

Ensuring Accessibility in Your App

When integrating the ColorPicker, follow these guidelines to maintain full accessibility:

1. Always provide a visible label:

<label for="theme-color">Theme Color</label>
<ejs-input ejs-colorpicker type="color" id="theme-color"></ejs-input>

2. Use sufficient color contrast in your surrounding UI — the ColorPicker itself meets contrast requirements, but preview areas you build should also meet WCAG AA (4.5:1) contrast ratios.

3. Test with screen readers (NVDA, JAWS, VoiceOver). The component announces color names and selection state automatically.

4. Validate with tools:

• accessibility-checker
• axe-core
• Live demo: https://ej2.syncfusion.com/accessibility/color-picker.html

5. Avoid relying solely on color to convey information in your app — pair color selections with text labels or values (the change event's args.currentValue.hex can be displayed alongside the picker).

API Reference — Syncfusion Angular ColorPicker

Component: ColorPickerComponent Import: import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs'; Source: https://ej2.syncfusion.com/angular/documentation/api/color-picker/

Table of Contents

• Properties
• Methods
• Events
• Type References

---

Properties

columns

number — Default: 10

Number of columns rendered in the palette grid. Controls how many swatches appear per row.

<ejs-input ejs-colorpicker type="color" mode="Palette" [columns]="4"></ejs-colorpicker>

---

createPopupOnClick

boolean — Default: false

When true, the popup DOM element is created only when the picker is first opened (lazy creation). When false, the popup DOM is created on component initialization.

<ejs-input ejs-colorpicker type="color" [createPopupOnClick]="true"></ejs-colorpicker>

---

cssClass

string — Default: ''

CSS class(es) applied to the root element. Use to scope custom styles or apply built-in utility classes.

Built-in utility values:

• "e-hide-value" — hides the hex/RGB input area in Picker mode

<ejs-input ejs-colorpicker type="color" cssClass="e-hide-value my-custom-picker"></ejs-colorpicker>

---

disabled

boolean — Default: false

Disables the component. When true, the SplitButton appears dimmed and the popup cannot be opened.

<ejs-input ejs-colorpicker type="color" [disabled]="true"></ejs-colorpicker>

---

enableOpacity

boolean — Default: true

Shows or hides the opacity slider. When false, colors are always fully opaque and the hex value uses 6 digits.

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

---

enablePersistence

boolean — Default: false

Persists the component's selected color value in localStorage. The value is restored on the next page load. Requires a unique id prop to work correctly.

<ejs-input ejs-colorpicker type="color" id="theme-picker" [enablePersistence]="true"></ejs-colorpicker>

---

enableRtl

boolean — Default: false

Renders the component in right-to-left direction for RTL languages (Arabic, Hebrew, etc.).

<ejs-input ejs-colorpicker type="color" [enableRtl]="true" locale="ar-AE"></ejs-colorpicker>

---

inline

boolean — Default: false

When true, renders the ColorPicker container directly in the page flow (no SplitButton trigger, no popup). When false (default), renders as a SplitButton that opens a popup.

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

---

locale

string — Default: ''

Overrides the global culture/localization for this component instance. Pass a BCP 47 locale string (e.g., "de-DE", "ar-AE"). Requires a matching translation object loaded via L10n.load().

<ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>

---

mode

'Picker' | 'Palette' — Default: 'Picker'

Determines which panel is displayed initially:

• 'Picker' — HSV gradient area with hue and opacity sliders
• 'Palette' — Grid of color swatches

<ejs-input ejs-colorpicker type="color" mode="Palette"></ejs-colorpicker>

---

modeSwitcher

boolean — Default: true

Shows or hides the mode switcher button that lets users toggle between Picker and Palette.

<!-- Palette only, no ability to switch -->
<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false"></ejs-colorpicker>

---

noColor

boolean — Default: false

Adds a "no color" tile as the first tile in the palette. Clicking it clears the selected color (sets value to empty string).

Always combine with [modeSwitcher]="false" — the no-color tile only exists in palette mode.

<ejs-input ejs-colorpicker type="color" mode="Palette" [noColor]="true" [modeSwitcher]="false"></ejs-colorpicker>

---

presetColors

{ [key: string]: string[] } — Default: null

Loads custom color groups into the palette. Each key is a group name; each value is an array of hex color strings.

const presets = {
  brand: ['#0078d4', '#106ebe', '#005a9e'],
  accent: ['#e81123', '#ff8c00', '#00b294']
};
<ejs-input ejs-colorpicker type="color" mode="Palette" [presetColors]="presets"></ejs-colorpicker>

---

showButtons

boolean — Default: true

Shows or hides the Apply and Cancel control buttons.

• When true: change event fires on Apply click
• When false: change event fires immediately on color selection; popup closes automatically

<ejs-input ejs-colorpicker type="color" [showButtons]="false"></ejs-colorpicker>

---

showRecentColors

boolean — Default: false

Displays up to 10 recently selected colors as tiles at the top of the palette. Only available in palette mode (mode="Palette").

<ejs-input ejs-colorpicker type="color" [showRecentColors]="true"></ejs-colorpicker>

---

value

string — Default: '#008000ff'

Initial color value. Accepts 3, 4, 6, or 8 digit hex codes with or without the # prefix.

<ejs-input ejs-colorpicker type="color" value="#ff5733"></ejs-colorpicker>

---

Methods

Access methods via a component reference with @ViewChild:

import { Component, ViewChild } from '@angular/core';
import { ColorPickerComponent, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" #colorPicker></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  @ViewChild('colorPicker') public colorPicker: ColorPickerComponent;
}

---

destroy()

() => void

Removes the component from the DOM and detaches all event handlers. The original input element is preserved in the DOM.

colorPicker.destroy();

---

focusIn()

() => void

Sets focus to the ColorPicker's native element.

colorPicker.focusIn();

---

getPersistData()

() => string

Returns the properties that are maintained in the persisted state as a JSON string. Used internally by enablePersistence.

const persistedData = colorPicker.getPersistData();

---

getValue(value?, type?)

(value?: string, type?: string) => string

Converts a color value to the specified format. Can be used to convert between hex, RGB, RGBA, HSV, and other formats.

// Get current value in hex
const hex = colorPicker.getValue();

// Convert a hex string to RGB
const rgb = colorPicker.getValue('#278787', 'RGB');

// Convert RGB string to Hex
const hexOut = colorPicker.getValue('rgb(38,133,133)', 'Hex');

// Convert RGB to HSV
const hsv = colorPicker.getValue('rgb(180,71.1,52.9)', 'HSV');

---

toggle()

() => void

Opens the ColorPicker popup if it is currently closed; closes it if it is currently open.

colorPicker.toggle(); // show/hide

---

Events

beforeClose

EmitType<BeforeOpenCloseEventArgs>

Fires before the ColorPicker popup closes. Set args.cancel = true to prevent closing.

<ejs-input ejs-colorpicker type="color" (beforeClose)="beforeClose($event)"></ejs-colorpicker>

---

beforeModeSwitch

EmitType<ModeSwitchEventArgs>

Fires before switching between Picker and Palette modes.

<ejs-input ejs-colorpicker type="color" (beforeModeSwitch)="beforeModeSwitch($event)"></ejs-colorpicker>

---

beforeOpen

EmitType<BeforeOpenCloseEventArgs>

Fires before the ColorPicker popup opens. Set args.cancel = true to prevent opening.

<ejs-input ejs-colorpicker type="color" (beforeOpen)="beforeOpen($event)"></ejs-colorpicker>

---

beforeTileRender

EmitType<PaletteTileEventArgs>

Fires before each palette tile is rendered. Use to add custom CSS classes or modify the tile element.

<ejs-input ejs-colorpicker type="color" (beforeTileRender)="tileRender($event)"></ejs-colorpicker>

---

change

EmitType<ColorPickerEventArgs>

Fires when the selected color is confirmed/applied.

• If [showButtons]="true": fires when Apply is clicked
• If [showButtons]="false": fires immediately on color selection

<ejs-input ejs-colorpicker type="color" (change)="onChange($event)"></ejs-colorpicker>

---

created

EmitType<Event>

Fires once after the component has finished rendering.

<ejs-input ejs-colorpicker type="color" (created)="onCreated($event)"></ejs-colorpicker>

---

onModeSwitch

EmitType<ModeSwitchEventArgs>

Fires after switching between Picker and Palette modes (after the switch completes).

<ejs-input ejs-colorpicker type="color" (onModeSwitch)="afterSwitch($event)"></ejs-colorpicker>

---

open

EmitType<OpenEventArgs>

Fires after the ColorPicker popup has opened.

<ejs-input ejs-colorpicker type="color" (open)="onOpen($event)"></ejs-colorpicker>

---

select

EmitType<ColorPickerEventArgs>

Fires when a color is selected in the picker or palette while [showButtons]="true". This fires before Apply — use it to preview the color before it is confirmed.

<ejs-input ejs-colorpicker type="color" [showButtons]="true" (select)="onSelect($event)"></ejs-colorpicker>

---

Type References

ColorPickerEventArgs

{
  currentValue: { hex: string; rgba: string };
  previousValue: { hex: string; rgba: string };
  value: string;
}

ModeSwitchEventArgs

{
  mode: 'Picker' | 'Palette';
}

PaletteTileEventArgs

{
  element: HTMLElement; // The tile <span> element
  value: string;        // The tile's color value
}

BeforeOpenCloseEventArgs

{
  cancel: boolean;      // Set to true to prevent open/close
  element: HTMLElement;
}

OpenEventArgs

{
  element: HTMLElement; // The popup element
}