Angular Select directive. Customize the native select with custom CSS that changes initial element appearance.
Available in Other JavaScript Frameworks
CoreUI Angular Select Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Examples
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormSelectDirective } from '@coreui/angular';
@Component({
selector: 'docs-select',
templateUrl: './select.component.html',
imports: [FormSelectDirective, ReactiveFormsModule]
})
export class SelectComponent {}<select aria-label="Default select example" cSelect>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormSelectDirective } from '@coreui/angular';
@Component({
selector: 'docs-select-sizing',
templateUrl: './select-sizing.component.html',
imports: [FormSelectDirective, ReactiveFormsModule]
})
export class SelectSizingComponent {}<select aria-label="Large select example" cSelect class="mb-3" sizing="lg">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select aria-label="Default select example" cSelect class="mb-3">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select aria-label="Small select example" cSelect sizing="sm">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Select Multiple
The multiple attribute is also supported:
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormSelectDirective } from '@coreui/angular';
@Component({
selector: 'docs-select-multiple',
templateUrl: './select-multiple.component.html',
imports: [FormSelectDirective, ReactiveFormsModule]
})
export class SelectMultipleComponent {}<select aria-label="Multiple select example" cSelect multiple sizing="lg">
<option disabled>Select multiple options</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Html Size
As is the html size property:
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormSelectDirective } from '@coreui/angular';
@Component({
selector: 'docs-select-html-size',
templateUrl: './select-html-size.component.html',
imports: [FormSelectDirective, ReactiveFormsModule]
})
export class SelectHtmlSizeComponent {}<select aria-label="Multiple select example" cSelect multiple size="3" sizing="lg">
<option>Select multiple options</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>Disabled
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormSelectDirective } from '@coreui/angular';
@Component({
selector: 'docs-select-disabled',
templateUrl: './select-disabled.component.html',
imports: [FormSelectDirective, ReactiveFormsModule]
})
export class SelectDisabledComponent {}<select aria-label="Disabled select example" cSelect disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option selected value="2">Selected: Two</option>
<option value="3">Three</option>
</select>API reference
Form Module
cSelect
directive
import { FormSelectDirective } from '@coreui/angular'