Select

A select allows a user to select a value from a set of options.

´ Loading interactive demo...
<dt-select placeholder="Choose your coffee"> <dt-option value="ThePerfectPour">ThePerfectPour</dt-option> <dt-option value="Affogato">Affogato</dt-option> <dt-option value="Americano">Americano</dt-option> <dt-option value="Bicerin">Bicerin</dt-option> <dt-option value="Breve">Breve</dt-option> <dt-option value="Café Bombón">Café Bombón</dt-option> <dt-option value="Café au lait">Café au lait</dt-option> <dt-option value="Caffé Corretto">Caffé Corretto</dt-option> <dt-option value="Café Crema">Café Crema</dt-option> <dt-option value="Caffé Latte">Caffé Latte</dt-option> <dt-option value="Caffé macchiato">Caffé macchiato</dt-option> <dt-option value="Café mélange">Café mélange</dt-option> <dt-option value="Coffee milk">Coffee milk</dt-option> <dt-option value="Cafe mocha">Cafe mocha</dt-option> <dt-option value="Ca phe sua da">Ca phe sua da</dt-option> <dt-option value="Kopi susu">Kopi susu</dt-option> <dt-option value="Cappuccino ">Cappuccino </dt-option> <dt-option value="Cappuccino-cups">Cappuccino-cups</dt-option> <dt-option value="Cappuccino">Cappuccino</dt-option> <dt-option value="Carajillo">Carajillo</dt-option> <dt-option value="Cortado">Cortado</dt-option> <dt-option value="Cuban espresso">Cuban espresso</dt-option> <dt-option value="Espresso">Espresso</dt-option> <dt-option value="The Flat White">The Flat White</dt-option> <dt-option value="Frappuccino">Frappuccino</dt-option> <dt-option value="Galao">Galao</dt-option> <dt-option value="Greek frappé coffee">Greek frappé coffee</dt-option> <dt-option value="Iced Coffee">Iced Coffee</dt-option> <dt-option value="Indian filter coffee">Indian filter coffee</dt-option> <dt-option value="Instant coffee">Instant coffee</dt-option> <dt-option value="Irish coffee">Irish coffee</dt-option> <dt-option value="Kopi Luwak">Kopi Luwak</dt-option> <dt-option value="Kopi Tubruk">Kopi Tubruk</dt-option> <dt-option value="Turkish coffee">Turkish coffee</dt-option> <dt-option value="Vienna coffee">Vienna coffee</dt-option> <dt-option value="Yuanyang">Yuanyang</dt-option> </dt-select> export class DefaultSelectExampleComponent { } ThePerfectPour Affogato Americano Bicerin Breve Café Bombón Café au lait Caffé Corretto Café Crema Caffé Latte Caffé macchiato Café mélange Coffee milk Cafe mocha Ca phe sua da Kopi susu Cappuccino Cappuccino-cups Cappuccino Carajillo Cortado Cuban espresso Espresso The Flat White Frappuccino Galao Greek frappé coffee Iced Coffee Indian filter coffee Instant coffee Irish coffee Kopi Luwak Kopi Tubruk Turkish coffee Vienna coffee Yuanyang export class DefaultSelectExampleComponent { }

Behavior

Triggering the select opens a list of several items for the user to choose from. The focus is set on the first item in the list. As soon as one item is clicked, the select closes and the selection is updated immediately. The select box resizes to fit its new content.

Select variants

Icons in selects

To differentiate between types of items in the select it is possible to use icons.

Icons in selects
x: 16px
y: 8px

Colors in selects

The colorpicker behaves like a select and allows to select from a predefined color palette, containing all chart colors.

Colors in selects
a: 20px
b: 32px
x: 12px
y: 16px

Default state of color box

Color box normal state
border-radius: 3px
height: 32px
width: 32px

Hover state of color box

Color box hover state
border-width: 2px //outside
border-color: $gray-300
height: 32px
width: 32px

Active state of color box

Color box active state
border-width: 2px //outside
border-color: $gray-400
height: 32px
width: 32px

Selected state of color box

Color box hover state
border-width: 2px //outside
border-color: $white //background color
outline-width: 1px //outside
outline-color: $gray-300
height: 32px
width: 32px

Disabled colorpicker

Colorpicker disabled state
Same as default disabled select. The color box shows the default or selected color.

Grouping in a select

If needed, content can be grouped within a select. There are two kinds of groups:

  • A tree approach where every item in the list is clickable (e.g. continent as well as country).
  • Grouping as a subdivision. The grouping header is not clickable in this approach.
´ Loading interactive demo...
<dt-select placeholder="Select filter type"> <dt-option value="Application">Application</dt-option> <dt-option value="Bounce">Bounce</dt-option> <dt-optgroup label="Browsers"> <dt-option value="Browser family">Browser family</dt-option> <dt-option value="Browser type">Browser type</dt-option> <dt-option value="Browser version">Browser version</dt-option> </dt-optgroup> <dt-optgroup label="Location"> <dt-option value="City">City</dt-option> <dt-option value="Country">Country</dt-option> <dt-option value="Continent">Continent</dt-option> </dt-optgroup> </dt-select> export class GroupsSelectExampleComponent { } Application Bounce Browser family Browser type Browser version City Country Continent export class GroupsSelectExampleComponent { }

Usage in a sentence

A select can also be used within a sentence. It's possible to have several of these sentences underneath each other.

Select usage in a sentence
x: 20px

Corner cases

By default a select opens to the bottom-right. If there is not enough space, the direction can be adjusted.

Select opening to the left

Select opening to the top

Select opening to the top and left

Select

´ Loading interactive demo...
<dt-select placeholder="Choose your coffee"> <dt-option value="ThePerfectPour">ThePerfectPour</dt-option> <dt-option value="Affogato">Affogato</dt-option> <dt-option value="Americano">Americano</dt-option> <dt-option value="Bicerin">Bicerin</dt-option> <dt-option value="Breve">Breve</dt-option> <dt-option value="Café Bombón">Café Bombón</dt-option> <dt-option value="Café au lait">Café au lait</dt-option> <dt-option value="Caffé Corretto">Caffé Corretto</dt-option> <dt-option value="Café Crema">Café Crema</dt-option> <dt-option value="Caffé Latte">Caffé Latte</dt-option> <dt-option value="Caffé macchiato">Caffé macchiato</dt-option> <dt-option value="Café mélange">Café mélange</dt-option> <dt-option value="Coffee milk">Coffee milk</dt-option> <dt-option value="Cafe mocha">Cafe mocha</dt-option> <dt-option value="Ca phe sua da">Ca phe sua da</dt-option> <dt-option value="Kopi susu">Kopi susu</dt-option> <dt-option value="Cappuccino ">Cappuccino </dt-option> <dt-option value="Cappuccino-cups">Cappuccino-cups</dt-option> <dt-option value="Cappuccino">Cappuccino</dt-option> <dt-option value="Carajillo">Carajillo</dt-option> <dt-option value="Cortado">Cortado</dt-option> <dt-option value="Cuban espresso">Cuban espresso</dt-option> <dt-option value="Espresso">Espresso</dt-option> <dt-option value="The Flat White">The Flat White</dt-option> <dt-option value="Frappuccino">Frappuccino</dt-option> <dt-option value="Galao">Galao</dt-option> <dt-option value="Greek frappé coffee">Greek frappé coffee</dt-option> <dt-option value="Iced Coffee">Iced Coffee</dt-option> <dt-option value="Indian filter coffee">Indian filter coffee</dt-option> <dt-option value="Instant coffee">Instant coffee</dt-option> <dt-option value="Irish coffee">Irish coffee</dt-option> <dt-option value="Kopi Luwak">Kopi Luwak</dt-option> <dt-option value="Kopi Tubruk">Kopi Tubruk</dt-option> <dt-option value="Turkish coffee">Turkish coffee</dt-option> <dt-option value="Vienna coffee">Vienna coffee</dt-option> <dt-option value="Yuanyang">Yuanyang</dt-option> </dt-select> export class DefaultSelectExampleComponent { } ThePerfectPour Affogato Americano Bicerin Breve Café Bombón Café au lait Caffé Corretto Café Crema Caffé Latte Caffé macchiato Café mélange Coffee milk Cafe mocha Ca phe sua da Kopi susu Cappuccino Cappuccino-cups Cappuccino Carajillo Cortado Cuban espresso Espresso The Flat White Frappuccino Galao Greek frappé coffee Iced Coffee Indian filter coffee Instant coffee Irish coffee Kopi Luwak Kopi Tubruk Turkish coffee Vienna coffee Yuanyang export class DefaultSelectExampleComponent { }

<dt-select> is like the native <select> a form control for selecting a value from a list of options. It is also designed to work with Angular Forms. By using the <dt-option> element, which is also provided in the select module, you can add values to the select. The API of the <dt-select> is very similar to the native <select> element, but has some additional useful functions, like a placeholder property. It is possible to disable the entire select or individual options in the select by using the disabled property on the <dt-select> or <dt-option>

Imports

You have to import the DtSelectModule when you want to use the <dt-select>. The <dt-select> component also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the Getting started Guide.

@NgModule({
  imports: [
    DtSelectModule,
  ],
})
class MyModule {}

Initialization

Options & Properties

DtSelect (<dt-select>)

Name Type Description
@Input() placeholder string Placeholder to be shown if no value has been selected.
@Input() required boolean Whether the component is required.
@Input() compareWith (v1: T, v2: T) => boolean Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned. Defaults to value equality.
@Input() value T Value of the select control.
@Input() id string Unique id of the element.
@Input() aria-label string Aria label of the select. If not specified, the placeholder will be used as label.
@Input() aria-labelledby string Input that can be used to specify the aria-labelledby attribute.
@Input() errorStateMatcher ErrorStateMatcher Object used to control when error messages are shown.
@Input() panelClass string | string[] | Set<string> | { [key: string]: any } Classes to be passed to the select panel. Supports the same syntax as ngClass.
@Output() openedChange EventEmitter<boolean> Event emitted when the select panel has been toggled.
@Output() selectionChange EventEmitter<DtSelectChange<T>> Event emitted when the selected value has been changed by the user.
@Output() valueChange EventEmitter<T> Event that emits whenever the raw value of the select changes.

DtOption (<dt-option>)

Name Type Description
@Input() value T The form value of the option.
@Input() disabled boolean Whether the option is disabled.
@Output() selectionChange EventEmitter<DtOptionSelectionChange<T>> Event emitted when the option is selected or deselected.

Getting and setting the select value The <dt-select> supports 2-way binding to the value property without the need for Angular forms.

Example:

´ Loading interactive demo...
<p>Selected Value: <i>{{selectedValue || 'No value selected'}}</i></p> <dt-select placeholder="Choose your coffee" [(value)]="selectedValue"> <dt-option value="ThePerfectPour">ThePerfectPour</dt-option> <dt-option value="Affogato">Affogato</dt-option> <dt-option value="Americano">Americano</dt-option> </dt-select> export class ValueSelectExampleComponent { selectedValue: string; }

Selected Value: {{selectedValue || 'No value selected'}}

ThePerfectPour Affogato Americano
export class ValueSelectExampleComponent { selectedValue: string; }

The <dt-select> also supports all of the form directives from the core FormsModule (NgModel) and ReactiveFormsModule (FormControl, FormGroup, etc.) As with native <select>, <dt-select> also supports a compareWith function. (Additional information about using a custom compareWith function can be found in the Angular forms documentation).

Example:

´ Loading interactive demo...
<p>Selected Value: <i>{{selectedValue || 'No value selected'}}</i></p> <dt-select placeholder="Choose your coffee" [(ngModel)]="selectedValue"> <dt-option *ngFor="let coffee of coffees" [value]="coffee.value"> {{coffee.viewValue}} </dt-option> </dt-select> export class FormsSelectExampleComponent { selectedValue: string; coffees = [ { value: 'ThePerfectPour', viewValue: 'ThePerfectPour' }, { value: 'Affogato', viewValue: 'Affogato' }, { value: 'Americano', viewValue: 'Americano' }, ]; }

Selected Value: {{selectedValue || 'No value selected'}}

{{coffee.viewValue}}
export class FormsSelectExampleComponent { selectedValue: string; coffees = [ { value: 'ThePerfectPour', viewValue: 'ThePerfectPour' }, { value: 'Affogato', viewValue: 'Affogato' }, { value: 'Americano', viewValue: 'Americano' }, ]; }

Creating groups of options

The <dt-optgroup> element can be used to group common options under a subheading. The name of the group can be set using the label property of <dt-optgroup>. Like individual <dt-option> elements, an entire <dt-optgroup> can be disabled or enabled by setting the disabled property on the group.

Example:

´ Loading interactive demo...
<dt-select placeholder="Select filter type"> <dt-option value="Application">Application</dt-option> <dt-option value="Bounce">Bounce</dt-option> <dt-optgroup label="Browsers"> <dt-option value="Browser family">Browser family</dt-option> <dt-option value="Browser type">Browser type</dt-option> <dt-option value="Browser version">Browser version</dt-option> </dt-optgroup> <dt-optgroup label="Location"> <dt-option value="City">City</dt-option> <dt-option value="Country">Country</dt-option> <dt-option value="Continent">Continent</dt-option> </dt-optgroup> </dt-select> export class GroupsSelectExampleComponent { } Application Bounce Browser family Browser type Browser version City Country Continent export class GroupsSelectExampleComponent { }

Form field

The select component supports the <dt-form-field> and all of its features. These include error messages, hint text, prefix & suffix. For additional information about these features, see the form field documentation.

Example:

´ Loading interactive demo...
<dt-form-field> <dt-label>Your Coffee:</dt-label> <dt-select placeholder="Choose your coffee" required [(ngModel)]="selectedValue"> <dt-option>No Coffee (Triggers an error)</dt-option> <dt-option value="ThePerfectPour">ThePerfectPour</dt-option> <dt-option value="Affogato">Affogato</dt-option> <dt-option value="Americano">Americano</dt-option> </dt-select> <dt-hint>Choose one of the coffees in the list</dt-hint> <dt-error>Please select a coffee</dt-error> </dt-form-field> export class FormFieldSelectExampleComponent { selectedValue: string; } Your Coffee: No Coffee (Triggers an error) ThePerfectPour Affogato Americano Choose one of the coffees in the list Please select a coffee export class FormFieldSelectExampleComponent { selectedValue: string; }

Disabling the select or individual options

It is possible to disable the entire select or individual options in the select by using the disabled property on the <dt-select> and the <dt-option> components respectively.

Example:

´ Loading interactive demo...
<dt-select placeholder="Choose your coffee" [disabled]="disabled"> <dt-option value="ThePerfectPour">ThePerfectPour</dt-option> <dt-option disabled value="Affogato">Affogato</dt-option> <dt-option value="Americano">Americano</dt-option> </dt-select> <p><dt-checkbox checked (change)="disabled = !disabled">Disabled</dt-checkbox></p> export class DisabledSelectExampleComponent { disabled = true; } ThePerfectPour Affogato Americano

Disabled

export class DisabledSelectExampleComponent { disabled = true; }

Non string values

The select component also supports non string, non basic value types.

Example:

´ Loading interactive demo...
<p>Selected Value label: <i>{{selectedValue?.viewValue || 'No value selected'}}</i></p> <dt-select placeholder="Choose your coffee" [(ngModel)]="selectedValue"> <dt-option *ngFor="let coffee of coffees" [value]="coffee"> {{coffee.viewValue}} </dt-option> </dt-select> export class ComplexValueSelectExampleComponent { selectedValue: { value: string; viewValue: string }; coffees = [ { value: 'ThePerfectPour', viewValue: 'ThePerfectPour' }, { value: 'Affogato', viewValue: 'Affogato' }, { value: 'Americano', viewValue: 'Americano' }, ]; }

Selected Value label: {{selectedValue?.viewValue || 'No value selected'}}

{{coffee.viewValue}}
export class ComplexValueSelectExampleComponent { selectedValue: { value: string; viewValue: string }; coffees = [ { value: 'ThePerfectPour', viewValue: 'ThePerfectPour' }, { value: 'Affogato', viewValue: 'Affogato' }, { value: 'Americano', viewValue: 'Americano' }, ]; }

Accessibility

The select component without text or label should be given a meaningful label via aria-label or aria-labelledby.

The select component has role="listbox" and options inside select have role="option".