Koala UI

Feedback Form

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# Add this component (its dependencies come along)npx koalaui-cli@latest add feedback-form

Usage#

usage.tsxTSX
"use client"import { FeedbackForm, type FeedbackFormData } from "@/components/ui/feedback-form"export function Example() {  async function record({ rating, message }: FeedbackFormData) {    await fetch("/api/feedback", { method: "POST", body: JSON.stringify({ rating, message }) })  }  return <FeedbackForm onSubmit={record} />}

API reference#

FeedbackForm

Composes a single-select Toggle Group and a Textarea. Forwards all <div> props.

  • onSubmit: (data: { rating, message }) => void | Promise<void>. Rating is the chosen value "1"-"5".
  • title, description, action: override the default copy.

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.