Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Dynamic renderer that dispatches to the correct input UI based on question.type. Supports single, multi, scale, NPS, rating, and text types natively; remaining types (matrix, rank, range, date, file) are fulfilled by Family 2 components.

Single choice

Option A
Option B
Option C

Multi choice (inline)

Feature X
Feature Y
Feature Z

Scale / Likert

1
2
3
4
5
6
7
Strongly disagreeStrongly agree

NPS (0–10)

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

Free text

Props

PropTypeDéfautRequisDescription
questionQuestion—✓Question schema object including type, options, and config.
valueAnswer—✓Current answer value (controlled).
onChange(answer: Answer) => void—✓Called with the new answer on user interaction.
disabledbooleanfalse—Disables all interaction.
showValidationbooleanfalse—Triggers validation state display.
layout"stack" | "inline" | "grid""stack"—Controls option arrangement for choice questions.
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
  question={...}
  value={...}
  onChange={...}
  disabled={false}
  showValidation={false}
  layout="stack"
/>
questionvalueonChangedisabledshowValidationlayout

Usage

tsx
import { QuestionRenderer, type Question, type Answer } from "@brickslab./ui-web";

const question: Question = {
  id: "q1",
  type: "single",
  label: "How did you hear about us?",
  options: [
    { id: "social", label: "Social media" },
    { id: "friend", label: "Friend referral" },
    { id: "search", label: "Search engine" },
  ],
};

const [answer, setAnswer] = useState<Answer>(null);

<QuestionRenderer
  question={question}
  value={answer}
  onChange={setAnswer}
  layout="stack"
/>