Brickslab.Tools

@brickslab./ui-webQuiz

Standardized question wrapper with label, required indicator, points badge, status border, and error/hint messaging.

Statuses

What is your role?*

5 pts

— input here —

Rate your experience

— input here —

Select a value from 1 to 5.

Describe an issue

— input here —

This field is required.

Optional feedback

Share any additional thoughts.

— input here —

Props

Prop	Type	Défaut	Requis	Description
`id`	`string`	—	✓	Unique identifier; used for aria-labelledby.
`label`	`string`	—	✓	The question label shown as a heading.
`description`	`string`	—	—	Optional sub-text below the label.
`required`	`boolean`	`false`	—	Shows a required asterisk.
`points`	`number`	—	—	Points badge displayed in the top-right.
`status`	`"default" \| "success" \| "warning" \| "error"`	`"default"`	—	Border color variant indicating answer state.
`error`	`string`	—	—	Error message shown below the children (overrides hint).
`hint`	`string`	—	—	Helper hint shown below the children.
`actions`	`ReactNode`	—	—	Extra controls shown in the top-right (e.g. delete button).
`children`	`ReactNode`	—	✓	The question input (QuestionRenderer, etc.).

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
  id="..."
  label="..."
  description="..."
  required={false}
  points={0}
  status="default"
  error="..."
  hint="..."
  // +2 autres props disponibles
/>

idlabeldescriptionrequiredpointsstatuserrorhintactionschildren

Usage

tsx

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

<QuestionCard
  id="q-role"
  label="What is your role?"
  required
  points={5}
  hint="Choose the option that best describes you."
>
  {/* QuestionRenderer or custom input */}
</QuestionCard>