Brickslab.Tools

@brickslab./ui-webQuiz

Rows × columns matrix for Likert multi-item grids with single or multi selection per row.

Single selection per row

	Poor	Fair	Good	Very good	Excellent
Ease of use*
Performance*
Design quality*
Documentation*

Multi selection per row

	Poor	Fair	Good	Very good	Excellent
Ease of use
Performance

Props

Prop	Type	Défaut	Requis	Description
`value`	`Record<string, string \| number>`	—	✓	Map of rowId → selected colId(s). Multi-mode stores comma-separated colIds.
`onChange`	`(v: Record<string, string \| number>) => void`	—	✓	Called with updated value map.
`rows`	`MatrixRow[]`	—	✓	Array of { id, label } row definitions.
`cols`	`MatrixCol[]`	—	✓	Array of { id, label } column definitions.
`type`	`"single" \| "multi"`	`"single"`	—	Radio or checkbox per cell.
`requiredRows`	`boolean`	`false`	—	Marks unanswered rows with an asterisk.
`disabled`	`boolean`	`false`	—	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="..."
  onChange="..."
  rows={[]}
  cols={[]}
  type="single"
  requiredRows={false}
  disabled={false}
/>

valueonChangerowscolstyperequiredRowsdisabled

Usage

tsx

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

const [value, setValue] = useState<Record<string, string | number>>({});

<MatrixQuestion
  value={value}
  onChange={setValue}
  rows={[
    { id: "r1", label: "Ease of use" },
    { id: "r2", label: "Performance" },
  ]}
  cols={[
    { id: "1", label: "Poor" },
    { id: "5", label: "Excellent" },
  ]}
  type="single"
  requiredRows
/>