RatingProps

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

Name	Type	Default	Description
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?	React.ReactNode		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} />