Dropdown Input / Select

Overview

Use the dropdown input component to prompt the user to select exactly one item from a medium-sized dropdown list of options.

Responsive UI offers two different components for this use case:

• The native HTML select component provides a user experience that is unique to each different type of device.
  • The select component displays a simple text string for each item in the list.
• The PrimeNG p-dropdown component provides the same themed user experience across all types of devices.
  • The p-dropdown component can display either a text string or multiple data for each dropdown item, using a template.

Implementation approaches for selecting one item from a list

If your use case is prompting the user to select exactly one item from a list, the best implementation approach to use is based on the number of list items the user can select from:

• If the number of list items is small (say 5 items or less) and the list items can all be displayed horizontally in a row, then display them as a button group.
• If the number of list items is relatively small and all list items need to remain visible on the screen at once, then display them as a vertical list of radio buttons.
• If the number of list items is medium (say larger than 5 but smaller than around 50 items), then display the list in a dropdown input that contains all possible values.
  • This is the use case covered in this document.
• If the number of list items is large (say larger than 50 items but smaller than around 1000 items), then use a regular text input with autocomplete functionality, where all list items that are a subset of the current input display in a dropdown. Since the user’s input is freeform, you’ll still need to validate it.
• If the number of list items is very large (say larger than 1000 items), then just prompt for freeform text and validate that.

Development

Web component development

Component reference

p-dropdown

Native HTML select component implementation

Display the list using a select element, using one option element for each item in the list.

<select id="State" formControlName="state" class="rui-form-control" required>
    <option *ngFor="let state of stateList" value="{{state.value}}">
        {{state.name}}
    </option>
</select>

p-dropdown implementation

The select component described above displays a simple text value for each option in the list. If you need to display a template for each option that includes more than one value per option, use the PrimeNg p-dropdown component and use ng-template to specify the template for the list items.

In the TypeScript, import SelectItem and define the data for the list of options.

import { SelectItem } from 'primeng/api';

...

public recentAccounts: SelectItem[] =
[
    { label: 'John Doe', value: 'A000007' },
    { label: 'Kevin Peterson', value: '141' },
    { label: 'Frank Kristopoulos', value: 'A000013' },
    { label: 'Fidel Martin', value: '80103' }
];

In the HTML, specify one ng-template for the selected option when the component is in its rest state (pTemplate="selectedItem") and another ng-template for options in the dropdown (pTemplate="item"). The example here uses flex layout to display the customer name (the item’s label property) and the customer account number (the item’s value property).

<p-dropdown [options]="recentAccounts" formControlName="recentAccounts" styleClass="rui-form-control">
    <ng-template let-item pTemplate="selectedItem"> 
        <div style="display:flex">
            <div class="rui-regular-text-label" style="flex: 1 0 0%;">{{item.label}}</div>
            <div class="rui-bright-text-label" style="flex: 0 0 auto">{{item.value}}</div>
        </div>
    </ng-template>
    <ng-template let-item pTemplate="item">
        <div style="display:flex">
            <div class="rui-regular-text-label" style="flex: 1 0 0%">{{item.label}}</div>
            <div class="rui-bright-text-label" style="flex: 0 0 auto">{{item.value}}</div>
        </div>
    </ng-template>
</p-dropdown>

Angular component development

Component reference

p-dropdown

Native HTML select component implementation

Display the list using a select element, using one option element for each item in the list.

<select id="State" formControlName="state" class="form-control" required>
    <option *ngFor="let state of stateList" value="{{state.value}}">
        {{state.name}}
    </option>
</select>

p-dropdown implementation

The select component described above displays a simple text value for each option in the list. If you need to display a template for each option that includes more than one value per option, use the PrimeNg p-dropdown component and use ng-template to specify the template for the list items.

In the TypeScript, import SelectItem and define the data for the list of options.

import { SelectItem } from 'primeng/api';

...

public recentAccounts: SelectItem[] =
[
    { label: 'John Doe', value: 'A000007' },
    { label: 'Kevin Peterson', value: '141' },
    { label: 'Frank Kristopoulos', value: 'A000013' },
    { label: 'Fidel Martin', value: '80103' }
];

In the HTML, specify one ng-template for the selected option when the component is in its rest state (pTemplate="selectedItem") and another ng-template for options in the dropdown (pTemplate="item"). The example here uses flex layout to display the customer name (the item’s label property) and the customer account number (the item’s value property).

<p-dropdown [options]="recentAccounts" formControlName="recentAccounts" styleClass="form-control">
    <ng-template let-item pTemplate="selectedItem"> 
        <div style="display:flex">
            <div class="jha-regular-text-label" style="flex: 1 0 0%;">{{item.label}}</div>
            <div class="jha-bright-text-label" style="flex: 0 0 auto">{{item.value}}</div>
        </div>
    </ng-template>
    <ng-template let-item pTemplate="item">
        <div style="display:flex">
            <div class="jha-regular-text-label" style="flex: 1 0 0%">{{item.label}}</div>
            <div class="jha-bright-text-label" style="flex: 0 0 auto">{{item.value}}</div>
        </div>
    </ng-template>
</p-dropdown>

Design

Figma design

Adobe XD design