Review Form

Review Form Component

The Review Form component provides a complete form for collecting product reviews from users. It includes various field types such as ratings, text input, text area, and dropdown selection.

Example

Preview Code

Copy

Submit A Review

We value your honest feedback about your experience with our product. Please be specific about what you liked or disliked, including any features that stood out to you. If applicable, mention how long you've been using our product, any issues you encountered, and suggestions for improvement. Detailed reviews help us enhance our offerings and assist other customers in making informed decisions. Thank you for taking the time to share your thoughts!

RatingRequired

Review TitleRequired

Your ReviewRequired

0/5000

NicknameRequired

Age RangeOptional

Select your age range

• 18-24
• 25-34
• 35-44
• 45-54
• 55-64
• 65+

GenderOptional

Select your gender

• Male
• Female
• Other

Submit Review

<div class="w-full "><div class="flex flex-col md:flex-row md:gap-20"><div class="md:w-1/2 mb-6 md:mb-0"><h2 class="text-xl font-bold mb-2">Submit A Review</h2><p>We value your honest feedback about your experience with our product. Please be specific about what you liked or disliked, including any features that stood out to you. If applicable, mention how long you&#x27;ve been using our product, any issues you encountered, and suggestions for improvement. Detailed reviews help us enhance our offerings and assist other customers in making informed decisions. Thank you for taking the time to share your thoughts!</p></div><div class="md:w-1/2"><form class="skin-form" noValidate=""><div class="space-y-2"><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="satisfaction">Rating</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><div class="rating-input skin-primary wrapper [--rating-icon-size:32px] ml-2" role="radiogroup" aria-required="true"><input type="radio" id="satisfaction-1" aria-label="1 star" required="" aria-invalid="false" name="satisfaction" value="1"/><input type="radio" id="satisfaction-2" aria-label="2 stars" required="" aria-invalid="false" name="satisfaction" value="2"/><input type="radio" id="satisfaction-3" aria-label="3 stars" required="" aria-invalid="false" name="satisfaction" value="3"/><input type="radio" id="satisfaction-4" aria-label="4 stars" required="" aria-invalid="false" name="satisfaction" value="4"/><input type="radio" id="satisfaction-5" aria-label="5 stars" required="" aria-invalid="false" name="satisfaction" value="5"/></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="title">Review Title</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><input id="title" required="" aria-invalid="false" class="input-field skin-form !text-body placeholder:soft interactive " name="title"/></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="message">Your Review</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div><span class="text-sm soft " aria-hidden="true" id="message-char-limit">0<!-- -->/<!-- -->5000</span></div><div class="input-field-wrapper"><div class="skin-form input-wrapper w-full"><textarea id="message" name="message" required="" aria-invalid="false" maxLength="5000" class="input-field !text-body placeholder:soft interactive "></textarea><svg class="resize-handle soft" viewBox="0 0 16 16" fill="currentColor"><path d="M12.9627 2L2 12.9843L3.01375 14L13.9764 3.01575L12.9627 2Z"></path><path d="M6.50295 12.9843L12.9862 6.48819L14 7.50394L7.5167 14L6.50295 12.9843Z"></path><path d="M11.0766 12.937L12.9862 11.0236L14 12.0394L12.0904 13.9528L11.0766 12.937Z"></path></svg></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="nickname">Nickname</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><input id="nickname" placeholder="Review Title" required="" aria-invalid="false" class="input-field skin-form !text-body placeholder:soft interactive " name="nickname"/></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="age">Age Range</label><span class="text-sm font-light soft" aria-hidden="true">Optional</span></div></div><div class="input-field-wrapper"><div class="skin-form dropdown-wrapper group  w-full" aria-invalid="false"><input type="hidden" name="age" value=""/><div class="dropdown"><div class="wrapper" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="dropdown-list-age" aria-controls="dropdown-list-age"><button id="dropdown-trigger-age" class="dropdown-summary interactive" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-list-age" aria-labelledby="dropdown-label-age" aria-autocomplete="none" type="button" aria-required="false"><div class="dropdown-summary-content"><svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg><span id="selected-value-dropdown-trigger-age" class="text-body">Select your age range</span><svg class="dropdown-icon chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></div></button></div><div class="dropdown-content-wrapper"><ul id="dropdown-list-age" class="dropdown-list" role="listbox" aria-labelledby="dropdown-label-age" tabindex="-1"><li role="option" id="dropdown-list-age-option-1" class="text-body interactive " aria-selected="false" tabindex="-1">18-24</li><li role="option" id="dropdown-list-age-option-2" class="text-body interactive " aria-selected="false" tabindex="-1">25-34</li><li role="option" id="dropdown-list-age-option-3" class="text-body interactive " aria-selected="false" tabindex="-1">35-44</li><li role="option" id="dropdown-list-age-option-4" class="text-body interactive " aria-selected="false" tabindex="-1">45-54</li><li role="option" id="dropdown-list-age-option-5" class="text-body interactive " aria-selected="false" tabindex="-1">55-64</li><li role="option" id="dropdown-list-age-option-6" class="text-body interactive " aria-selected="false" tabindex="-1">65+</li></ul></div></div></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="gender">Gender</label><span class="text-sm font-light soft" aria-hidden="true">Optional</span></div></div><div class="input-field-wrapper"><div class="skin-form dropdown-wrapper group  w-full" aria-invalid="false"><input type="hidden" name="gender" value=""/><div class="dropdown"><div class="wrapper" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="dropdown-list-gender" aria-controls="dropdown-list-gender"><button id="dropdown-trigger-gender" class="dropdown-summary interactive" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-list-gender" aria-labelledby="dropdown-label-gender" aria-autocomplete="none" type="button" aria-required="false"><div class="dropdown-summary-content"><svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg><span id="selected-value-dropdown-trigger-gender" class="text-body">Select your gender</span><svg class="dropdown-icon chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></div></button></div><div class="dropdown-content-wrapper"><ul id="dropdown-list-gender" class="dropdown-list" role="listbox" aria-labelledby="dropdown-label-gender" tabindex="-1"><li role="option" id="dropdown-list-gender-option-1" class="text-body interactive " aria-selected="false" tabindex="-1">Male</li><li role="option" id="dropdown-list-gender-option-2" class="text-body interactive " aria-selected="false" tabindex="-1">Female</li><li role="option" id="dropdown-list-gender-option-3" class="text-body interactive " aria-selected="false" tabindex="-1">Other</li></ul></div></div></div></div><div class="input-helper-wrapper"></div></div></div></div><div class="mt-6 "><button class="interactive btn skin-primary-emphasised interactive w-full" type="submit">Submit Review</button></div></form></div></div></div>

<div class="w-full "><div class="flex flex-col md:flex-row md:gap-20"><div class="md:w-1/2 mb-6 md:mb-0"><h2 class="text-xl font-bold mb-2">Submit A Review</h2><p>We value your honest feedback about your experience with our product. Please be specific about what you liked or disliked, including any features that stood out to you. If applicable, mention how long you&#x27;ve been using our product, any issues you encountered, and suggestions for improvement. Detailed reviews help us enhance our offerings and assist other customers in making informed decisions. Thank you for taking the time to share your thoughts!</p></div><div class="md:w-1/2"><form class="skin-form" noValidate=""><div class="space-y-2"><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="satisfaction">Rating</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><div class="rating-input skin-primary wrapper [--rating-icon-size:32px] ml-2" role="radiogroup" aria-required="true"><input type="radio" id="satisfaction-1" aria-label="1 star" required="" aria-invalid="false" name="satisfaction" value="1"/><input type="radio" id="satisfaction-2" aria-label="2 stars" required="" aria-invalid="false" name="satisfaction" value="2"/><input type="radio" id="satisfaction-3" aria-label="3 stars" required="" aria-invalid="false" name="satisfaction" value="3"/><input type="radio" id="satisfaction-4" aria-label="4 stars" required="" aria-invalid="false" name="satisfaction" value="4"/><input type="radio" id="satisfaction-5" aria-label="5 stars" required="" aria-invalid="false" name="satisfaction" value="5"/></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="title">Review Title</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><input id="title" required="" aria-invalid="false" class="input-field skin-form !text-body placeholder:soft interactive " name="title"/></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="message">Your Review</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div><span class="text-sm soft " aria-hidden="true" id="message-char-limit">0<!-- -->/<!-- -->5000</span></div><div class="input-field-wrapper"><div class="skin-form input-wrapper w-full"><textarea id="message" name="message" required="" aria-invalid="false" maxLength="5000" class="input-field !text-body placeholder:soft interactive "></textarea><svg class="resize-handle soft" viewBox="0 0 16 16" fill="currentColor"><path d="M12.9627 2L2 12.9843L3.01375 14L13.9764 3.01575L12.9627 2Z"></path><path d="M6.50295 12.9843L12.9862 6.48819L14 7.50394L7.5167 14L6.50295 12.9843Z"></path><path d="M11.0766 12.937L12.9862 11.0236L14 12.0394L12.0904 13.9528L11.0766 12.937Z"></path></svg></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="nickname">Nickname</label><span class="text-sm font-light soft" aria-hidden="true">Required</span></div></div><div class="input-field-wrapper"><input id="nickname" placeholder="Review Title" required="" aria-invalid="false" class="input-field skin-form !text-body placeholder:soft interactive " name="nickname"/></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="age">Age Range</label><span class="text-sm font-light soft" aria-hidden="true">Optional</span></div></div><div class="input-field-wrapper"><div class="skin-form dropdown-wrapper group  w-full" aria-invalid="false"><input type="hidden" name="age" value=""/><div class="dropdown"><div class="wrapper" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="dropdown-list-age" aria-controls="dropdown-list-age"><button id="dropdown-trigger-age" class="dropdown-summary interactive" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-list-age" aria-labelledby="dropdown-label-age" aria-autocomplete="none" type="button" aria-required="false"><div class="dropdown-summary-content"><svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg><span id="selected-value-dropdown-trigger-age" class="text-body">Select your age range</span><svg class="dropdown-icon chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></div></button></div><div class="dropdown-content-wrapper"><ul id="dropdown-list-age" class="dropdown-list" role="listbox" aria-labelledby="dropdown-label-age" tabindex="-1"><li role="option" id="dropdown-list-age-option-1" class="text-body interactive " aria-selected="false" tabindex="-1">18-24</li><li role="option" id="dropdown-list-age-option-2" class="text-body interactive " aria-selected="false" tabindex="-1">25-34</li><li role="option" id="dropdown-list-age-option-3" class="text-body interactive " aria-selected="false" tabindex="-1">35-44</li><li role="option" id="dropdown-list-age-option-4" class="text-body interactive " aria-selected="false" tabindex="-1">45-54</li><li role="option" id="dropdown-list-age-option-5" class="text-body interactive " aria-selected="false" tabindex="-1">55-64</li><li role="option" id="dropdown-list-age-option-6" class="text-body interactive " aria-selected="false" tabindex="-1">65+</li></ul></div></div></div></div><div class="input-helper-wrapper"></div></div></div><div class="w-full"><div class="space-y-1 wrapper group skin-form 
      }"><div class="flex justify-between items-center mx-2 "><div class="flex items-center space-x-2"><label class="text-body font-semi-bold" for="gender">Gender</label><span class="text-sm font-light soft" aria-hidden="true">Optional</span></div></div><div class="input-field-wrapper"><div class="skin-form dropdown-wrapper group  w-full" aria-invalid="false"><input type="hidden" name="gender" value=""/><div class="dropdown"><div class="wrapper" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="dropdown-list-gender" aria-controls="dropdown-list-gender"><button id="dropdown-trigger-gender" class="dropdown-summary interactive" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-list-gender" aria-labelledby="dropdown-label-gender" aria-autocomplete="none" type="button" aria-required="false"><div class="dropdown-summary-content"><svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg><span id="selected-value-dropdown-trigger-gender" class="text-body">Select your gender</span><svg class="dropdown-icon chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></div></button></div><div class="dropdown-content-wrapper"><ul id="dropdown-list-gender" class="dropdown-list" role="listbox" aria-labelledby="dropdown-label-gender" tabindex="-1"><li role="option" id="dropdown-list-gender-option-1" class="text-body interactive " aria-selected="false" tabindex="-1">Male</li><li role="option" id="dropdown-list-gender-option-2" class="text-body interactive " aria-selected="false" tabindex="-1">Female</li><li role="option" id="dropdown-list-gender-option-3" class="text-body interactive " aria-selected="false" tabindex="-1">Other</li></ul></div></div></div></div><div class="input-helper-wrapper"></div></div></div></div><div class="mt-6 "><button class="interactive btn skin-primary-emphasised interactive w-full" type="submit">Submit Review</button></div></form></div></div></div>

Usage

import SampleForm from "@altitude/ui/react/blocks/review-form";

export default function MyPage() {
  return <SampleForm />;
}

Key Features

• Complete form with validation
• Multiple field types
• Customizable submission handling
• Success state handling