Skip to content

Add field.matrix() for grid-based survey questions #114

@akladekouassi

Description

@akladekouassi

Summary

Add field.matrix(label) — a grid where each row is an item and each column is a rating / option. The classic survey "rate each item on this scale" pattern.

Why this would help

  • Surveys, questionnaires, multi-criteria evaluations, peer reviews.
  • Replicating this with N separate radio fields is verbose and brittle to add/remove rows.
  • A composite field stores Record<rowKey, columnValue> so downstream code consumes a single shape.

Proposed API

field.matrix('Rate each')
  .rows([
    { key: 'design', label: 'Design' },
    { key: 'usability', label: 'Usability' },
    { key: 'performance', label: 'Performance' },
  ])
  .columns([1, 2, 3, 4, 5])
  .inputType('radio');               // 'radio' | 'checkbox'

Suggested implementation areas

  • src/core/field-descriptors/matrix/MatrixFieldBuilder.ts (new)
  • src/core/field-descriptors/field.ts
  • src/renderers/web/ — semantic table with proper headers and aria-labels
  • src/renderers/native/ — vertical row stacks with column-as-segmented-control

Acceptance Criteria

  • Stores Record<rowKey, columnValue> (or arrays for inputType('checkbox'))
  • Required validation triggers when any row is unanswered
  • Semantic markup on web (proper <table> + headers)
  • Tests for the radio and checkbox modes

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions