Product Reviews

Open source

Review sections — an average-score summary with a rating-distribution breakdown beside a list of individual customer reviews.

Add to page builder

2 of 3

resources/views/blocks/product-reviews-write.blade.php Blade

@props([
    'action'      => '#',
    'productName' => 'this product',
    'maxChars'    => 500,
])

<x-ui.section space="md" {{ $attributes }}>
    <x-ui.container size="sm" gutter="sm">
        <x-ui.card>
            <x-ui.card.header>
                <x-ui.card.title>{{ __('Write a review') }}</x-ui.card.title>
                <x-ui.card.description>{{ __('Share your experience with :product to help other shoppers.', ['product' => $productName]) }}</x-ui.card.description>
            </x-ui.card.header>

            <x-ui.card.content>
                <form id="review-form-01-form" method="POST" action="{{ $action }}" class="space-y-6">
                    @csrf

                    <x-ui.field>
                        {{-- The rating root is a div (role="slider"), which a <label for> cannot
                             target, so the visible label names it through aria-labelledby. --}}
                        <x-ui.label id="review-rating-label" required>{{ __('Overall rating') }}</x-ui.label>
                        {{-- `required` sets aria-required and marks the hidden input, but native
                             constraint validation skips hidden inputs: the browser will not block a
                             submit at 0 stars, so the server must enforce `rating` as required. --}}
                        <x-ui.rating name="rating" required :value="0" aria-labelledby="review-rating-label" />
                    </x-ui.field>

                    <x-ui.field>
                        <x-ui.label for="review-title" required>{{ __('Review title') }}</x-ui.label>
                        <x-ui.input id="review-title" name="title" type="text" required maxlength="120" placeholder="{{ __('Summarise your experience in a few words') }}" />
                    </x-ui.field>

                    <x-ui.field>
                        <x-ui.label for="review-body" required>{{ __('Your review') }}</x-ui.label>
                        <x-ui.textarea id="review-body" name="body" :rows="6" required maxlength="{{ $maxChars }}" placeholder="{{ __('Tell us what you liked, what you did not, and who you would recommend this product to.') }}" />
                        <x-ui.field.description>{{ __('Up to :n characters. Detailed reviews are most helpful.', ['n' => number_format($maxChars)]) }}</x-ui.field.description>
                    </x-ui.field>

                    <x-ui.field>
                        <fieldset class="flex flex-col gap-4">
                            <legend class="text-sm font-medium leading-none text-foreground">{{ __('Would you recommend this product?') }}</legend>
                            <x-ui.option-group name="recommend" :options="[['value' => 'yes', 'label' => __('Yes')], ['value' => 'no', 'label' => __('No')]]" />
                        </fieldset>
                    </x-ui.field>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-ui.field>
                            <x-ui.label for="reviewer-name" required>{{ __('Your name') }}</x-ui.label>
                            <x-ui.input id="reviewer-name" name="reviewer_name" type="text" required autocomplete="name" placeholder="Jane Smith" />
                        </x-ui.field>
                        <x-ui.field>
                            <x-ui.label for="reviewer-email" required>{{ __('Email address') }}</x-ui.label>
                            <x-ui.input id="reviewer-email" name="reviewer_email" type="email" required autocomplete="email" placeholder="jane@example.com" />
                            <x-ui.field.description>{{ __('Your email will not be published.') }}</x-ui.field.description>
                        </x-ui.field>
                    </div>
                </form>
            </x-ui.card.content>

            <x-ui.card.footer class="flex flex-wrap items-center justify-end gap-4">
                <x-ui.button variant="ghost" type="button">{{ __('Cancel') }}</x-ui.button>
                <x-ui.button variant="default" type="submit" form="review-form-01-form">{{ __('Submit review') }}</x-ui.button>
            </x-ui.card.footer>
        </x-ui.card>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/product-reviews-write

Installs these dependencies automatically:

button card container field input label option-group rating section textarea

Registry contract

Install confidence

php artisan ui:add blocks/product-reviews-write writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.2
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/product-reviews-write.blade.php

Registry dependencies

button card container field input label option-group rating section textarea

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

product-reviews-write.md

# Brok UI block: Review Form (`product-reviews-write`)

A write-a-review form with an accessible star-rating fieldset, title and body fields with a character hint, a recommend choice and reviewer identity fields.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/product-reviews-write
```

## Render it

```blade
<x-blocks.product-reviews-write />
```

## Props

- `action` (string, default `#`) — Form submission URL.
- `product-name` (string, default `this product`) — Product name interpolated into the description copy.
- `max-chars` (int, default `500`) — Maximum character count allowed in the review body, shown in the field hint.

## Use when

- Collecting a new product review through a server-submitted form with a star-rating fieldset, title, body, a recommend choice and reviewer identity fields.
- Use when you need a standalone write-a-review page or panel that posts to a backend action.

## Avoid when

- Needing to display existing reviews rather than collect a new one; use product-reviews-summary or product-reviews-list instead.

## Rules

- Render the installed block with `<x-blocks.product-reviews-write />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/product-reviews-write
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/product-reviews-write.json

Ask about Review Form in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Collecting a new product review through a server-submitted form with a star-rating fieldset, title, body, a recommend choice and reviewer identity fields.
Use when you need a standalone write-a-review page or panel that posts to a backend action.

Avoid when

Needing to display existing reviews rather than collect a new one; use product-reviews-summary or product-reviews-list instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: card header rating field title field body field with character hint recommend option group reviewer name/email fields footer actions

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.product-reviews-write />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.