HelpBot Assistant

How can I help you?

Sizing in React TextBox component

21 Feb 20267 minutes to read

Render the TextBox component in three predefined sizes to match your design requirements:

Size Description CSS Class
Normal Default size rendering (no class required)
Small Compact size for space-constrained layouts e-small
Large Larger size for better visibility and touch targets e-bigger

Note: Apply size classes using the cssClass property. You can also create custom size variations by adding your own CSS classes to the TextBox component for tailored styling.

[Class-component]

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'));
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]

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'));
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'));