Syncfusion AI Assistant

How can I help you?

Labels in React Rating Component

21 Feb 20268 minutes to read

Display a label showing the current rating value by setting the showLabel property to true.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <RatingComponent id='rating' value={3} showLabel={true}></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' value={3} showLabel= {true} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Label position

Position the label on any side of the rating using the labelPosition property.

The following label positions are supported:

  • Top: Label appears above the rating.
  • Bottom: Label appears below the rating.
  • Left: Label appears to the left of the rating.
  • Right: Label appears to the right of the rating.
// Import the Rating.
import { RatingComponent, LabelPosition } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <label>Left Label Position</label><br />
            <RatingComponent id='rating1' value={3} showLabel={true} labelPosition={LabelPosition.Left}></RatingComponent><br />
            <label>Right Label Position</label><br />
            <RatingComponent id='rating2' value={3} showLabel={true} labelPosition={LabelPosition.Right}></RatingComponent><br />
            <label>Top Label Position</label><br />
            <RatingComponent id='rating3' value={3} showLabel={true} labelPosition={LabelPosition.Top}></RatingComponent><br />
            <label>Bottom Label Position</label><br />
            <RatingComponent id='rating4' value={3} showLabel={true} labelPosition={LabelPosition.Bottom}></RatingComponent><br />
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent, LabelPosition } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <label>Left Label Position</label><br/>
            <RatingComponent id='rating1' value={3} showLabel= {true} labelPosition= {LabelPosition.Left} ></RatingComponent><br/>
            <label>Right Label Position</label><br/>
            <RatingComponent id='rating2' value={3} showLabel= {true} labelPosition= {LabelPosition.Right}></RatingComponent><br/>
            <label>Top Label Position</label><br/>
            <RatingComponent id='rating3' value={3} showLabel= {true} labelPosition= {LabelPosition.Top} ></RatingComponent><br/>
            <label>Bottom Label Position</label><br/>
            <RatingComponent id='rating4' value={3} showLabel= {true} labelPosition= {LabelPosition.Bottom} ></RatingComponent><br/>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Label template

Customize the label using the labelTemplate tag directive. The current rating value is passed as the value property in the template context, allowing you to display dynamic information about the rating.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <RatingComponent id='rating' showLabel={true} value={3} labelTemplate='<span>${value} out of 5</span>'></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' showLabel={true} value={3} labelTemplate='<span>${value} out of 5</span>' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));