Rule List Guidelines

The Rule List component provides an easy-to-use interface for users to create complex rules to filter a set of data, such as creating contact segments based on multiple criteria, pulling certain products from a database, etc.

The Rule List is the new version of the deprecated Rule Builder component.

This component provides the layout and some functionality, but most logic has to be implemented by the product teams.

Structure

Rule Groups:

• The group header can display controls for setting up the relation between items, and other group-related content, such as title, AI pre-fill, etc.
• Groups can be collapsed and expanded.
• The group footer can display item list related content and actions, such as adding Rule Items and Sub Groups.
• Rule Groups have a content slot for feedback messages, which is ideal for displaying error messages, empty state placeholder, etc.
• Inputs in the header and footer can be set to read-only.

Rule Items:

• By default, the Rule Item is displayed as a “summary”. The Edit button reveals inputs (Text Input, Select, Multiselect, etc.) to edit the item.
• The component provides the edit rule functionality, but other actions, such as adding, removing, and duplicating rules, have to be implemented.
• The relation between Rule Items is displayed in front of the item. Typically “AND” or “OR”, but can be customized.

Best Practices

• Use Rule List when the user wants to build complex filters or database queries, such as building a contact segment using dozens of different contact attributes.
• Avoid using Rule List for simpler filters where the user would only use a few Rule Items. In this case, design a simpler interface using appropriate form elements, such as Text Input, Select, or Multiselect.
• Use different colors for sub groups. We recommend using “neutral” on the main level, "blue" on the second level, and "purple" on the third level.
• Connect multiple main groups with the Separator component, using its label to display the relation between them.