New to KendoReactLearn about KendoReact Free.

RatingProps

Represents the properties of [Rating](% slug api_inputs_rating %) component.

NameTypeDefaultDescription

ariaDescribedBy?

string

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

jsx
<Rating ariaDescribedBy="description-id" />

ariaLabelledBy?

string

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

jsx
<Rating ariaLabelledBy="label-id" />

children?

React.ReactNode

Determines the children nodes.

jsx
<Rating>
  <span>Custom Child</span>
</Rating>

className?

string

Adds custom CSS classes to the Rating.

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

defaultValue?

number

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

jsx
<Rating defaultValue={2} />

dir?

string

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

jsx
<Rating dir="rtl" />

disabled?

boolean

Disables the Rating when set to true.

jsx
<Rating disabled={true} />

half?

boolean

Determines if the value represents a half icon (true) or not (false).

jsx
<Rating half={true} />

icon?

string

Sets a custom icon for the Rating.

jsx
<Rating icon="star" />

id?

string

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

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

item?

React.ComponentType<RatingItemProps>

Represents the rendered Rating item.

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

label?

string

Sets a custom label for the Rating.

jsx
<Rating label="Rating Label" />

max?

number

Sets the maximum possible value of the Rating.

jsx
<Rating max={10} />

min?

number

Sets the minimum possible value of the Rating.

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.

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

onChange?

(event: RatingChangeEvent) => void

Fires when the value of the Rating changes.

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

onClick?

(event: RatingItemMouseEvent) => void

Fires when the Rating is clicked.

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

onFocus?

(event: RatingItemFocusEvent) => void

Fires when the Rating is focused.

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

onKeyDown?

(event: RatingKeyboardEvent) => void

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

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

precision?

"item" | "half"

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

jsx
<Rating precision="half" />

readonly?

boolean

Sets the readonly mode of the Rating.

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?

"single" | "continues"

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

jsx
<Rating selection="single" />

step?

number

Sets the step value between the minimum and maximum values.

jsx
<Rating step={0.5} />

style?

React.CSSProperties

Sets additional CSS styles to the Rating.

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

svgIcon?

SVGIcon

Sets a custom SVG icon for the Rating.

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

<Rating svgIcon={gearIcon} />

svgIconOutline?

SVGIcon

Sets a custom outline SVG icon for the Rating.

jsx
<Rating svgIconOutline={customOutlineSvgIcon} />

tabIndex?

number

Sets the tabIndex attribute.

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.

jsx
<Rating value={3} />
Not finding the help you need?
Contact Support