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

Components


  • Alert
  • Anchor navigation
  • App layout
  • Attribute editor
  • Autosuggest
  • Badge
  • Board components
    • Board
    • Board item
    • Items palette
  • Box
  • Breadcrumb group
  • Button
  • Button dropdown
  • Calendar
  • Cards
  • Charts
    • Bar chart
    • Line chart
    • Area chart
    • Mixed line and bar chart
    • Pie and donut charts
  • Checkbox
  • Code editor
  • Collection preferences
  • Collection select filter
  • Column layout
  • Container
  • Content layout
  • Copy to clipboard
  • Date input
  • Date picker
  • Date range picker
  • Expandable section
  • File upload
  • Flashbar
  • Form
  • Form field
  • Grid
  • Header
  • Help panel
  • Icon
  • Input
  • Key-value pairs
  • Link
  • Modal
  • Multiselect
  • Pagination
  • Popover
  • Progress bar
  • Property filter
  • Radio group
  • S3 resource selector
  • Segmented control
  • Select
  • Side navigation
  • Space between
  • Spinner
  • Split panel
  • Status indicator
  • Table
  • Tabs
  • Tag editor
  • Text content
  • Text filter
  • Text area
  • Tiles
  • Time input
  • Toggle
  • Token group
  • Top navigation
  • Tutorial components
    • Annotation context
    • Hotspot
    • Tutorial panel
  • Wizard
  1. Cloudscape Design System
    • Components
    • Collection select filter

    Collection select filter

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

    Get design library
    View in demo

    Preview

    Features

    • Properties

      Display the most pertinent properties that users need to find a resource in a collection of resources. Most commonly, those properties refer to the column headers for table view and content labels for a cards view.

      We don't recommend using more than two collection select filters. Used in combination, the two filters behave as an And operator.

    • Values

      • Using the select component, list all finite values that correspond to the property.

        • For example: Property: Status; Values: Error, Loading, Pending, Stopped, and Success.

      • Use Any {property} as the default pre-selected option. It takes into account any values that correspond to that property. The collection isn't filtered and displays all items.

      • Follow the usage guidelines for the select component.

    Collection view

    • Displaying results

      The collection is filtered as soon as the user selects a value from a select filter or enters text into the accompanying