Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Net Promoter Score 0–10 selector with detractor / passive / promoter color zones.

Default

0
1
2
3
4
5
6
7
8
9
10
Not at all likelyExtremely likely

With bucket labels

0
1
2
3
4
5
6
7
8
9
10
Not at all likelyExtremely likely

Props

PropTypeDéfautRequisDescription
valuenumber——Selected score (0–10).
onChange(v: number) => void—✓Called with the selected score.
labels{ left?: string; right?: string }——Custom extreme labels.
showBucketsbooleanfalse—Displays Detractors / Passives / Promoters zone labels above the scale.
disabledbooleanfalse—Disables all interactions.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={0}
  onChange={0}
  labels="..."
  showBuckets={false}
  disabled={false}
/>
valueonChangelabelsshowBucketsdisabled

Usage

tsx
import { NPSQuestion } from "@brickslab./ui-web";

const [score, setScore] = useState<number | undefined>();

<NPSQuestion
  value={score}
  onChange={setScore}
  showBuckets
  labels={{ left: "Not at all likely", right: "Extremely likely" }}
/>