Koala UI

Feedback Form

Pro

A compact sentiment and comment block. A row of five faces reveals an optional comment field once one is picked, then submits. It owns its rating and message state; wire onSubmit to your sink.

How was your experience?

Your feedback helps us make the product better for everyone.

Tap a face to rate

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add feedback-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

FeedbackForm

One card that composes a single-select Toggle Group of five faces and a Textarea, and owns the rating and message state. Forwards all native <div> props; accepts className, merged last.

PropTypeDefaultDescription
onSubmit(data: FeedbackFormData) => void | Promise<void>-Called with { rating, message }, where rating is "1" to "5". Return a promise and the submit button spins until it resolves, then the card shows its success state.
titleReact.ReactNode"How was your experience?"The card heading; null hides it.
descriptionReact.ReactNode"Your feedback helps us make the product better for everyone."Muted copy under the title; null hides it.
actionReact.ReactNode"Send feedback"The submit button label.
density"comfortable" | "compact""compact"Card padding and gap (24px or 16px), title size and control height (36px or 32px). Falls back to the nearest DensityProvider.

FAQ#

Use it whenever you want a quick sentiment plus optional comment in one card: it owns the rating and message state, reveals the comment field only after a face is picked, and shows a built-in success state, so you just wire `onSubmit`. Build your own only if you need a different scale or layout than the five-face row.