Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Filtering patterns
    1. Cloudscape Design System
    2. Patterns
    3. General: Filtering patterns

    Filtering patterns

    Filtering patterns let users find specific items in a collection of resources. Users can filter by exact values or by finite sets of properties.

    Published: May 28, 2020

    On this page

    1. Patterns
    2. Criteria

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Patterns

    We provide three filtering patterns for table and cards views. Choose a pattern based on the complexity of the collection of resources.

    Text filter

    With a text filter, users can enter text that’s used to match specific items in a collection.

    Collection select filter

    A select filter helps users find specific items in a collection of resources by choosing one or two properties.

    Property filter

    With the property filter, users can find specific items in a collection of resources by using properties, property values, typing free text, and combining these with operators.

    Criteria

    Text filterCollection select filterTable property filter
    Complexity of the resourceSimple resource (small set of properties)Simple resource (small set of properties)Complex resource (large set of properties)
    User goalsFind resources that match an exact text queryFind resources with overlapping, defined valuesFind resources with multiple combinations of values
    Selection of values-Single selection of a value for each propertyMultiple selection of values for each property
    Operators -"And" operator"And", "Or", "Not", "And not" and "Or not" operators

    Complexity of the collection of resources

    The complexity of the collection of resources depends on the properties that are required to describe the resources.

    User goals

    Because a collection of resources can be extensive and the view is configurable, users expect the filter patterns to operate within the full collection of resources, and not just the visible resources.

    If users tend to know exactly the value or term they are looking for, use the text filter.

    If the common behavior of users is to filter a resource by only one or two properties, use the collection select filter. For example: by "status" or "type".

    For complex products with large collection of resources, use the property filter so that users can combine multiple properties, values, and operators.

    Selection of values

    If the resources are easy to find through filtering by a specific value for one or two properties, use the collection select filter.

    The collection select filter doesn’t support selecting multiple values for a single property.

    If users need to combine multiple values that correspond to one property, use the property filter. Each value can be removed individually for further filtering. For example: Status set to Error and Status set to Warning.

    Operators

    Display operators when at least two filters are defined. The "and" operator typically is enough to narrow down most resources. By default, the operator is always set to "and" for the collection select filter, and can be modified only in the property filter.

    Use a property filter if narrowing down a complex collection of resources is best done with the union, intersection, or complement of properties ("and", "or", "and not", and "or not" operators). If more complex queries are required, combine these operators using a token group.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS