Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Multi-select question with checkbox or tag variant and configurable min/max selection.

Checkbox variant

UX Design
Performance
Accessibility
Developer experience
Documentation

Tag variant

UX Design
Performance
Accessibility
Developer experience
Documentation

Max 2 selections

UX Design
Performance
Accessibility
Developer experience
Documentation
0/2 selected

Props

PropTypeDéfautRequisDescription
valuestring[]—✓Array of selected option ids.
onChange(v: string[]) => void—✓Called with updated selection array.
optionsMultiChoiceOption[]—✓Array of { id, label, disabled? }.
variant"checkbox" | "tag""checkbox"—Checkbox rows or tag pill layout.
maxSelectednumber——Maximum number of selectable options.
minSelectednumber——Minimum required selections (for validation).
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="..."
  onChange="..."
  options={[]}
  variant="checkbox"
  maxSelected={0}
  minSelected={0}
  disabled={false}
/>
valueonChangeoptionsvariantmaxSelectedminSelecteddisabled

Usage

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

const [value, setValue] = useState<string[]>([]);

<MultiChoice
  value={value}
  onChange={setValue}
  options={[
    { id: "a", label: "Option A" },
    { id: "b", label: "Option B" },
  ]}
  variant="tag"
  maxSelected={3}
/>