Brickslab.Tools

@brickslab./ui-webQuiz

Collapsible section container for quiz questions with title, description, required marker, and helper text.

Default

Personal informationTell us a bit about yourself.

— questions here —

Collapsible

Collapsible open

— questions here —

Collapsible collapsed

— questions here —

Complete all questions before submitting.

Props

Prop	Type	Défaut	Requis	Description
`id`	`string`	—	✓	Unique identifier for the section element.
`title`	`string`	—	✓	Section title.
`description`	`string`	—	—	Optional subtitle below the title.
`collapsible`	`boolean`	`false`	—	Enables native collapse/expand via <details>.
`defaultCollapsed`	`boolean`	`false`	—	Initial collapsed state when collapsible is true.
`required`	`boolean`	`false`	—	Displays a required asterisk next to the title.
`helperText`	`string`	—	—	Small helper note shown at the bottom of the section.
`children`	`ReactNode`	—	✓	Question content.

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="..."
  title="..."
  description="..."
  collapsible={false}
  defaultCollapsed={false}
  required={false}
  helperText="..."
  children={<span>...</span>}
/>

idtitledescriptioncollapsibledefaultCollapsedrequiredhelperTextchildren

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    description="Votre sous-titre"
  />
</div>

Usage

tsx

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

<QuizSection
  id="section-1"
  title="Personal information"
  description="Tell us a bit about yourself."
  required
  collapsible
  helperText="All fields are required."
>
  {/* QuestionCard components */}
</QuizSection>