Patternfly Logo

Dual list selector

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

Available options
0 of 5 items selected
Chosen options
0 of 0 items selected

    Available item selected

    Available options
    1 of 5 items selected
    Chosen options
    0 of 0 items selected

      Multiple available items selected

      Available options
      1 of 5 items selected
      Chosen options
      0 of 0 items selected

        Chosen item

        Available options
        0 of 4 items selected
        Chosen options
        0 of 1 items selected

        Chosen item selected

        Available options
        0 of 4 items selected
        Chosen options
        1 of 1 items selected

        Tree view

        Available options
        1 of 11 items selected
        • Colors
          00
          • Green
        Chosen options
        0 of 0 items selected

          Tree view chosen options

          Available options
          0 of 10 items selected
          • Colors
            • Green
          Chosen options
          0 of 0 items selected
          • Colors

          Documentation

          Usage

          ClassAppliedOutcome
          .pf-c-dual-list-selector<div>Initiates the dual list selector component. Required
          .pf-c-dual-list-selector__pane<div>Initiates a dual list selector pane. Required
          .pf-c-dual-list-selector__header<div>Initiates a dual list selector pane header. Required
          .pf-c-dual-list-selector__title<div>Initiates a dual list selector pane title. Required
          .pf-c-dual-list-selector__title-text<div>Initiates a dual list selector pane title text. Required
          .pf-c-dual-list-selector__tools<div>Initiates a dual list selector tools. Required
          .pf-c-dual-list-selector__filter<div>Initiates a dual list selector pane filter. Required
          .pf-c-dual-list-selector__actions<div>Initiates a dual list selector pane actions.
          .pf-c-dual-list-selector__actions-item<div>Initiates a dual list selector pane actions item.
          .pf-c-dual-list-selector__status<div>Initiates a dual list selector pane selected status. Required
          .pf-c-dual-list-selector__status-text<span>Initiates a dual list selector pane selected status text. Required
          .pf-c-dual-list-selector__menu<div>Initiates a dual list selector pane menu container. Required
          .pf-c-dual-list-selector__list<ul>Initiates a dual list selector pane menu list. Required
          .pf-c-dual-list-selector__list-item<li>Initiates a dual list selector pane menu list item. Required
          .pf-c-dual-list-selector__item<button>, <div>Initiates a dual list selector pane menu item. Required
          .pf-c-dual-list-selector__item-main<span>Initiates a dual list selector pane menu item main container. Required
          .pf-c-dual-list-selector__item-check<span>Initiates the dual list selector item check.
          .pf-c-dual-list-selector__item-count<span>Initiates the dual list selector item count.
          .pf-c-dual-list-selector__item-toggle-icon<span>Initiates the dual list selector item toggle icon.
          .pf-c-dual-list-selector__item-toggle<button>Initiates the dual list selector item toggle.
          .pf-c-dual-list-selector__item-text<span>Initiates a dual list selector pane menu item text. Required
          .pf-c-dual-list-selector__controls<div>Initiates the dual list selector controls. Required
          .pf-c-dual-list-selector__controls-item<div>Initiates the dual list selector controls item. Required
          .pf-m-available.pf-c-dual-list-selector__paneDefines a pane as the available list.
          .pf-m-chosen.pf-c-dual-list-selector__paneDefines a pane as the chosen list.
          .pf-m-selected.pf-c-dual-list-selector__list-itemModifies the menu list item for the selected state.

          CSS variables


          View source on Github