Tutorial: Matrix Question (Grid Rating)
Form Preview

What You'll Build

Matrix questions (also known as grid questions or Likert tables) allow respondents to rate multiple items using the same scale. They're essential for professional surveys, employee feedback, product evaluations, and any scenario where you need structured, comparable ratings across multiple aspects.

What You'll Learn

  • Creating basic matrix questions with rows and columns
  • Single selection (radio) vs multiple selection (checkbox) modes
  • Making specific rows required with validation
  • Building Likert scale matrices for agreement surveys
  • Styling with striped rows for readability
  • Adding row descriptions for clarification
  • Controlling width and alignment options
  • Read-only matrices with computed values for summaries
  • Conditional visibility based on other fields
  • Building a complete Employee Feedback Survey
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Basic Matrix Question

Let's start with a simple matrix question. Define rows for the items to rate and columns for the rating options. By default, users can select one option per row (single selection mode).

💡 Tip:
Matrix questions save space by combining multiple related questions into a single, organized grid. Each row represents an aspect to rate, and columns represent the scale options.

Step 2: Multiple Selection Mode

Use selectionMode: 'multiple' to allow selecting multiple columns per row. This is useful for "select all that apply" scenarios where options aren't mutually exclusive.

💡 Tip:
Multiple selection works best when columns represent non-exclusive options (like devices, people, or features). Avoid using it for mutually exclusive choices like frequency or satisfaction levels - use single selection for those.

Step 3: Required Rows

Add isRequired: true to individual rows that must be answered. Required rows show an asterisk (*) and unanswered ones are highlighted on submit.

💡 Tip:
This is more flexible than requiring all rows - you can make some rows mandatory and others optional. Try submitting without completing the required rows to see validation!

Step 4: Row Deselect Behavior

Control whether users can deselect their choice on a per-row basis using allowDeselect. By default, clicking the same selection again will clear it.

💡 Tip:
Use allowDeselect: false on rows where the selection must be permanent once made. This is useful for critical questions where you want to ensure a definitive answer. Rows without this property default to allowing deselection.

Step 5: Likert Scale Matrix

Create a classic Likert scale matrix for measuring agreement levels. The 5-point scale from "Strongly Disagree" to "Strongly Agree" is the most common format.

💡 Tip:
Likert scales are named after psychologist Rensis Likert. They're ideal for measuring attitudes, opinions, and perceptions. The symmetric design (equal positive and negative options) reduces response bias.

Step 6: Striped vs Plain Rows

The striped option (enabled by default) adds alternating background colors to rows for better readability. Set it to false for a cleaner look.

💡 Tip:
Striped rows help users track across wide matrices. For matrices with many columns or similar row labels, striping is especially helpful to prevent "row confusion."

Step 7: Rows with Descriptions

Add optional description to rows to provide additional context or clarification for each item being rated.

💡 Tip:
Descriptions are especially useful for competency assessments, job evaluations, or any matrix where the row labels might need explanation. They appear in a smaller, muted text below the label.

Step 8: Alignment and Full Width

Control the matrix width with fullWidth (default: true) and horizontal positioning with alignment. Set fullWidth: false to let the matrix size based on content.

💡 Tip:
When fullWidth is false, the matrix will only be as wide as needed. Combined with alignment, you can center or right-align compact matrices for a more balanced layout.

Step 9: Read-Only Summary Matrix

Use isReadOnly: true combined with computedValue to create a summary matrix that displays data from other form fields. Great for review screens!

💡 Tip:
The matrix automatically updates as users change their ratings above. This pattern is perfect for order summaries, review confirmations, or any scenario where you want to display collected data in a structured grid format.

Step 10: Conditional Visibility

Use isVisible to show different matrix questions based on user responses. This creates personalized survey experiences.

💡 Tip:
Conditional matrices are powerful for surveys where different customer types need different questions. Business customers might rate B2B services, while individuals rate consumer features.

Step 11: Complete Employee Feedback Survey

Let's put it all together! This comprehensive example demonstrates a real-world employee feedback survey using multiple matrix questions organized into sections.

💡 Tip:
This example combines matrix questions with other form types (dropdown, NPS scale, textareas) to create a complete survey. Each section focuses on a different aspect: work environment, management, overall satisfaction, and open feedback.

Configuration Reference

PropertyTypeDefaultDescription
rows{id, label, description?, isRequired?, allowDeselect?}[]RequiredItems/aspects to rate
columns{id, label}[]RequiredRating scale options
selectionMode'single' | 'multiple''single'One or many per row
stripedbooleantrueAlternating row colors
alignment'left' | 'center' | 'right''left'Horizontal alignment
fullWidthbooleantrueStretch to container width

Try It Yourself

  • Challenge 1: Create a hotel review matrix with rows for Room, Cleanliness, Service, Location, and Value, using a 5-point scale
  • Challenge 2: Build a product comparison matrix where users can select multiple features they want for each product tier
  • Challenge 3: Create a course evaluation with Likert scales, requiring all rows, and include a follow-up textarea for comments

Next Steps

You've mastered matrix questions for structured feedback surveys. Ready to explore more form components?

Continue to Rating Scale Tutorial

Other learning paths: