Bulk Selector

Bulk Selector

The bulk selector enables users to quickly select or deselect all elements in a content view. The bulk selector is often displayed as a component of the toolbar. When the bulk selector pattern is shown, its state reflects the selection status of the related component (partially selected, all items selected, or no items selected).

There are two ways to interact with the bulk selector: clicking the checkbox icon or selecting an item on the dropdown.

The bulk selector should be used when multi-select behavior is supported in a list view or card view. The optional dropdown component is recommended for clarity when used in a card view.

This pattern should NOT be used:

  • When information is displayed in a table view. The table view component includes a bulk selector in its toolbar.

All Items Selected

All Selected

No Items Selected

None Selected

Bulk Selector

Bulk Selector

Bulk Selector

  1. Bulk Selector Checkbox: Enables a user to quickly select or deselect all elements on the current page of the related component.
    • Clicking the bulk selector when some items in the related component are selected will select all items.
    • Clicking the bulk selector when all items in the related component are selected will deselect all items.
    • Clicking the bulk selector when no items in the related component are selected will select all items.
  2. Tooltip (optional): Reflects the current selection state.
    • For partially selected lists, the tooltip text is “Partially Selected” and screenreader text is “Click to select all”.
    • For lists with all selected, the tooltip text is “All Items Selected” and screenreader text is “Click to deselect all”.
    • For lists with none selected, the tooltip text is “No Items Selected” and screenreader text is “Click to select all”.
  3. Dropdown (optional): Allows the user to select all items of a particular state. Default values are “Select All” and “Select None.” The “Select None” option is disabled when the user already has none selected, and the “Select All” option is disabled when the user already has all selected. Additional values should be able to be added to work off of filtered states, such as “Red Cars or Blue Cars” / “Running VMs”, etc. The dropdown component is recommended for use with a card view.

Partial Selection

Partial selection is an optional component of the bulk selector pattern. If the implementation can support it, the bulk selector should change to a partially selected state when some items are selected. Clicking the bulk selector in a partially selected state will deselect all items. In this case, the tooltip text is “Partially Selected” and the screenreader text will be “Click to deselect all”.

With the partial selection component, the bulk selector checkbox fill can reflect three selection states:

  1. Partially Selected
  2. All Items Selected
  3. No Items Selected

Bulk Selector

This component is often used to select multiple items and perform an action on them. Note that after an action is completed, the selection state remains as is until the user changes the selection.

See list view for more on list behavior and visual treatment.


Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.