Tutorial: Suggestion Chips
Form Preview

What You'll Build

Suggestion Chips is a multi-select control that displays clickable chips for quick selection. It's perfect for categorization, tagging, and gathering structured feedback. Users can select multiple predefined options with a simple click.

What You'll Learn

  • Creating basic suggestion chips
  • Limiting selections with max
  • Alignment options for chip positioning
  • Dynamic suggestions based on other field values
  • Conditional visibility patterns
  • Reading selected values
  • Required field validation
  • Combining with Textarea for open-ended feedback
  • Building a complete 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 Suggestion Chips

Start with a simple setup: define an array of suggestions with id and name for each chip. Users can click to select multiple chips.

💡 Tip:
Suggestion Chips is ideal for quick categorization and tagging. The value is a simple array of selected IDs, making data analysis straightforward.

Step 2: Limiting Selections

Use max to limit how many chips users can select. Once the limit is reached, remaining chips become disabled. Users can still deselect to change their choices.

💡 Tip:
Limiting selections is useful for "pick your top N" scenarios. It forces users to prioritize, giving you more meaningful data about what matters most.

Step 3: Chip Alignment

Use alignment to position the chips: 'left' (default), 'center', or 'right'.

💡 Tip:
Center alignment works well for short surveys or modal dialogs where the form is the focal point. Left alignment is better for longer forms with multiple fields.

Step 4: Dynamic Suggestions

Make suggestions a function that returns different options based on other field values. The chips update automatically when dependencies change.

💡 Tip:
Dynamic suggestions create a more relevant experience. Instead of showing all possible options, show only what's applicable to the user's current context.

Step 5: Conditional Follow-Up

Use isVisible to show different suggestion sets based on user responses. This creates branching survey logic - happy users see one set, unhappy users see another.

💡 Tip:
Conditional follow-ups make surveys feel personalized. Asking "What went wrong?" to satisfied users doesn't make sense - adapt your questions to the context.

Step 6: Reading Selected Values

Access the field value using form.suggestionChips('id')?.value(). The value is a simple string[] array of selected chip IDs.

💡 Tip:
The simple array structure makes it easy to analyze data. Count selections, check for specific values, or iterate over all selected items.

Step 7: Required Validation

Set isRequired: true to require at least one chip selection. The form cannot be submitted without a selection.

💡 Tip:
Use required validation when you need at least one response. The error message prompts users to make a selection before proceeding.

Step 8: Combining with Textarea

Need free-text input alongside chips? Simply add a Textarea field after your SuggestionChips. This modular approach gives you full control over both components.

💡 Tip:
This pattern is more flexible than a combined control. You can style, position, and configure each component independently. You can also make one required and the other optional.

Step 9: Complete Feedback Survey

Let's combine everything into a real-world feedback survey. Suggestion Chips works seamlessly with other controls to gather comprehensive feedback.

💡 Tip:
This pattern is common for CSAT surveys, product feedback forms, and support tickets. The combination of chips and free text gives you both quantifiable data and rich insights.

Configuration Reference

PropertyTypeDefaultDescription
suggestions{id, name}[]RequiredClickable chip options
maxnumberunlimitedMax chips that can be selected
minnumberundefinedMin chips that must be selected
alignment'left' | 'center' | 'right''left'Chip horizontal alignment

Value Structure

The control returns a simple array of selected chip IDs:

string[]  // e.g., ['speed', 'quality', 'support']

Try It Yourself

  • Challenge 1: Create a "How did you hear about us?" field with chips for Social Media, Friend, Google, Advertisement
  • Challenge 2: Build a feature voting form where users can select from feature ideas (max 3)
  • Challenge 3: Create a support ticket categorization with dynamic chips based on product type selection

Next Steps

You've mastered Suggestion Chips! This versatile control is perfect for tagging, categorization, and structured feedback collection.

Continue to Matrix Question Tutorial

Other learning paths: