New to KendoReact? Start a free 30-day trial

RatingProps

Interface

Represents the properties of Rating component.

Definition

Package:@progress/kendo-react-inputs

Properties

ariaDescribedBy?

string

Identifies the element(s) which will describe the component.

Example:

jsx

<Rating ariaDescribedBy="description-id" />

ariaLabel?

string

Sets the aria-label attribute of the component.

Example:

jsx

<Rating ariaLabel="Product rating" />

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

Example:

jsx

<Rating ariaLabelledBy="label-id" />

className?

string

Adds custom CSS classes to the Rating.

Example:

jsx

<Rating className="custom-class" value={4} />

defaultValue?

number

Sets the default value of the Rating, used in uncontrolled mode.

Example:

jsx

<Rating defaultValue={2} />

dir?

string

Specifies the direction of the Rating (ltr or rtl).

Example:

jsx

<Rating dir="rtl" />

disabled?

boolean

Disables the Rating when set to true.

Example:

jsx

<Rating disabled={true} />

icon?

string

Sets a custom icon for the Rating.

Example:

jsx

<Rating icon="star" />

id?

string

Sets the id property of the top div element of the Rating.

Example:

jsx

<Rating id="rating-component" value={3} />

item?

ComponentType<RatingItemProps>

Represents the rendered Rating item.

Example:

jsx

<Rating item={(props) => <RatingItem {...props}>{props.value}</RatingItem>} />

label?

ReactNode

Sets a custom label for the Rating.

Example:

jsx

<Rating label="Rating Label" />

max?

number

Sets the maximum possible value of the Rating.

Example:

jsx

<Rating max={10} />

min?

number

Sets the minimum possible value of the Rating.

Example:

jsx

<Rating min={1} max={10} />

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

onBlur?

(event: RatingItemFocusEvent) => void

Fires when the Rating loses focus.

Parameters:eventRatingItemFocusEvent

Example:

jsx

<Rating onBlur={(event) => console.log('Blurred')} />

onChange?

(event: RatingChangeEvent) => void

Fires when the value of the Rating changes.

Parameters:eventRatingChangeEvent

Example:

jsx

<Rating onChange={(event) => console.log(event.value)} />

onClick?

(event: RatingItemMouseEvent) => void

Fires when the Rating is clicked.

Parameters:eventRatingItemMouseEvent

Example:

jsx

<Rating onClick={(event) => console.log(event.value)} />

onFocus?

(event: RatingItemFocusEvent) => void

Fires when the Rating is focused.

Parameters:eventRatingItemFocusEvent

Example:

jsx

<Rating onFocus={(event) => console.log('Focused')} />

onKeyDown?

(event: RatingKeyboardEvent) => void

Fires when a key is pressed while the Rating is focused.

Parameters:eventRatingKeyboardEvent

Example:

jsx

<Rating onKeyDown={(event) => console.log(event.value)} />

precision?

"item" | "half"

Determines the precision of the Rating (item or half).

Example:

jsx

<Rating precision="half" />

readonly?

boolean

Sets the readonly mode of the Rating.

Example:

jsx

<Rating readonly={true} value={4} />

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

selection?

"continues" | "single"

Determines the selection mode of the Rating (continues or single).

Example:

jsx

<Rating selection="single" />

step?

number

Sets the step value between the minimum and maximum values.

Example:

jsx

<Rating step={0.5} />

style?

CSSProperties

Sets additional CSS styles to the Rating.

Example:

jsx

<Rating style={{ margin: '10px' }} value={5} />

svgIcon?

SVGIcon

Sets a custom SVG icon for the Rating.

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Rating svgIcon={gearIcon} />

svgIconOutline?

SVGIcon

Sets a custom outline SVG icon for the Rating.

Example:

jsx

<Rating svgIconOutline={customOutlineSvgIcon} />

tabIndex?

number

Sets the tabIndex attribute.

Example:

jsx

<Rating tabIndex={0} value={2} />

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

number

Sets the current value of the Rating, used in controlled mode.

Example:

jsx

<Rating value={3} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.