Sizing in React TextBox component

21 Oct 20247 minutes to read

You can render the TextBox in three different sizes.

Property	Description
Normal	By default, the TextBox is rendered with normal size.
Small	You need to add e-small class to the cssClass property to render the TextBox in smaller size
Bigger	You need to add e-bigger class to the cssClass property to render the TextBox in bigger size

Note: You can customize the styles of the TextBox by using the cssClass property. This property allows you to add a custom class to the TextBox, which can then be used to apply your own styling to the component

[Class-component]

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
    render() {
        return (<div>
          <h4> Bigger Size </h4>
      
          <TextBoxComponent
                  id='default'
                  placeholder="Enter Name"
                  floatLabelType="Auto"
                  cssClass="e-bigger"
          />
          <h4> Small Size </h4>
      
          <TextBoxComponent
                  id='textboz'
                  placeholder="Enter Name"
                  floatLabelType="Auto"
                  cssClass="e-small"
          />
          </div>)
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
  public render() {
    return (<div>
      <h4> Bigger Size </h4>
  
      <TextBoxComponent
              id='default'
              placeholder="Enter Name"
              floatLabelType="Auto"
              cssClass="e-bigger"
      />
      <h4> Small Size </h4>
  
      <TextBoxComponent
              id='textboz'
              placeholder="Enter Name"
              floatLabelType="Auto"
              cssClass="e-small"
      />
      </div>)
  }
}

ReactDOM.render(<Default />, document.getElementById('input-container'));

[Functional-component]

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function Default() {
  return (<div>
    <h4> Bigger Size </h4>

    <TextBoxComponent
            id='default'
            placeholder="Enter Name"
            floatLabelType="Auto"
            cssClass="e-bigger"
    />
    <h4> Small Size </h4>

    <TextBoxComponent
            id='textboz'
            placeholder="Enter Name"
            floatLabelType="Auto"
            cssClass="e-small"
    />
    </div>)
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function Default() {
  return (<div>
    <h4> Bigger Size </h4>

    <TextBoxComponent
            id='default'
            placeholder="Enter Name"
            floatLabelType="Auto"
            cssClass="e-bigger"
    />
    <h4> Small Size </h4>

    <TextBoxComponent
            id='textboz'
            placeholder="Enter Name"
            floatLabelType="Auto"
            cssClass="e-small"
    />
    </div>)
}

ReactDOM.render(<Default />, document.getElementById('input-container'));