Sizing in Angular TextBox component

21 Aug 20252 minutes to read

The TextBox component supports three distinct sizing options to accommodate different design requirements and user interface contexts. Each size variant maintains consistent functionality while providing visual flexibility for various application layouts.

Property	Description
Normal	By default, the TextBox is rendered with normal size.
Small	Add the `e-small` class to the cssClass property to render the TextBox in smaller size.
Large	Add the `e-bigger` class to the cssClass property to render the TextBox in larger size.

Implementation

Use the appropriate CSS class through the cssClass property to achieve the desired TextBox size. The small variant works well in compact interfaces or dense data entry forms, while the large variant provides better accessibility and prominence in primary input scenarios.

Note: Customize the TextBox appearance further by using the cssClass property. This property allows adding custom classes to the TextBox for applying additional styling to meet specific design requirements.

app.component.ts
main.ts
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
imports: [
        TextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <h4> Bigger Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-bigger"></ejs-textbox>
                <h4> Small Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-small"></ejs-textbox>
              </div>`
})

export class AppComponent {
  
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));