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 text filter. Only resources that match the conditions of the values are displayed.

    For example: Engine set to "Aurora" and Status set to "available" will show the available resources that are running the Aurora engine.

  • Loading state

    The state of the collection of resources, such as table or cards, while the filtered dataset is being loaded. Follow the guidelines for loading state for collections.

  • No match state

    The state of the collection of resources, such as table or cards, after a user applies a filter that does not return any results. In other words, the state when there are no resources that match the filters applied. Follow the guidelines for empty states.

General guidelines

Do

  • Always use the filter functionality on the full collection of resources, not just on visible or loaded resources.
  • Always display the number of matched resources. In table and card views, the count is shown next to the title in the table header.
  • Use a select filter for commonly used properties and values.
  • After a user completes a filter action, display the number of results next to the select filters.
  • Use a select filter if users need a maximum of two properties to find a specific item. If more than two are required, use a property filter instead.
  • If a select filter has two properties, the operator is always "and". If you need more operators to combine properties, use a property filter instead.

Don't

  • Don't use filtering if the majority of your users operate on small collections of resources (fewer than five resources).
  • Don’t use a select filter for collections that have a very large set of values.
  • Don’t use a select filter if users need to select multiple values that correspond to one property. Use a property filter instead.
  • Don’t change the control for the selection mechanism. Always use a select component.

Writing guidelines

General writing guidelines

  • Keep labels and descriptions clear and concise.

  • Use parallel sentence structure.

  • Use sentence case for all text. Don’t use title case.

  • Use terminal punctuation (periods, exclamation points, question marks).

  • Use present-tense verbs and active voice wherever possible.

  • Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."

Component-specific guidelines

Placeholder text

  • Use the format: Find {resource}

  • Don’t use terminal punctuation.

Select

  • Use this format for the default: Any {property}

  • Follow the writing guidelines for select.

Results counter

Follow the writing guidelines for the resource counter in the table.

Loading state

Follow the writing guidelines for loading state.

No match state

Follow the guidelines for empty states.

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

  • Make sure you define ARIA labels for the selection inputs that are aligned with the language context of your application.

Alternative text

Follow the accessibility guidelines for select.