Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Likert scale from 1–5 to 1–10 with optional tick bar and extreme labels.

1–5 with labels and ticks

1
2
3
4
5
Strongly disagreeStrongly agree

1–7

1
2
3
4
5
6
7
Very poorExcellent

1–10

1
2
3
4
5
6
7
8
9
10

Props

PropTypeDéfautRequisDescription
valuenumber——Currently selected step.
onChange(v: number) => void—✓Called with the selected number.
minnumber1—Scale start.
maxnumber5—Scale end.
stepnumber1—Increment between steps.
minLabelstring——Label displayed below the first step.
maxLabelstring——Label displayed below the last step.
showTicksbooleanfalse—Shows a progress tick bar below the steps.
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}
  min={1}
  max={5}
  step={1}
  minLabel="..."
  maxLabel="..."
  showTicks={false}
  // +1 autres props disponibles
/>
valueonChangeminmaxstepminLabelmaxLabelshowTicksdisabled

Usage

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

const [value, setValue] = useState<number | undefined>();

<ScaleLikert
  value={value}
  onChange={setValue}
  min={1}
  max={5}
  minLabel="Strongly disagree"
  maxLabel="Strongly agree"
  showTicks
/>