ResponseCompare
ExperimentalTwo replies side by side, and the person picks the better one.
Also known as compare responses, side by side, a b compare
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Pick the better reply
Which reply is better?
Your choice helps the assistant learn what you prefer.
Reply A
Your refund of ₹3,499 was sent on 12 October. Banks take up to 7 working days, so it should arrive by 21 October.
Reply B
Refunds usually take a while. Please wait a few days and contact your bank if it does not arrive.
<ResponseCompare
replies={[
{ id: "a", label: "Reply A", content: <p>Your refund of ₹3,499 was sent on 12 October…</p> },
{ id: "b", label: "Reply B", content: <p>Refunds usually take a while…</p> },
]}
onChoose={(id) => saveChoice(id)}
/>Press Choose this reply under one, or About the same.
When to use it
Asks people which of two replies is better, in a way that is quick to answer and easy to skip, so the product learns what they prefer.
Made of: Heading and one-line reason · Reply A · Reply B · Choose buttons · About the same · Thank-you line
Use it for
- Asking which of two replies helped more, to learn preferences.
- Letting someone pick between two drafts before continuing.
Not for
- More than two options to pick from: use VariantGrid.
- A thumbs up or down on one reply: use FeedbackBar.
- Moving between versions of the same reply: use VersionPager.
Do and avoid
Which reply is better?
Your choice helps the assistant learn what you prefer.
Reply A
Your refund was sent on 12 October and arrives by the 21st.
Reply B
Refunds take a while. Check with your bank.
Reply A is recommended. Keep it?
Your choice helps the assistant learn what you prefer.
Reply A (recommended)
Your refund was sent on 12 October and arrives by the 21st.
Reply B
Refunds take a while. Check with your bank.
Do
- Ask now and then, not after every reply.
- Show both replies in full, so people compare the real thing.
- Say why you are asking in one short line.
- Let people carry on without choosing.
Avoid
- Do not label one reply as recommended. It sways the choice.
- Do not use it for more than two replies.
- Do not hide the choice after it is made. Say which one was kept.
On a phone
- Below 640px the two replies stack, Reply A first, each with its own Choose button under it.
- Long replies keep their full text; the page scrolls, not the card.
Seen in products
- ChatGPT sometimes shows two replies side by side and asks which one is better, to learn what people prefer.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| repliesrequired | [CompareReply, CompareReply] | none | The two replies: { id, label, content }. |
| onChooserequired | (id: string | "same") => void | none | Called with the chosen reply's id, or same. |
| chosen | string | "same" | null | none | The current choice. Leave it out to let the part keep its own. |
| allowSame | boolean | true | Offer an About the same choice. |
| labels | ResponseCompareLabels | none | Overrides heading, hint, choose, same, chosen and thanks(label). |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's heading, so it fits the page outline. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ResponseCompare switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Allow same | allowSame | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- not chosen
- Both replies have a Choose this reply button, with About the same below.
- chosen
- The kept reply gets the selected fill and says You chose this; the other steps back. A thank-you line is read out.
- about the same
- Both replies stay as they were and the thank-you line says they are about the same.
- focus
- Each Choose button shows a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface--bg--line--selected--selected-border--fg-muted--radius-card--radius-control
Built in
- The part is a region named by its heading, and each reply is named by its label.
- The choice is an ordinary button under each reply, described by that reply's label.
- After a choice, the kept reply says You chose this in words, and a status line reads the thank-you.
- The kept reply's border change stops animating when people turn off motion in their system settings.
What you need to do
- Give each reply a short label that says which is which, such as Reply A and Reply B.
- Set headingLevel so the heading fits your page outline. It is 3 unless you change it.
- Do not ask on every reply. Ask now and then, and never block the conversation on it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide