Source: https://primeng.org/cascadeselect

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

CascadeSelect

CascadeSelect displays a nested structure of options.

Import #

import { CascadeSelectModule } from 'primeng/cascadeselect';

Basic #

CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. optionGroupLabel is used for the text of a category and optionGroupChildren is to define the children of the category. Note that order of the optionGroupChildren matters and it should correspond to the data hierarchy.

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" />

Template #

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. In addition value, dropdownicon, loadingicon, and optiongroupicon slots are provided for further customization.

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City"> <ng-template #option let-option> <div class="flex items-center"> <img *ngIf="option.states" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px" /> <i class="pi pi-compass mr-2" *ngIf="option.cities"></i> <i class="pi pi-map-marker mr-2" *ngIf="option.cname"></i> <span>{{ option.cname || option.name }}</span> </div> </ng-template> <ng-template #triggericon> <i class="pi pi-map"></i> </ng-template> <ng-template #header> <div class="font-medium px-3 py-2">Available Countries</div> </ng-template> <ng-template #footer> <div class="px-3 py-1"> <p-button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" /> </div> </ng-template> </p-cascadeselect>

Loading State #

Loading state can be used loading property.

Loading...

No results found

<p-cascadeselect [loading]="true" [style]="{ minWidth: '14rem' }" placeholder="Loading..." />

Float Label #

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

p-emptylabel

Search results are available Over Labelp-emptylabel

Search results are available In Labelp-emptylabel

Search results are available On Label

<p-floatlabel class="w-full md:w-56"> <p-cascadeselect [(ngModel)]="value1" inputId="over_label" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full" /> <label for="over_label">Over Label</label> </p-floatlabel>

<p-floatlabel class="w-full md:w-56" variant="in">
    <p-cascadeselect [(ngModel)]="value2" inputId="in_label" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full" />
    <label for="in_label">In Label</label>
</p-floatlabel>

<p-floatlabel class="w-full md:w-56" variant="on">
    <p-cascadeselect [(ngModel)]="value3" inputId="on_label" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full" />
    <label for="on_label">On Label</label>
</p-floatlabel>

Ifta Label #

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

p-emptylabel

Search results are available City

<p-iftalabel class="w-full md:w-56"> <p-cascadeselect [(ngModel)]="selectedCity" inputId="cs_city" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full" /> <label for="cs_city">City</label> </p-iftalabel>

Clear Icon #

When showClear is enabled, a clear icon is displayed to clear the value.

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" placeholder="Select a City" [style]="{ minWidth: '14rem' }" [showClear]="true" />

Sizes #

CascadeSelect provides small and large sizes as alternatives to the base.

Small

Search results are available

Normal

Search results are available

Large

Search results are available

<p-cascadeselect [(ngModel)]="value1" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-56" size="small" placeholder="Small" /> <p-cascadeselect [(ngModel)]="value2" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-56" placeholder="Normal" /> <p-cascadeselect [(ngModel)]="value3" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-56" size="large" placeholder="Large" />

Fluid #

The fluid prop makes the component take up the full width of its container when set to true.

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" placeholder="Select a City" fluid />

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity" variant="filled" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" />

Disabled #

When disabled is present, the element cannot be edited and focused.

Disabled

No results found

<p-cascadeselect [disabled]="true" placeholder="Disabled" [style]="{ minWidth: '14rem' }" />

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

Select a City

Search results are available

Select a City

Search results are available

<p-cascadeselect [(ngModel)]="selectedCity1" [invalid]="!selectedCity1" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> <p-cascadeselect [(ngModel)]="selectedCity2" [invalid]="!selectedCity2" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />

Forms #

Template Driven

Select a City

Search results are available

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex justify-center flex-col gap-4"> <div class="flex flex-col gap-1"> <p-cascadeselect #city="ngModel" [(ngModel)]="selectedCity" [options]="countries" [invalid]="city.invalid && (city.touched || exampleForm.submitted)" name="city" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" required /> @if (city.invalid && (city.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">City is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Reactive Forms

CascadeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Select a City

Search results are available

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-cascadeselect formControlName="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" [invalid]="isInvalid('selectedCity')" />

        @if (isInvalid('selectedCity')) {
            <p-message severity="error" size="small" variant="simple">City is required.</p-message>
        }
    </div>
    <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button>
</form>

Accessibility #

Screen Reader

Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.

The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.

<span id="dd1">Options</span> <p-cascadeselect ariaLabelledBy="dd1"/>

<p-cascadeselect ariaLabel="Options"/>

Closed State Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the cascadeselect element. | | space | Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | | down arrow | Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |

Popup Keyboard Support

| Key | Function | | --- | --- | | tab | Hides the popup and moves focus to the next tabbable element. | | shift + tab | Hides the popup and moves focus to the previous tabbable element. | | enter | Selects the focused option and closes the popup. | | space | Selects the focused option and closes the popup. | | escape | Closes the popup, moves focus to the cascadeselect element. | | down arrow | Moves focus to the next option. | | up arrow | Moves focus to the previous option. | | right arrow | If option is closed, opens the option otherwise moves focus to the first child option. | | left arrow | If option is open, closes the option otherwise moves focus to the parent option. |

• Import

• Basic

• Template

• Loading State

• Float Label

• Ifta Label

• Clear Icon

• Sizes

• Fluid

• Filled

• Disabled

• Invalid

• Forms

  • Template Driven

  • Reactive Forms

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek