Leave Yamada UI a star
StarRating is a component used to allow users to provide ratings.
Description
The color of the filled icons.
Type
((value: number) => UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | ... 320 more ... | "yellow.950"> | undefined) | UIValue<...>Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"yellow"Description
The initial value of the rating.
Type
numberDefault
0Description
The empty icon for the rating.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ((value: number) => ReactNode)
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalDescription
The filled icon for the rating.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ((value: number) => ReactNode)Description
Number of fractions each item can be divided into,
Type
numberDefault
1Description
Props for the rating group.
Type
GroupPropsDescription
If true, only the selected icons will be filled.
Type
booleanDefault
falseDescription
The top-level id string that will be applied to the rating. The index of the rating item will be appended to this top-level id.
Type
stringDescription
Props for the input element.
Type
InputPropsDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
Props for the rating item.
Type
ItemPropsDescription
Number of controls that should be rendered.
Type
numberDefault
5Description
The name of the input element.
Type
stringDescription
The callback invoked when value state changes.
Type
(value: number) => voidDescription
The callback invoked when hovering over the rating.
Type
(value: number) => voidDescription
The size of the Rating.
Type
"xs" | "sm" | "md" | "lg" | "xl"Default
"md"Description
The value of the rating.
Type
numberDescription
The variant of the Rating.
Type
stringEdit this page on GitHub