Rating

Die Rating Component ermöglicht die Eingabe und Darstellung einer Bewertung — standardmäßig mit fünf Sternen.

import {
  Label,
  Rating,
} from "@mittwald/flow-react-components";

<Rating>
  <Label>Bewertung</Label>
</Rating>

Best Practices

Unterstütze die visuelle Darstellung immer mit ergänzendem Kontext. Dazu eignet sich zum Beispiel ein Label‍.
Nutze innerhalb eines Interfaces eine konsistente Skalierung. Gleichartige Bewertungen erhalten dieselbe Anzahl an Segmenten und dieselben Symbole.

Sizes

Es stehen die Größen Medium oder Small zur Verfügung.

Anzahl der Segmente

Über maxValue wird die Anzahl der Segmente gesetzt. Ohne Angabe besteht ein Rating aus fünf Segmenten.

Readonly

Verwende isReadOnly, wenn du die Rating-Component nur zur Darstellung verwenden möchtest.

Alternative Icons

Über die Properties iconEmpty und iconFilled können benutzerdefinierte Icons‍ gesetzt werden.

Icons pro Segment

Soll jede Stufe ihr eigenes Symbol haben, werden die Segmente einzeln über <RatingSegment /> in das Rating gelegt. Jedes Segment unterstützt eigene iconEmpty- und iconFilled-Icons und überschreibt damit die Icons des Ratings. Sind Segmente angegeben, bestimmen sie die Anzahl der Segmente.

Über aria-label lassen sich die automatischen Labels („3 von 5") pro Segment überschreiben.

Über fill wird zusätzlich gesteuert, welche Segmente als gefüllt dargestellt werden: Cumulative füllt alle Segmente bis zum Wert (Standard, das Verhalten einer Sternebewertung), Single nur das gewählte Segment.

Wie zufrieden bist du?(optional)

Kombiniere mit ...

BigNumber

Das Rating kann mit einer BigNumber‍ kombiniert werden, um den Wert der BigNumber visuell besser einordnen zu können.

AccentBox

Zur visuellen Hervorhebung kann das Rating innerhalb einer AccentBox‍ angezeigt werden.

Properties

Property	Type	Description
`children`	ReactNode
`className`	ClassNameOrFunction<RadioGroupRenderProps>default: 'react-aria-RadioGroup'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`defaultValue`	numberdefault: 0	The defaultValue sets the amount of default filled stars.
`dir`	string
`fill`	single \| cumulative (default)	How the segments are filled. `cumulative` fills every segment up to the value, `single` fills only the selected segment.
`form`	string	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
`hidden`	boolean
`iconEmpty`	ReactElement<unknown, string \| JSXElementConstructor<any>>	An alternative icon for the empty state
`iconFilled`	ReactElement<unknown, string \| JSXElementConstructor<any>>	An alternative icon for the filled state
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`isDisabled`	boolean	Whether the input is disabled.
`isInvalid`	boolean	Whether the input value is invalid.
`isReadOnly`	boolean	Whether the input can be selected but not changed by the user.
`isRequired`	boolean	Whether user input is required on the input before form submission.
`lang`	string
`maxValue`	numberdefault: 5	The number of segments the rating consists of. Ignored when the rating has `RatingSegment` children — those define the number of segments themselves.
`name`	string	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`orientation`	horizontal \| vertical (default)	The axis the Radio Button(s) should align with.
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`size`	s \| m (default)	The size of the component.
`slot`	string	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	yes \| no
`validate`	((value: TimeValue) => true \| ValidationError \| null)	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`validationBehavior`	native (default) \| aria	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`value`	numberdefault: 0	The value sets the amount of filled stars.
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onChange`	((value: TimeValue \| null) => void)	Handler that is called when the value changes.
`onClick`	MouseEventHandler<HTMLDivElement>
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-errormessage`	string	Identifies the element that provides an error message for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components

Integrations