Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Single-select question with radio or card variant and optional free-text other option.

Radio variant

DeveloperI write code every day
Product ManagerI define the roadmap
DesignerI craft the UX

Card variant

Developer
I write code every day
Product Manager
I define the roadmap
Designer
I craft the UX

With «Other» option

DeveloperI write code every day
Product ManagerI define the roadmap
DesignerI craft the UX

Props

PropTypeDéfautRequisDescription
valuestring——Selected option id.
onChange(v: string) => void—✓Called with the selected id (or the typed text when allowOther is active).
optionsSingleChoiceOption[]—✓Array of { id, label, description?, disabled? }.
variant"radio" | "card""radio"—Radio rows or card grid layout.
allowOtherbooleanfalse—Adds a free-text «Other» option at the end.
otherLabelstring"Other…"—Placeholder/label for the other option.
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="radio"
  allowOther={false}
  otherLabel="Other…"
  disabled={false}
/>
valueonChangeoptionsvariantallowOtherotherLabeldisabled

Usage

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

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

<SingleChoice
  value={value}
  onChange={setValue}
  options={[
    { id: "a", label: "Option A", description: "Description" },
    { id: "b", label: "Option B" },
  ]}
  variant="radio"
  allowOther
/>