diff --git a/src/components/FieldStarRating/FieldStarRating.css b/src/components/FieldStarRating/FieldStarRating.css
new file mode 100644
index 00000000..08e000c8
--- /dev/null
+++ b/src/components/FieldStarRating/FieldStarRating.css
@@ -0,0 +1,51 @@
+@import '../../marketplace.css';
+
+.ratingFieldSet {
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* fieldset can't use flexbox hence this wrapper exists */
+.rating {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ margin-top: 16px;
+}
+
+.rateInput {
+ display: none;
+}
+
+.label {
+ width: 30px;
+}
+
+.star {
+ fill: var(--matterColorNegative);
+}
+
+/***** CSS Magic to Highlight Stars on Hover *****/
+
+/* Star order: reverse expected (5 -> 1) and also input before label */
+
+/* show actived star when checked */
+/* and actived star when hovering over a star */
+/* and show previous stars also as activated */
+.rating > .rateInput:checked ~ .label > .star,
+.rating > .label:hover > .star,
+.rating > .label:hover ~ .label > .star {
+ fill: var(--marketplaceColor);
+}
+
+/* Darken hovered star when changing rating i.e it already is active */
+/* and darken hovered star too when changing rating (hovering inside current selection) */
+/* and darken current selection inside hovered selection */
+/* and darken hovered selection inside current selection */
+.rating > .rateInput:checked + .label:hover > .star,
+.rating > .rateInput:checked ~ .label:hover > .star,
+.rating > .label:hover ~ .rateInput:checked ~ .label > .star,
+.rating > .rateInput:checked ~ .label:hover ~ .label > .star {
+ fill: var(--marketplaceColorDark);
+}
diff --git a/src/components/FieldStarRating/FieldStarRating.example.js b/src/components/FieldStarRating/FieldStarRating.example.js
new file mode 100644
index 00000000..b84ca856
--- /dev/null
+++ b/src/components/FieldStarRating/FieldStarRating.example.js
@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import * as validators from '../../util/validators';
+import { Button } from '../../components';
+import FieldStarRating from './FieldStarRating';
+
+const formName = 'Styleguide.FieldStarRating.Form';
+
+const FormComponent = props => {
+ const { form, handleSubmit, invalid, pristine, submitting } = props;
+ const required = validators.required('This field is required');
+ const submitDisabled = invalid || pristine || submitting;
+
+ return (
+
+ );
+};
+
+FormComponent.propTypes = formPropTypes;
+
+const Form = reduxForm({
+ form: formName,
+})(FormComponent);
+
+export const StarRating = {
+ component: Form,
+ props: {
+ onSubmit: values => {
+ console.log('submit values:', values);
+ },
+ },
+ group: 'inputs',
+};
diff --git a/src/components/FieldStarRating/FieldStarRating.js b/src/components/FieldStarRating/FieldStarRating.js
new file mode 100644
index 00000000..d286da4f
--- /dev/null
+++ b/src/components/FieldStarRating/FieldStarRating.js
@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl } from 'react-intl';
+import { Field } from 'redux-form';
+import classNames from 'classnames';
+import { IconReviewStar, ValidationError } from '../../components';
+
+import css from './FieldStarRating.css';
+
+class FieldStarRatingComponent extends Component {
+ constructor(props) {
+ super(props);
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ componentWillUnmount() {
+ if (this.props.clearOnUnmount) {
+ this.props.input.onChange('');
+ }
+ }
+
+ handleChange(event) {
+ this.props.input.onChange(event.target.value);
+ }
+
+ render() {
+ /* eslint-disable no-unused-vars */
+ const {
+ rootClassName,
+ className,
+ inputRootClass,
+ clearOnUnmount,
+ customErrorText,
+ id,
+ intl,
+ label,
+ input,
+ meta,
+ ...rest
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+
+ const { touched, error } = meta;
+ const errorText = customErrorText || error;
+ const fieldMeta = { touched, error: errorText };
+
+ const { value, ...restInputProps } = input;
+ const inputProps = { ...restInputProps, type: 'radio', name: 'rating', ...rest };
+
+ const classes = classNames(rootClassName || css.root, className);
+
+ const createStarRating = starCount => {
+ let inputsAndLabels = [];
+
+ // Star inpu order: reverse order expected (5 -> 1) and also input before label
+ // This is due to CSS selectors.
+ // Sibling combinator (~) selects following siblings, but we want to select previous siblings
+ for (let i = starCount; i > 0; i--) {
+ const inputValue = `${i}`;
+ const starId = `star${i}`;
+ const inputId = `${id}.${starId}`;
+
+ inputsAndLabels.push(
+
+ );
+
+ inputsAndLabels.push(
+
+ );
+ }
+ return inputsAndLabels;
+ };
+
+ return (
+
+
+
+