WeightedCriteriaCard

Code

<WeightedCriteriaCard  description="I will rank the three vendors with these."  defaultCriteria={[    { id: "price", label: "Price", weight: "high", enabled: true },    { id: "support", label: "Support", description: "Arabic support, response time", weight: "medium", enabled: true },    { id: "speed", label: "Delivery speed", weight: "low", enabled: false },  ]}  onAccept={async (criteria) => {    await copilot.send("Rank with these criteria", undefined, { hidden: true, data: { type: "criteria", criteria } });  }}/>

AI Assistant · beta

Live examples and controls: WeightedCriteriaCard in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/weighted-criteria-card.json

Before an assistant compares vendors, ranks candidates or recommends a plan, it can ask what matters. This card shows the criteria it suggests. The person:

• switches each criterion on or off;
• sets its weight to Low, Medium or High;
• adds their own criteria;
• confirms.

A thin bar under each enabled criterion shows its share of the decision.

When to useCopy Anchor Link

• Inside a copilot answer, before a comparison or a ranking.
• Anywhere a person tunes a short list of weighted factors before an automated step runs.

When not to useCopy Anchor Link

• A single or multiple choice with no weights: use the picker artifact of ArtifactRenderer.
• Numeric weights or long lists: use a form with sliders or a table.

ImportCopy Anchor Link

import { WeightedCriteriaCard } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

<WeightedCriteriaCard
  description="I will rank the three vendors with these."
  defaultCriteria={[
    { id: "price", label: "Price", weight: "high", enabled: true },
    { id: "support", label: "Support", description: "Arabic support, response time", weight: "medium", enabled: true },
    { id: "speed", label: "Delivery speed", weight: "low", enabled: false },
  ]}
  onAccept={async (criteria) => {
    await copilot.send("Rank with these criteria", undefined, { hidden: true, data: { type: "criteria", criteria } });
  }}
/>

AnatomyCopy Anchor Link

Card                      data-slot="weighted-criteria-card"  data-sent
├─ CardHeader             title, description
├─ ul                     labelled by the title
│  └─ li                  data-slot="weighted-criterion"  data-enabled
│     ├─ Switch           include / exclude
│     ├─ label, description
│     ├─ ToggleGroup      Low / Medium / High
│     ├─ remove           custom criteria only
│     └─ share bar        decorative
├─ form                   add your own (Input + Add)
└─ CardFooter             "2 of 3 included" (polite live region) + Accept

APICopy Anchor Link

WeightedCriterion: { id, label, description?, weight: "low" | "medium" | "high", enabled, custom? }.

Pure helpers:

• criteriaShares(criteria): a map from id to share. Low counts 1, Medium 2 and High 3, and the enabled shares sum to 1.
• cycleWeight(weight): the next weight.
• addCriterion(criteria, label, id): adds a trimmed label and ignores blanks and duplicates.

AccessibilityCopy Anchor Link

• The list is labelled by the card title.
• Each switch is named "Include {label}", and each weight group "Weight of {label}". The weight group follows arrow keys in the reading direction.
• The weight group is disabled while its criterion is off.
• The count in the footer is a polite live region. Errors show as an alert.
• The share bars are decorative; the weights carry the meaning in text.

RTL & i18nCopy Anchor Link

Strings ship in English and Arabic. Labels use dir="auto", so mixed-language criteria read correctly. The layout mirrors with logical properties.

Styling & tokensCopy Anchor Link

Card, rounded-control list with divide-border, share bars in bg-primary on bg-secondary, ease-nq width transition.

Do / Don'tCopy Anchor Link

• Do suggest three to six criteria with a short description each.
• Do send the accepted list back to the assistant as data, not as visible text.
• Don't use it for a plain choice; the picker artifact is lighter.

RelatedCopy Anchor Link

• artifact-renderer
• copilot-chat
• toggle-group
• switch

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-ai-assistant-weighted-criteria-card--docs