Feedback

A feedback card gives users a quick way to tell you what's working and what's broken. A type select for bugs, ideas, or general comments, a short title, and a free-form message keep reports structured enough to triage. Product dashboards, support pages, and in-app dialogs all collect feedback with this shape.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Submit Feedback</h3>
    <p class="card-description">Share your thoughts to help us improve.</p>
  </div>
  <form class="card-content field-group">
    <div class="field">
      <label class="label" for="fb-title">Title</label
      ><input
        class="input"
        id="fb-title"
        type="text"
        placeholder="Feedback title"
        name="title"
      />
    </div>
    <div class="field">
      <label class="label" for="fb-type">Type</label
      ><select class="select" id="fb-type" name="type">
        <option value="">Select type</option>
        <option value="suggestion">Suggestion</option>
        <option value="complaint">Complaint</option>
        <option value="praise">Praise</option>
      </select>
    </div>
    <div class="field">
      <label class="label" for="fb-description">Description</label
      ><textarea
        class="textarea"
        id="fb-description"
        name="description"
        placeholder="Tell us more..."
      ></textarea>
    </div>
    <div class="flex justify-end gap-2">
      <button class="btn btn-outline" type="button">Cancel</button
      ><button class="btn" type="submit">Submit</button>
    </div>
  </form>
</div>

Browse more card examples.