# CoreUI Angular documentation > CoreUI for Angular is a UI component library written in TypeScript and ready for your next Angular project. --- # Angular Components Library > CoreUI for Angular is a UI Component library written in TypeScript, and ready for your next Angular project. Learn how to include CoreUI Angular Components in your project. ## Installation #### Prerequisites Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager. ###### Node.js Angular 22 requires `Node.js` LTS version `^22.22.3`, `^24.15.0` or `^26.0.0`. - To check your version, run `node -v` in a terminal/console window. - To get `Node.js`, go to [nodejs.org](https://nodejs.org/). ###### Angular CLI The Angular CLI is a command-line interface tool that allows you to scaffold, develop, test, deploy, and maintain Angular applications directly from a command shell. Install the Angular CLI globally using a terminal/console window. ```bash npm install -g @angular/cli ``` See also: Angular setup #### Angular CLI **CoreUI v5.7 for Angular 22** supports `ng add` to install all required dependencies for your Angular project. ```bash ng add @coreui/angular ``` #### Npm Your other option is to use `npm install` directly. ```bash npm install @coreui/angular @coreui/coreui @coreui/icons-angular ``` ## Using components ```ts import { AlertModule } from '@coreui/angular'; @NgModule({ imports: [AlertModule,] }) export class AppModule(){} ``` ## Standalone components Starting from version `4.4.x` CoreUI Angular components are marked as `standalone: true`. ## Animations Since version `5.7.25` no CoreUI Angular component uses the `@angular/animations` module — every animation runs on CSS transitions. You no longer need `BrowserAnimationsModule` or `provideAnimationsAsync()` for our components, and `@angular/animations` can be dropped from your dependencies unless your own code uses it.
| Component | retired from | |----------------|--------------| | ~~SidebarNav~~ | `5.7.25` | ~~Alert~~ | `5.7.15` | ~~Carousel~~ | `5.7.15` | ~~Collapse~~ | `5.7.15` | ~~Loading Button~~ | `5.7.15` | ~~Modal~~ | `5.7.15` | ~~Offcanvas~~ | `5.7.15` | ~~Toast~~ | `5.7.4` |
On earlier versions the components listed above needed the animations provider, imported as `BrowserAnimationsModule` with NgModules or `provideAnimationsAsync()` with standalone components. ## Providers To ensure that the Sidebar and Dropdown functions correctly, you might need to import the required providers. Depending on the configuration of your project, this should be done in either `app.module`, `app.config`, or `app.routes`. ```ts ... importProvidersFrom(SidebarModule, DropdownModule) ... ``` ## Stylesheets Angular components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem. ### CoreUI CSS files ###### Installation ```bash npm install @coreui/coreui ``` ###### Basic usage ```scss @import "@coreui/coreui/scss/coreui"; ``` See also: Customize CoreUI CSS ### Bootstrap CSS files ###### Installation (optional) ```bash npm install bootstrap ``` ###### Basic usage ```js import 'bootstrap/dist/css/bootstrap.min.css' ``` --- # Accessibility > A brief overview of CoreUI for Angular features and limitations for the creation of accessible content. CoreUI for Angular provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box. ## Overview and limitations The overall accessibility of any project built with CoreUI for Angular depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with CoreUI for Angular that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. ### Structural markup CoreUI for Angular styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of CoreUI for Angular itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed. ### Interactive components CoreUI for Angular interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). Because CoreUI for Angular components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. ### Color contrast Some combinations of colors that currently make up CoreUI for Angular default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. ```html

Danger: This action is not reversible

``` For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, CoreUI's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** ```html Skip to main content ``` ### Reduced motion CoreUI for Angular includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for Angular (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), CoreUI for Angular enables smooth scrolling using the `scroll-behavior` property. ## Additional resources - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) - [The A11Y Project](https://www.a11yproject.com/) - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Tenon.io Accessibility Checker](https://tenon.io/) - [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) - [Microsoft Accessibility Insights](https://accessibilityinsights.io/) - [Deque Axe testing tools](https://www.deque.com/axe/) --- # Documentation
CoreUI logo

Support CoreUI Development

CoreUI is an MIT-licensed open-source project and is utterly free to use. However, the effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Try out our new products:

#### Community Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. - Read and subscribe to The Official CoreUI Blog. - Join the official CoreUI Community. - You can also follow @core_ui on X (Twitter). --- # LLMs.txt > LLM-optimized documentation endpoints for CoreUI for Angular — llms.txt, llms-full.txt, and a Markdown version of every page. ## Introduction [llms.txt](https://llmstxt.org) is an emerging standard that helps AI models understand and navigate documentation. The CoreUI for Angular docs expose three LLM-friendly endpoints so assistants can retrieve accurate, up-to-date content straight from the source. For a richer, tool-based integration, see [MCP Server](https://coreui.io/angular/docs/ai-tools/mcp/). ## /llms.txt A structured index of the documentation — every page as a titled, described link, grouped by section. It gives an LLM a compact map of what exists and where. [Open llms.txt](https://coreui.io/angular/docs/llms.txt) ## /llms-full.txt The entire documentation concatenated into a single Markdown file, so a model can ingest the whole set in one request. [Open llms-full.txt](https://coreui.io/angular/docs/llms-full.txt) ## Markdown version of any page Append `.md` to any documentation page URL to get its clean Markdown version, without the site chrome. For example: [/angular/docs/components/accordion.md](https://coreui.io/angular/docs/components/accordion.md) --- # MCP Server > Bring the CoreUI for Angular documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server. ## Introduction [Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard that lets AI assistants connect to external tools and data sources. The **`@coreui/docs-mcp`** server gives your assistant direct access to the official CoreUI documentation, so it answers from the current docs instead of relying on stale training data. It provides: - **Component documentation** — pages, props, events, and slots. - **Live content** — read on demand from `coreui.io`, always matching the latest release. - **Cross-framework links** — where each component is documented for Angular, Bootstrap, React, and Vue. - **Coverage of Angular, Bootstrap, React, and Vue** from a single server. The server runs locally over stdio via `npx` — no global install required. ## Installation ### Claude Code Add the server with the CLI, then start a new session and run `/mcp` to verify the connection: ```bash claude mcp add coreui-docs -s user -- npx -y @coreui/docs-mcp --framework angular ``` ### Cursor Create `.cursor/mcp.json` in your project (or `~/.cursor/mcp.json` for global configuration): ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "angular"] } } } ``` ### VS Code Create `.vscode/mcp.json` in your project. Note that VS Code uses the `servers` key: ```json { "servers": { "coreui-docs": { "type": "stdio", "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "angular"] } } } ``` ### Windsurf Edit `~/.codeium/windsurf/mcp_config.json`: ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "angular"] } } } ``` ### Claude Desktop Edit `claude_desktop_config.json` (Settings → Developer → Edit Config): ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "angular"] } } } ``` ### OpenAI Codex Add it with the CLI, or edit `~/.codex/config.toml` directly: ```bash codex mcp add coreui-docs -- npx -y @coreui/docs-mcp --framework angular ``` ```toml [mcp_servers.coreui-docs] command = "npx" args = ["-y", "@coreui/docs-mcp", "--framework", "angular"] ``` ## Tools Once connected, your assistant can call the following tools: | Tool | Description | | --- | --- | | `list_components` | List documentation pages, optionally filtered by section or a substring. | | `search_docs` | Search the documentation and return the best matching pages. | | `get_doc_page` | Fetch the full Markdown of a page by slug, component name, or URL. | | `get_component_api` | Get the structured API (props, events, slots) for a component. | | `get_cross_framework_links` | Get documentation URLs for a component across every CoreUI framework. | ## Configuration | Flag | Environment variable | Default | Description | | --- | --- | --- | --- | | `--framework ` | `COREUI_DOCS_FRAMEWORKS` | `angular,bootstrap,react,vue` | Enabled editions (comma-separated). The first is the default for tools. | | `--base-url ` | `COREUI_DOCS_BASE_URL` | `https://coreui.io` | Origin of the CoreUI site. The `//docs` path is appended automatically — override only for a staging or self-hosted mirror. | | `--ttl ` | `COREUI_DOCS_TTL_MINUTES` | `360` | Cache freshness window. | | — | `COREUI_DOCS_CACHE_DIR` | OS cache directory | On-disk cache location. | ## Example prompts Once installed, try asking your AI assistant: - "How do I use the CoreUI Angular Multi Select component?" - "What props does the CoreUI Angular Date Picker accept?" - "Show me the CoreUI Angular Modal documentation." - "Where is the Accordion documented across CoreUI frameworks?" The package is open source and published as [`@coreui/docs-mcp`](https://www.npmjs.com/package/@coreui/docs-mcp). --- # Sass > Utilize CoreUI source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
## File structure Whenever possible, avoid modifying CoreUI core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: ```text your-project/ ├── ... ├── node_modules/ │ ├── @coreui/coreui │ │ ├── scss │ │ └── ... │ └── @coreui/angular │ └── ... ├── src │ └── scss │ ├── _custom.scss │ ├── ... │ ├── _variables.scss │ └── styles.scss └── ... ``` If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping CoreUI source files separate from your own. ``` your-project/ ├── scss │ └── custom.scss └── @coreui/coreui/ ├── js └── scss ```
## Importing In your `custom.scss`, you'll import CoreUI source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. > **Heads up!** > > Since `@coreui/coreui` v5.3.0 and `@coreui/coreui-pro` v5.10.0, we support Sass modules. > > You can now use the modern `@use` and `@forward` rules instead of `@import`, which is deprecated and will be removed in Dart Sass 3.0.0. Using `@import` will result in a compilation warning. You can learn more about this transition [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss // Custom.scss // Option A: Include all of CoreUI @use "@coreui/coreui/scss/coreui"; // Then add additional custom code here ``` ```scss // Custom.scss // Option B: Include parts of CoreUI // 1. Include @use "@coreui/coreui/scss/root"; // 2. Optionally include any other parts as needed @use "@coreui/coreui/scss/utilities"; @use "@coreui/coreui/scss/reboot"; @use "@coreui/coreui/scss/type"; @use "@coreui/coreui/scss/images"; @use "@coreui/coreui/scss/containers"; @use "@coreui/coreui/scss/grid"; @use "@coreui/coreui/scss/helpers"; // 3. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @use "@coreui/coreui/scss/utilities/api"; // 4. Add additional custom code here ``` > **Sass `@import` are deprecated and will be removed in Dart Sass 3.0.0.!** > > You can also use `@import` rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecation [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss // Custom.scss // Option A: Include all of CoreUI @import "@coreui/coreui/scss/coreui"; // Then add additional custom code here ``` ```scss // Custom.scss // Option B: Include parts of CoreUI // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "@coreui/coreui/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required CoreUI stylesheets @import "@coreui/coreui/scss/variables"; // 4. Include any default map overrides here // 5. Include remainder of required parts @import "@coreui/coreui/scss/maps"; @import "@coreui/coreui/scss/mixins"; @import "@coreui/coreui/scss/root"; // 6. Optionally include any other parts as needed @import "@coreui/coreui/scss/utilities"; @import "@coreui/coreui/scss/reboot"; @import "@coreui/coreui/scss/type"; @import "@coreui/coreui/scss/images"; @import "@coreui/coreui/scss/containers"; @import "@coreui/coreui/scss/grid"; @import "@coreui/coreui/scss/helpers"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "@coreui/coreui/scss/utilities/api"; // 8. Add additional custom code here ```
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of CoreUI for Bootstrap under the `Optional` section as needed. We suggest using the full
## Variable defaults Every Sass variable in CoreUI for Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. You will find the complete list of CoreUI's variables in `@coreui/coreui/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. Variable overrides must come after our functions are imported, but before the rest of the imports. Here's an example that changes the `background-color` and `color` for the `body` when importing and compiling CoreUI for Bootstrap via npm: > **Heads up!** > > Since `@coreui/coreui` v5.3.0 and `@coreui/coreui-pro` v5.10.0, we support Sass modules. > > You can now use the modern `@use` and `@forward` rules instead of `@import`, which is deprecated and will be removed in Dart Sass 3.0.0. Using `@import` will result in a compilation warning. You can learn more about this transition [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss @use "@coreui/coreui/scss/coreui" with ( $body-bg: #000, $body-color: #111 ) ``` > **Sass `@import` are deprecated and will be removed in Dart Sass 3.0.0.!** > > You can also use `@import` rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecation [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss // Required @import "@coreui/coreui/scss/functions"; // Default variable overrides $body-bg: #000; $body-color: #111; // Required @import "@coreui/coreui/scss/variables"; @import "@coreui/coreui/scss/maps"; @import "@coreui/coreui/scss/mixins"; @import "@coreui/coreui/scss/root"; // Optional CoreUI components here @import "@coreui/coreui/scss/reboot"; @import "@coreui/coreui/scss/type"; // etc ``` Repeat as necessary for any variable in CoreUI, including the global options below.
## Maps and loops CoreUI for Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.
### Modify map All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: ```scss @use "sass:color"; @use "sass:map"; @use "@coreui/coreui/scss/variables" as *; $danger: color.scale($danger, $lightness: 45%); $primary: #0074d9; ``` Later on, these variables are set in CoreUI's `$theme-colors` map: ```scss $theme-colors: map.merge($theme-colors, ( "danger": $danger, "primary": $primary )); ```
### Add to map Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`. > **Heads up!** > > Since `@coreui/coreui` v5.3.0 and `@coreui/coreui-pro` v5.10.0, we support Sass modules. > > You can now use the modern `@use` and `@forward` rules instead of `@import`, which is deprecated and will be removed in Dart Sass 3.0.0. Using `@import` will result in a compilation warning. You can learn more about this transition [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss @use "sass:map"; @use "@coreui/coreui/scss/variables" as *; $custom-colors: ( "custom-color": #900 ); $theme-colors: map.merge($theme-colors, $custom-colors); @use "@coreui/coreui/scss/coreui"; ``` > **Sass `@import` are deprecated and will be removed in Dart Sass 3.0.0.!** > > You can also use `@import` rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecation [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss // Create your own map $custom-colors: ( "custom-color": #900 ); // Merge the maps $theme-colors: map-merge($theme-colors, $custom-colors); ```
### Remove from map To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options: > **Heads up!** > > Since `@coreui/coreui` v5.3.0 and `@coreui/coreui-pro` v5.10.0, we support Sass modules. > > You can now use the modern `@use` and `@forward` rules instead of `@import`, which is deprecated and will be removed in Dart Sass 3.0.0. Using `@import` will result in a compilation warning. You can learn more about this transition [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss @use "sass:map"; @use "@coreui/coreui/scss/variables" as *; @use "@coreui/coreui/scss/maps" as *; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); $theme-colors-border-subtle: map.remove($theme-colors-border-subtle, "info", "light", "dark"); @use "@coreui/coreui/scss/coreui"; ``` > **Sass `@import` are deprecated and will be removed in Dart Sass 3.0.0.!** > > You can also use `@import` rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecation [here](https://sass-lang.com/documentation/breaking-changes/import/). ```scss // Required @import "@coreui/coreui/scss/functions"; @import "@coreui/coreui/scss/variables"; @import "@coreui/coreui/scss/maps"; @import "@coreui/coreui/scss/mixins"; @import "@coreui/coreui/scss/root"; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); // Optional @import "@coreui/coreui/scss/reboot"; @import "@coreui/coreui/scss/type"; // etc ```
## Required keys CoreUI for Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used. For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values.
## Functions
### Colors Next to the [Sass maps](https://coreui.io/docs/customize/color#color-sass-maps") we have, theme colors can also be used as standalone variables, like `$primary`. ```scss .custom-element { color: $gray-100; background-color: $dark; } ``` You can lighten or darken colors with CoreUI `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. ```scss // Tint a color: mix a color with white @function tint-color($color, $weight) { @return mix(white, $color, $weight); } // Shade a color: mix a color with black @function shade-color($color, $weight) { @return mix(black, $color, $weight); } // Shade the color if the weight is positive, else tint it @function shift-color($color, $weight) { @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); } ``` In practice, you'd call the function and pass in the color and weight parameters. ```scss @use "@coreui/coreui/scss/functions/color" as *; .custom-element { color: tint-color($primary, 10%); } .custom-element-2 { color: shade-color($danger, 30%); } ```
### Color contrast In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions. An additional function we include in CoreUI for Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. For example, to generate color swatches from our `$theme-colors` map: ```scss @use "@coreui/coreui/scss/functions/color-contrast" as *; @each $color, $value in $theme-colors { .swatch-#{$color} { color: color-contrast($value); } } ``` It can also be used for one-off contrast needs: ```scss @use "@coreui/coreui/scss/functions/color-contrast" as *; .custom-element { color: color-contrast(#000); // returns `color: #fff` } ``` You can also specify a base color with our color map functions: ```scss @use "@coreui/coreui/scss/functions/color-contrast" as *; .custom-element { color: color-contrast($dark); // returns `color: #fff` } ```
### Escape SVG We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted.
### Add and Subtract We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct. Example where the calc is valid: ```scss @use "@coreui/coreui/scss/functions/math" as *; $border-radius: .25rem; $border-width: 1px; .element { // Output calc(.25rem - 1px) is valid border-radius: calc($border-radius - $border-width); } .element { // Output the same calc(.25rem - 1px) as above border-radius: subtract($border-radius, $border-width); } ``` Example where the calc is invalid: ```scss @use "@coreui/coreui/scss/functions/math" as *; $border-radius: .25rem; $border-width: 0; .element { // Output calc(.25rem - 0) is invalid border-radius: calc($border-radius - $border-width); } .element { // Output .25rem border-radius: subtract($border-radius, $border-width); } ```
## Mixins Our `@coreui/coreui/scss/mixins/` directory has a ton of mixins that power parts of CoreUI and can also be used across your own project. ### Color schemes A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. ```scss @mixin color-scheme($name) { @media (prefers-color-scheme: #{$name}) { @content; } } ``` ```scss @use "@coreui/coreui/scss/mixins/color-scheme" as *; .custom-element { @include color-scheme(dark) { // Insert dark mode styles here } @include color-scheme(custom-named-scheme) { // Insert custom color scheme styles here } } ``` --- # Options > Quickly customize CoreUI for Angular with built-in variables to easily toggle global CSS preferences for controlling style and behavior. ## Global options Customize CoreUI for Angular with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. You can find and customize these variables for key global options in CoreUI `@coreui/coreui/scss/_variables.scss` file. | Variable | Values | Description | | ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](https://coreui.io/docs/utilities/spacing). | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query](https://coreui.io/docs/getting-started/accessibility#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | | `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v4.2.0) | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | | `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS](https://coreui.io/docs/getting-started/rfs). | | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities](https://coreui.io/docs/utilities/spacing#negative-margin). | | `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | | `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query](https://coreui.io/docs/getting-started/accessibility#reduced-motion) | | `$enable-ltr` | `false` or `false` (default) | Enables Left-to-Right | | `$enable-rtl` | `true` (default) or `false` | Enables Right-to-Left | --- # CSS variables > Use CoreUI CSS custom properties for fast and forward-looking design and development. CoreUI includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping. **All our custom properties are prefixed with `cui-`** to avoid conflicts with third party CSS. ## Root variables Here are the variables we include (note that the `:root` is required) that can be accessed anywhere CoreUI CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files. ```css :root { --cui-blue: #0d6efd; --cui-indigo: #6610f2; --cui-purple: #6f42c1; --cui-pink: #d63384; --cui-red: #dc3545; --cui-orange: #fd7e14; --cui-yellow: #ffc107; --cui-green: #198754; --cui-teal: #20c997; --cui-cyan: #0dcaf0; --cui-black: #000015; --cui-white: #fff; --cui-gray: #8a93a2; --cui-gray-dark: #636f83; --cui-gray-100: #ebedef; --cui-gray-200: #d8dbe0; --cui-gray-300: #c4c9d0; --cui-gray-400: #b1b7c1; --cui-gray-500: #9da5b1; --cui-gray-600: #8a93a2; --cui-gray-700: #768192; --cui-gray-800: #636f83; --cui-gray-900: #4f5d73; --cui-primary: #321fdb; --cui-secondary: #9da5b1; --cui-success: #2eb85c; --cui-info: #39f; --cui-warning: #f9b115; --cui-danger: #e55353; --cui-light: #ebedef; --cui-dark: #4f5d73; --cui-primary-rgb: 50, 31, 219; --cui-secondary-rgb: 157, 165, 177; --cui-success-rgb: 46, 184, 92; --cui-info-rgb: 51, 153, 255; --cui-warning-rgb: 249, 177, 21; --cui-danger-rgb: 229, 83, 83; --cui-light-rgb: 235, 237, 239; --cui-dark-rgb: 79, 93, 115; --cui-white-rgb: 255, 255, 255; --cui-black-rgb: 0, 0, 21; --cui-body-color-rgb: 44, 56, 74; --cui-body-bg-rgb: 255, 255, 255; --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --cui-body-font-family: var(--cui-font-sans-serif); --cui-body-font-size: 1rem; --cui-body-font-weight: 400; --cui-body-line-height: 1.5; --cui-body-color: rgba(44, 56, 74, 0.95); --cui-body-bg: #fff; --cui-border-width: 1px; --cui-border-style: solid; --cui-border-color: #d8dbe0; --cui-border-color-translucent: rgba(0, 0, 21, 0.175); --cui-border-radius: 0.375rem; --cui-border-radius-sm: 0.25rem; --cui-border-radius-lg: 0.5rem; --cui-border-radius-xl: 1rem; --cui-border-radius-2xl: 2rem; --cui-border-radius-pill: 50rem; --cui-heading-color: unset; --cui-link-color: #321fdb; --cui-link-hover-color: #2819af; --cui-code-color: #d63384; --cui-highlight-bg: #fff3cd; } ```
## Component variables CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of CoreUI components after Sass compilation. Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
## Prefix Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. Customize the prefix via the `$prefix` Sass variable. By default, it's set to `cui-` (note the trailing dash).
## Examples CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. ```css body { font: 1rem/1.5 var(--cui-font-sans-serif); } a { color: var(--cui-blue); } ```
## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript. --- # Angular Breakpoints > Breakpoints are the triggers in CoreUI for Angular for how your layout responsive changes across device or viewport sizes. ## Core concepts - **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size. - **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries. - **Mobile first, responsive design is the goal.** CoreUI CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors. ## Available breakpoints CoreUI for Angular includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. | Breakpoint | Class infix | Dimensions | | --- | --- | --- | | X-Small | None | <576px | | Small | `sm` | ≥576px | | Medium | `md` | ≥768px | | Large | `lg` | ≥992px | | Extra large | `xl` | ≥1200px | | Extra extra large | `xxl` | ≥1400px | Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet. ```scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); ``` For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/docs/layout/grid#sass). ## Media queries Since CoreUI for Angular is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. ### Min-width CoreUI for Angular primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. ```scss // Source mixins // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } @include media-breakpoint-up(xxl) { ... } // Usage // Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } } ``` These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example: ```scss // X-Small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in CoreUI // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) @media (min-width: 1400px) { ... } ``` ### Max-width We occasionally use media queries that go in the other direction (the given screen size *or smaller*): ```scss // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }` @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } @include media-breakpoint-down(xl) { ... } @include media-breakpoint-down(xxl) { ... } // Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { .custom-class { display: block; } } ``` These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example: ```scss // X-Small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } // X-Large devices (large desktops, less than 1400px) @media (max-width: 1399.98px) { ... } // XX-Large devices (larger desktops) // No media query since the xxl breakpoint has no upper bound on its width ``` > Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. ### Single breakpoint There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. ```scss @include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... } @include media-breakpoint-only(xxl) { ... } ``` For example the `@include media-breakpoint-only(md) { ... }` will result in : ```scss @media (min-width: 768px) and (max-width: 991.98px) { ... } ``` ### Between breakpoints Similarly, media queries may span multiple breakpoint widths: ```scss @include media-breakpoint-between(md, xl) { ... } ``` Which results in: ```scss // Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199.98px) { ... } ``` --- # Angular Containers > Containers are a fundamental building block of CoreUI for Angular. They contain, pad, and align your content within a given device or viewport. ## How they work Containers are the most basic layout element in CoreUI for Angular and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container. CoreUI for Angular comes with three different containers: - `c-container`, which sets a `max-width` at each responsive breakpoint - `c-container fluid`, which has `width: 100%` at all breakpoints - `c-container { sm|md|lg|xl|xxl }`, with `width: 100%` until the specified breakpoint The table below illustrates how each container's `max-width` compares to the original `c-container` and `c-container fluid` across each breakpoint. | `` | Extra small
<576px
| Small
≥576px
| Medium
≥768px
| Large
≥992px
| X-Large
≥1200px
| XX-Large
≥1400px
| | --- | --- | --- | --- | --- | --- | --- | | | 100% | 540px | 720px | 960px | 1140px | 1320px | | `breakpoint="sm"` | 100% | 540px | 720px | 960px | 1140px | 1320px | | `breakpoint="md"` | 100% | 100% | 720px | 960px | 1140px | 1320px | | `breakpoint="lg"` | 100% | 100% | 100% | 960px | 1140px | 1320px | | `breakpoint="xl"` | 100% | 100% | 100% | 100% | 1140px | 1320px | | `breakpoint="xxl"` | 100% | 100% | 100% | 100% | 100% | 1320px | | `fluid` | 100% | 100% | 100% | 100% | 100% | 100% | ### Default container Our default `c-container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. ### Responsive containers Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width` for each of the higher breakpoints. For example, `c-container sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`. ### Fluid containers Use `c-container fluid` for a full width container, spanning the entire width of the viewport. ## API reference ### Grid Module ```typescript import { GridModule } from '@coreui/angular'; @NgModule({ imports: [GridModule,] }) export class AppModule() { } ``` ### c-container _component_ ```jsx import { ContainerComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `breakpoint` | `string` | `''` | Set container 100% wide until a breakpoint. | | `fluid` | `boolean` | `false` | Set container 100% wide, spanning the entire width of the viewport. | --- # Angular Grid > Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. ## Example CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) in new window and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together. The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `c-container`. ## How it works Breaking it down, here's how the grid system comes together: - **Our grid supports six responsive breakpoints**. Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `[sm]="4"` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint. - **Containers center and horizontally pad your content**. Use `c-container` for a responsive pixel width, `c-container fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `c-container breakpoint="md"`) for a combination of fluid and pixel widths. - **Rows are wrappers for columns**. Each column has horizontal `padding` (called a **gutter**) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](https://coreui.io/angular/docs/layout/grid/#row-columns) and [gutter classes](https://coreui.io/angular/docs/layout/gutters) to change the spacing of your content. - **Columns are incredibly flexible**. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `c-col [xs]="4"` spans four). Widths are set in percentages so you always have the same relative sizing. - **Gutters are also responsive and customizable**. [Gutter classes](https://coreui.io/angular/docs/layout/gutters) are available across all breakpoints, with all the same sizes as our [margin and padding spacing](https://coreui.io/docs/utilities/spacing/). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). ## Grid options CoreUI grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow: - Extra small (`xs`) - Small (`sm`) - Medium (`md`) - Large (`lg`) - Extra large (`xl`) - Extra extra large (`xxl`) As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
xs
<576px		 sm
≥576px		 md
≥768px		 lg
≥992px		 xl
≥1200px		 xxl
≥1400px
Container max-width None 540px 720px 960px 1140px 1320px
Class prefix <c-col xs=> <c-col sm=> <c-col md=> <c-col lg=> <c-col xl=> <c-col xxl=>
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes
## Auto-layout columns Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `c-col sm="6"`. ### Equal-width For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. ### Setting one column width Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. ### Variable width content Use `c-col xs|sm|md|lg|xl="auto"` props to size columns based on the natural width of their content. ## Responsive classes CoreUI's grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. ### All breakpoints For grids that are the same from the smallest of devices to the largest, use the `c-col` and `c-col xs=` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `c-col`. ### Stacked to horizontal Using a single set of `c-col sm=` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm). ### Mix and match Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. ### Row columns Use the responsive `c-row [sm | md | lg | xl | xxl]=*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `c-col xs=` classes apply to the individual columns (e.g., `c-col xs="4"`), the row columns classes are set on the parent `c-row` as a shortcut. With c-row `c-row [sm | md | lg | xl | xxl]="'auto'"` you can give the columns their natural width. Use these row columns classes to quickly create basic grid layouts or to control your card layouts. ## Nesting To nest your content with the default grid, add a new `row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). ## API reference ### Grid Module ```typescript import { GridModule } from '@coreui/angular'; @NgModule({ imports: [GridModule,] }) export class AppModule() { } ``` ### c-container _component_ ```jsx import { ContainerComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `breakpoint` | `string` | `''` | Set container 100% wide until a breakpoint. | | `fluid` | `boolean` | `false` | Set container 100% wide, spanning the entire width of the viewport. | ### c-row cRow _component_ _directive_ ```jsx import { RowComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `lg` | `NumberOfColumns` | - | The number of columns/offset/order on large devices (<1200px). | | `md` | `NumberOfColumns` | - | The number of columns/offset/order on medium devices (<992px). | | `sm` | `NumberOfColumns` | - | The number of columns/offset/order on small devices (<768px). | | `xl` | `NumberOfColumns` | - | The number of columns/offset/order on X-Large devices (<1400px). | | `xs` | `NumberOfColumns` | - | The number of columns/offset/order on extra small devices (<576px). | | `xxl` | `NumberOfColumns` | - | The number of columns/offset/order on XX-Large devices (≥1400px). | ### gutter _directive_ for c-row ```jsx import { GutterDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `gutter` | `number \| IGutterObject \| GutterBreakpoints` | `{}` | Define padding between columns to space and align content responsively in the Bootstrap grid system. | ### c-col cCol _component_ _directive_ ```jsx import { ColComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cCol` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on extra small devices (<576px). | | `lg` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on large devices (<1200px). | | `md` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on medium devices (<992px). | | `offset` | `ColOffsetType` | - | Offset grid columns. | | `order` | `ColOrderType` | - | Controls the visual order of your columns. Includes support for `1` through `5` across all breakpoints. | | `sm` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on small devices (<768px). | | `xl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on X-Large devices (<1400px). | | `xs` | `number \| boolean \| 'auto'` | `false` | The number of columns on extra small devices (<576px). | | `xxl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on XX-Large devices (≥1400px). | --- # Angular Columns > Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to flexbox grid system. ## How they work - **Columns build on the grid's flexbox architecture**. Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](https://coreui.io/angular/docs/layout/grid#row-columns). You choose how columns grow, shrink, or otherwise change. - **When building grid layouts, all content goes in columns**. The hierarchy of CoreUI grid goes from [container](https://coreui.io/angular/docs/layout/containers) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences. - **CoreUI for Angular includes predefined components for creating fast, responsive layouts**. With [six breakpoints](https://coreui.io/angular/docs/layout/breakpoints) and a dozen columns at each grid tier, we have dozens of components already built for you to create your desired layouts. This can be disabled via Sass if you wish. ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. ### Vertical alignment ### Horizontal alignment ### Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. ### Column breaks Breaking columns to a new line in flexbox requires a small hack - add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `c-row`s, but not every implementation method can account for this. You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/docs/utilities/display). ## Reordering ### Order props Use `order="1"` (`first`, `1..5`, `last`) props for controlling the visual order of your content. These props are responsive, so you can set the order by breakpoint (e.g., `order="{xs: 1, md: 2}"`). Includes support for 1 through 5 across all six grid tiers. There are also responsive props `order="first"` and `order="last"` with responsive variations `order={xs: "last", sm: "first"}` that change the order of an element by applying order: `-1` and order: `6`, respectively. These values can also be intermixed with the numbered `1..5` values as needed. ## Offsetting columns You can offset grid columns in two ways: our col props `offset="0..12"` with responsive variations `offset={md: 2, lg: 3}` col props and our [margin utilities](https://coreui.io/docs/utilities/spacing). Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. ### Offset prop Move columns to the right using `offset={ md: * }` props. These props increase the left margin of a column by `*` columns. For example, `offset={ md: 4 }` moves .col-md-4 over four columns. ### Margin utilities You can use margin utilities like `.me-auto` to force sibling columns away from one another. ## Standalone columns The `c-col` component can also be used outside a `c-row` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted. The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a `.clearfix` wrapper to clear the float if the text is shorter. ## API reference ### Grid Module ```typescript import { GridModule } from '@coreui/angular'; @NgModule({ imports: [GridModule,] }) export class AppModule() { } ``` ### c-col cCol _component_ _directive_ ```jsx import { ColComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cCol` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on extra small devices (<576px). | | `lg` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on large devices (<1200px). | | `md` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on medium devices (<992px). | | `offset` | `ColOffsetType` | - | Offset grid columns. | | `order` | `ColOrderType` | - | Controls the visual order of your columns. Includes support for `1` through `5` across all breakpoints. | | `sm` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on small devices (<768px). | | `xl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on X-Large devices (<1400px). | | `xs` | `number \| boolean \| 'auto'` | `false` | The number of columns on extra small devices (<576px). | | `xxl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on XX-Large devices (≥1400px). | --- # Angular Gutters > Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Angular grid system. ## How they work - **Gutters are the gaps between column content**, created by horizontal padding. We set `padding-right` and `padding-left` on each column, and use negative margin to offset that at the start and end of each row to align content. - **Gutters start at `1.5rem (24px)` wide**. This allows us to match our grid to the [padding and margin spacers](https://coreui.io/docs/utilities/spacing) scale. - **Gutters can be responsively adjusted**. Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters. ## Horizontal gutters `c-row [gutter]={gx: *}` directive can be used to control the horizontal gutter widths. The `c-container` or `c-container fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with `.px-4`: An alternative solution is to add a wrapper around the `c-row` with the `.overflow-hidden` class: ## Vertical gutters `c-row [gutter]={gy: *}` directive can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `c-row` at the end of a page. If this occurs, add a wrapper around `c-row` with the `.overflow-hidden` class: ## Horizontal and vertical gutters `c-row [gutter]="2"` directive can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class. ## Row columns gutters Gutter props can also be added to row columns. In the following example, we use responsive row columns and responsive gutter props. ## No gutters The gutters between columns in our predefined grid props can be removed with `[gutter]="{g: 0}"`. This removes the negative margins from `c-row` and the horizontal padding from all immediate children columns. **Need an edge-to-edge design**? Drop the parent `c-container` or `c-container fluid`. In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more). ## API reference ### Grid Module ```typescript import { GridModule } from '@coreui/angular'; @NgModule({ imports: [GridModule,] }) export class AppModule() { } ``` ### c-container _component_ ```jsx import { ContainerComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `breakpoint` | `string` | `''` | Set container 100% wide until a breakpoint. | | `fluid` | `boolean` | `false` | Set container 100% wide, spanning the entire width of the viewport. | ### c-row cRow _component_ _directive_ ```jsx import { RowComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `lg` | `NumberOfColumns` | - | The number of columns/offset/order on large devices (<1200px). | | `md` | `NumberOfColumns` | - | The number of columns/offset/order on medium devices (<992px). | | `sm` | `NumberOfColumns` | - | The number of columns/offset/order on small devices (<768px). | | `xl` | `NumberOfColumns` | - | The number of columns/offset/order on X-Large devices (<1400px). | | `xs` | `NumberOfColumns` | - | The number of columns/offset/order on extra small devices (<576px). | | `xxl` | `NumberOfColumns` | - | The number of columns/offset/order on XX-Large devices (≥1400px). | ### gutter _directive_ for c-row ```jsx import { GutterDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `gutter` | `number \| IGutterObject \| GutterBreakpoints` | `{}` | Define padding between columns to space and align content responsively in the Bootstrap grid system. | ### c-col cCol _component_ _directive_ ```jsx import { ColComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cCol` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on extra small devices (<576px). | | `lg` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on large devices (<1200px). | | `md` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on medium devices (<992px). | | `offset` | `ColOffsetType` | - | Offset grid columns. | | `order` | `ColOrderType` | - | Controls the visual order of your columns. Includes support for `1` through `5` across all breakpoints. | | `sm` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on small devices (<768px). | | `xl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on X-Large devices (<1400px). | | `xs` | `number \| boolean \| 'auto'` | `false` | The number of columns on extra small devices (<576px). | | `xxl` | `number \| boolean \| 'auto'` | `false` | The number of columns/offset/order on XX-Large devices (≥1400px). | --- # Angular Form Components > Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. ## Overview CoreUI’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. Be sure to use an appropriate `type` attribute on all inputs (ex., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more. Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for documentation on required classes, form layout, and more. ## Form text Block-level or inline-level form text can be created using `cFormText`. Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. Form text below inputs can be styled with `cFormText`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. Inline text can use any typical inline HTML element (be it a `span`, `small`, or something else) with nothing more than the `.form-text` class. ## Disabled forms Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter. Add the disabled attribute to a `fieldset` to disable all the controls within. Browsers treat all native form controls (`input`, `select`, and `button` elements) inside a `fieldset disabled` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes custom button-like elements such as `button`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies. ## API reference ### Form Module ```typescript import { FormModule } from '@coreui/angular'; @NgModule({ imports: [FormModule,] }) export class AppModule() { } ``` ### cFormText _directive_ ```jsx import { FormTextDirective } from '@coreui/angular' ``` --- # Angular Autocomplete Component > Develop robust Angular Autocomplete components that enable dynamic search, dropdown suggestions, and seamless integration with external data sources. The pinnacle Angular Autocomplete solution for contemporary web applications. _Added in 5.5.20._ ## Overview The CoreUI Angular Autocomplete Component is a powerful, feature-rich autocomplete solution that enhances form usability by providing intelligent suggestions based on user types. Whether you use static data, APIs, or complex search logic, this component delivers a smooth, accessible user experience with extensive customization options. Key features of this Angular Autocomplete include: - Dynamic dropdown suggestions with real time filtering - External data integration with API support - Advanced search capabilities - Accessibility-first design - Custom styles - Customizable templates ## Basic Example This straightforward demonstration provides a clear guide on how to implement a basic autocomplete input field, emphasizing the essential attributes and configurations required for its functionality. You can also use objects with option property for more structured data:
Each option is identified by its `value`, or by its `label` when it has no `value`, so these must be unique across all options, groups included. Two options with the same identifier cannot be told apart, and in development mode the listbox logs a duplicate option value warning. For a minimal implementation without additional features:
## Search functionality Configure the search behavior to match your application's needs. The `search` prop determines how the component handles user input and filtering. ### Default search By default, search operates only when the input field is focused and filters options internally: ### Global search Typing anywhere within the component, for example on the cleaner or indicator button, always continues in the search input, so no configuration is needed. `search="global"` and `{ global: true }` are deprecated and have no effect. ### External search When external search is enabled `search="external"`, the component delegates search operations to your custom logic or external API. This is perfect for server-side filtering, complex search algorithms, or third-party search services: ```html ``` See the External Data section for a complete working example. ## Restricted selection Limit users to only select from the provided options by enabling `allowOnlyDefinedOptions`. This prevents custom value entry: ## UX enhancements Enable intelligent hints and auto-completion features to improve user experience. ### Show hints Display intelligent completion hints that preview the first matching option as user types: ### Highlight matching text Highlight the parts of option labels that match the search with `highlightOptionsOnSearch`: ## Validation states Apply validation styling to indicate input validity. ## Disabled state Disable the component to prevent user interaction: ## Read-only state Make the field read-only with `readOnly`. Unlike `disabled`, a read-only field stays focusable, keeps its place in the tab order and submits its form value, but the dropdown does not open and the user cannot change the value by typing, selecting or clearing: ## Sizing Choose from different sizes to match your design system and form layout: ## Cleaner functionality Enable a cleaner button to quickly clear input element: ## Dropdown visibility Bind `[(visible)]` to open and close the dropdown from your own code. `visible` is the requested state: the list is shown while the field is enabled, editable and has something to show, so a request made before the options arrive opens the list once they do. Leaving the field, disabling it, or a typed search that matches nothing (without `searchNoResultsLabel`) cancels the request. `visibleChange` reports changes made by the user or by the component itself, such as typing, arrow keys, a click on the field or the indicator, a selection, Escape, a click outside or focus leaving the field, and for `visible.set()` on the exported directive. It is not emitted for changes made through the `visible` input, nor on the first render. ## Custom templates The CoreUI Angular Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the `optionTemplate`, and for groups, you can use `optionGroupTemplate`, as demonstrated in the examples below: ## External Data One of the most powerful features of the Angular Autocomplete component is its ability to work with external data sources, such as REST APIs, GraphQL endpoints, or server-side search services. This is essential when dealing with large datasets that shouldn't be loaded entirely into the client. ### Implementation example Here's how to implement external data loading with proper debouncing to optimize API calls: ### Resetting the selection When options come from a server, a selected option may be missing from the next response. Enable `resetSelectionOnOptionsChange` to clear such a selection: when a new, non-empty options list no longer contains the selected option, and the value matches no other option, the field and the search are emptied, the value becomes `''` and `optionChange` emits `null`. ```html ``` The selection is kept when the new list still contains it, when the list is empty (for example while a request is in flight), when the value is a custom one typed by the user, and when your code writes a new value together with the new options. With external search and the default `clearSearchOnSelect`, the search is emptied after a selection, so the next list is the one returned for an empty search: a selected option missing from it is cleared. ## Performance optimization _Added in 5.7.32._ For large datasets, enable `virtualScroller` to render only the options that fit in the dropdown. Only the visible rows and a buffer around them are in the DOM, and keyboard navigation (Arrow Up, Arrow Down, Home, End, Page Up, Page Down) still reaches every option. `visibleItems` sets the height of the list in rows; `itemSize` is the initial row height in pixels, replaced by the measured height of a rendered option. The virtual scroller is loaded on demand, so an application that does not use it does not ship `@angular/cdk/scrolling` in its initial bundle. ## Forms Angular handles user input through reactive, template-driven and signal forms. CoreUI Autocomplete supports all three approaches. ### Reactive The Angular Autocomplete component can be used with reactive forms. You can bind the value to a form control using the `formControlName` directive. ### Template-driven The Angular Autocomplete component can be used in template-driven forms. Bind the value with `[(ngModel)]` and read the control state through a template reference to `ngModel`. ### Signal forms The Angular Autocomplete component works with signal forms. **(preview)** ## Accessibility The Autocomplete component includes several accessibility features: - _ARIA attributes_: The input is a `combobox` that controls a `listbox` of `option` elements, with `aria-expanded`, `aria-controls`, `aria-haspopup`, `aria-autocomplete` and `aria-selected` kept in sync. Built on `@angular/aria`. - _Screen reader_ support: Descriptive labels and announcements for state changes - _Keyboard navigation_: Full keyboard support with arrow keys, Home, End, Page Up, Page Down, Enter, Escape, and Tab - _Focus management_: Focus stays in the input while navigating; the highlighted option is announced through `aria-activedescendant` - _Option groups_: Grouped options are rendered inside a `group` named by its label, so screen readers announce the group of the highlighted option. With `virtualScroller`, each option references its group labels through `aria-describedby` instead. - _Semantic markup_: Uses appropriate HTML elements and structure ### Keyboard shortcuts | Key | Action | | --- | --- | |Arrow Down | Navigate to the next option or open dropdown | |Arrow Up | Navigate to the previous option | |Page Down Page Up | Move the highlight by `visibleItems` options | |Home End | Move the highlight to the first or last option while the dropdown is open | |Enter | Select the highlighted option, or the typed text when no option is highlighted (with `allowOnlyDefinedOptions` only text matching an option label is accepted) | |Escape | Close the dropdown | |Tab | Accept hint completion (when hints are enabled), or select the highlighted option and move focus | |Backspace Delete | Clear input and trigger search | ## Customizing ### CSS variables Angular CoreUI Autocomplete use local CSS variables for easy customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss .autocomplete { --cui-autocomplete-zindex: #{$autocomplete-zindex}; --cui-autocomplete-font-family: #{$autocomplete-font-family}; --cui-autocomplete-font-size: #{$autocomplete-font-size}; --cui-autocomplete-font-weight: #{$autocomplete-font-weight}; --cui-autocomplete-line-height: #{$autocomplete-line-height}; --cui-autocomplete-color: #{$autocomplete-color}; --cui-autocomplete-bg: #{$autocomplete-bg}; --cui-autocomplete-box-shadow: #{$autocomplete-box-shadow}; --cui-autocomplete-border-width: #{$autocomplete-border-width}; --cui-autocomplete-border-color: #{$autocomplete-border-color}; --cui-autocomplete-border-radius: #{$autocomplete-border-radius}; --cui-autocomplete-disabled-color: #{$autocomplete-disabled-color}; --cui-autocomplete-disabled-bg: #{$autocomplete-disabled-bg}; --cui-autocomplete-disabled-border-color: #{$autocomplete-disabled-border-color}; --cui-autocomplete-focus-color: #{$autocomplete-focus-color}; --cui-autocomplete-focus-bg: #{$autocomplete-focus-bg}; --cui-autocomplete-focus-border-color: #{$autocomplete-focus-border-color}; --cui-autocomplete-focus-box-shadow: #{$autocomplete-focus-box-shadow}; --cui-autocomplete-placeholder-color: #{$autocomplete-placeholder-color}; --cui-autocomplete-padding-y: #{$autocomplete-padding-y}; --cui-autocomplete-padding-x: #{$autocomplete-padding-x}; --cui-autocomplete-cleaner-width: #{$autocomplete-cleaner-width}; --cui-autocomplete-cleaner-height: #{$autocomplete-cleaner-height}; --cui-autocomplete-cleaner-padding-y: #{$autocomplete-cleaner-padding-y}; --cui-autocomplete-cleaner-padding-x: #{$autocomplete-cleaner-padding-x}; --cui-autocomplete-cleaner-icon: #{escape-svg($autocomplete-cleaner-icon)}; --cui-autocomplete-cleaner-icon-color: #{$autocomplete-cleaner-icon-color}; --cui-autocomplete-cleaner-icon-hover-color: #{$autocomplete-cleaner-icon-hover-color}; --cui-autocomplete-cleaner-icon-size: #{$autocomplete-cleaner-icon-size}; --cui-autocomplete-indicator-width: #{$autocomplete-indicator-width}; --cui-autocomplete-indicator-height: #{$autocomplete-indicator-height}; --cui-autocomplete-indicator-padding-y: #{$autocomplete-indicator-padding-y}; --cui-autocomplete-indicator-padding-x: #{$autocomplete-indicator-padding-x}; --cui-autocomplete-indicator-icon: #{escape-svg($autocomplete-indicator-icon)}; --cui-autocomplete-indicator-icon-color: #{$autocomplete-indicator-icon-color}; --cui-autocomplete-indicator-icon-hover-color: #{$autocomplete-indicator-icon-hover-color}; --cui-autocomplete-indicator-icon-size: #{$autocomplete-indicator-icon-size}; --cui-autocomplete-dropdown-min-width: #{$autocomplete-dropdown-min-width}; --cui-autocomplete-dropdown-bg: #{$autocomplete-dropdown-bg}; --cui-autocomplete-dropdown-border-width: #{$autocomplete-dropdown-border-width}; --cui-autocomplete-dropdown-border-color: #{$autocomplete-dropdown-border-color}; --cui-autocomplete-dropdown-border-radius: #{$autocomplete-dropdown-border-radius}; --cui-autocomplete-dropdown-box-shadow: #{$autocomplete-dropdown-box-shadow}; --cui-autocomplete-options-padding-y: #{$autocomplete-options-padding-y}; --cui-autocomplete-options-padding-x: #{$autocomplete-options-padding-x}; --cui-autocomplete-options-font-size: #{$autocomplete-options-font-size}; --cui-autocomplete-options-font-weight: #{$autocomplete-options-font-weight}; --cui-autocomplete-options-color: #{$autocomplete-options-color}; --cui-autocomplete-optgroup-label-padding-y: #{$autocomplete-optgroup-label-padding-y}; --cui-autocomplete-optgroup-label-padding-x: #{$autocomplete-optgroup-label-padding-x}; --cui-autocomplete-optgroup-label-font-size: #{$autocomplete-optgroup-label-font-size}; --cui-autocomplete-optgroup-label-font-weight: #{$autocomplete-optgroup-label-font-weight}; --cui-autocomplete-optgroup-label-color: #{$autocomplete-optgroup-label-color}; --cui-autocomplete-optgroup-label-text-transform: #{$autocomplete-optgroup-label-text-transform}; --cui-autocomplete-option-padding-y: #{$autocomplete-option-padding-y}; --cui-autocomplete-option-padding-x: #{$autocomplete-option-padding-x}; --cui-autocomplete-option-margin-y: #{$autocomplete-option-margin-y}; --cui-autocomplete-option-margin-x: #{$autocomplete-option-margin-x}; --cui-autocomplete-option-border-width: #{$autocomplete-option-border-width}; --cui-autocomplete-option-border-color: #{$autocomplete-option-border-color}; --cui-autocomplete-option-border-radius: #{$autocomplete-option-border-radius}; --cui-autocomplete-option-box-shadow: #{$autocomplete-option-box-shadow}; --cui-autocomplete-option-hover-color: #{$autocomplete-option-hover-color}; --cui-autocomplete-option-hover-bg: #{$autocomplete-option-hover-bg}; --cui-autocomplete-option-focus-box-shadow: #{$autocomplete-option-focus-box-shadow}; --cui-autocomplete-option-disabled-color: #{$autocomplete-option-disabled-color}; --cui-autocomplete-option-indicator-width: #{$autocomplete-option-indicator-width}; --cui-autocomplete-option-indicator-bg: #{$autocomplete-option-indicator-bg}; --cui-autocomplete-option-indicator-border: #{$autocomplete-option-indicator-border}; --cui-autocomplete-option-indicator-border-radius: #{$autocomplete-option-indicator-border-radius}; --cui-autocomplete-option-selected-bg: #{$autocomplete-option-selected-bg}; --cui-autocomplete-option-selected-indicator-bg: #{$autocomplete-option-selected-indicator-bg}; --cui-autocomplete-option-selected-indicator-bg-image: #{escape-svg($autocomplete-option-selected-indicator-bg-image)}; --cui-autocomplete-option-selected-indicator-border-color: #{$autocomplete-option-selected-indicator-border-color}; } ``` ### SASS variables ```scss $autocomplete-zindex: 1000 !default; $autocomplete-font-family: $input-font-family !default; $autocomplete-font-size: $input-font-size !default; $autocomplete-font-weight: $input-font-weight !default; $autocomplete-line-height: $input-line-height !default; $autocomplete-padding-y: $input-padding-y !default; $autocomplete-padding-x: $input-padding-x !default; $autocomplete-color: $input-color !default; $autocomplete-bg: $input-bg !default; $autocomplete-box-shadow: $box-shadow-inset !default; $autocomplete-border-width: $input-border-width !default; $autocomplete-border-color: $input-border-color !default; $autocomplete-border-radius: $input-border-radius !default; $autocomplete-border-radius-sm: $input-border-radius-sm !default; $autocomplete-border-radius-lg: $input-border-radius-lg !default; $autocomplete-disabled-color: $input-disabled-color !default; $autocomplete-disabled-bg: $input-disabled-bg !default; $autocomplete-disabled-border-color: $input-disabled-border-color !default; $autocomplete-focus-color: $input-focus-color !default; $autocomplete-focus-bg: $input-focus-bg !default; $autocomplete-focus-border-color: $input-focus-border-color !default; $autocomplete-focus-box-shadow: $input-btn-focus-box-shadow !default; $autocomplete-placeholder-color: var(--cui-secondary-color) !default; $autocomplete-invalid-border-color: $form-invalid-border-color !default; $autocomplete-valid-border-color: $form-valid-border-color !default; $autocomplete-cleaner-width: 1.5rem !default; $autocomplete-cleaner-height: 1.5rem !default; $autocomplete-cleaner-padding-x: 0 !default; $autocomplete-cleaner-padding-y: 0 !default; $autocomplete-cleaner-icon: url("data:image/svg+xml,") !default; $autocomplete-cleaner-icon-color: var(--cui-tertiary-color) !default; $autocomplete-cleaner-icon-hover-color: var(--cui-body-color) !default; $autocomplete-cleaner-icon-size: .625rem !default; $autocomplete-indicator-width: 1.5rem !default; $autocomplete-indicator-height: 1.5rem !default; $autocomplete-indicator-padding-x: 0 !default; $autocomplete-indicator-padding-y: 0 !default; $autocomplete-indicator-icon: url("data:image/svg+xml,") !default; $autocomplete-indicator-icon-color: var(--cui-tertiary-color) !default; $autocomplete-indicator-icon-hover-color: var(--cui-body-color) !default; $autocomplete-indicator-icon-size: .75rem !default; $autocomplete-dropdown-min-width: 100% !default; $autocomplete-dropdown-bg: var(--cui-body-bg) !default; $autocomplete-dropdown-border-color: var(--cui-border-color) !default; $autocomplete-dropdown-border-width: var(--cui-border-width) !default; $autocomplete-dropdown-border-radius: var(--cui-border-radius) !default; $autocomplete-dropdown-box-shadow: var(--cui-box-shadow) !default; $autocomplete-options-padding-y: .5rem !default; $autocomplete-options-padding-x: .5rem !default; $autocomplete-options-font-size: $font-size-base !default; $autocomplete-options-font-weight: $font-weight-normal !default; $autocomplete-options-color: var(--cui-body-color) !default; $autocomplete-optgroup-label-padding-y: .5rem !default; $autocomplete-optgroup-label-padding-x: .625rem !default; $autocomplete-optgroup-label-font-size: 80% !default; $autocomplete-optgroup-label-font-weight: $font-weight-bold !default; $autocomplete-optgroup-label-color: var(--cui-tertiary-color) !default; $autocomplete-optgroup-label-text-transform: uppercase !default; $autocomplete-option-padding-y: .5rem !default; $autocomplete-option-padding-x: .75rem !default; $autocomplete-option-margin-y: 1px !default; $autocomplete-option-margin-x: 0 !default; $autocomplete-option-border-width: $input-border-width !default; $autocomplete-option-border-color: transparent !default; $autocomplete-option-border-radius: var(--cui-border-radius) !default; $autocomplete-option-box-shadow: $box-shadow-inset !default; $autocomplete-option-hover-color: var(--cui-body-color) !default; $autocomplete-option-hover-bg: var(--cui-tertiary-bg) !default; $autocomplete-option-focus-box-shadow: $input-btn-focus-box-shadow !default; $autocomplete-option-indicator-width: 1em !default; $autocomplete-option-indicator-bg: $form-check-input-bg !default; $autocomplete-option-indicator-border: $form-check-input-border !default; $autocomplete-option-indicator-border-radius: .25em !default; $autocomplete-option-selected-bg: var(--cui-secondary-bg) !default; $autocomplete-option-selected-indicator-bg: $form-check-input-checked-bg-color !default; $autocomplete-option-selected-indicator-bg-image: $form-check-input-checked-bg-image !default; $autocomplete-option-selected-indicator-border-color: $autocomplete-option-selected-indicator-bg !default; $autocomplete-option-disabled-color: var(--cui-secondary-color) !default; $autocomplete-font-size-lg: $input-font-size-lg !default; $autocomplete-padding-y-lg: $input-padding-y-lg !default; $autocomplete-padding-x-lg: $input-padding-x-lg !default; $autocomplete-font-size-sm: $input-font-size-sm !default; $autocomplete-padding-y-sm: $input-padding-y-sm !default; $autocomplete-padding-x-sm: $input-padding-x-sm !default; ``` ## API reference ### Autocomplete Module ```ts import { NgModule } from '@angular/core'; import { AutocompleteModule } from '@coreui/angular'; @NgModule({ imports: [AutocompleteModule] }) export class CustomAppModule {} ``` ### Autocomplete Standalone ```ts import { Component } from '@angular/core'; import { AutocompleteDirective } from '@coreui/angular'; @Component({ template: ` `, imports: [AutocompleteDirective], standalone: true }) export class CustomAppComponent {} ``` ### cAutocomplete _directive_ ```jsx import { AutocompleteDirective } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowOnlyDefinedOptions` | `boolean` | `false` | Only allow selection of predefined options. When `true`, users cannot enter custom values that are not in the options list. When `false`, users can enter and select custom values. | | `ariaCleanerLabel` | `string` | `'Clear selection'` | Sets the accessible label (`aria-label`) for the button that clears the current selection. This improves accessibility for screen readers. | | `ariaIndicatorLabel` | `string` | `'Toggle visibility of options menu'` | Sets the accessible label (`aria-label`) for the dropdown toggle indicator button. This improves accessibility for screen readers. | | `cleaner` | `boolean` | `false` | Enables selection cleaner element. When `true`, displays a clear button that allows users to reset the selection. The cleaner button is only shown when there is a selection and the component is not disabled or read-only. | | `clearSearchOnSelect` | `boolean` | `true` | Clears the search after an option is selected: the list is filtered by an empty search again and `inputChange` emits `''`, so with external search the options can be reloaded for it. When `false`, the search that led to the selection is kept. The field shows the selected label either way. | | `delay` | `number` | `150` | Debounce delay in milliseconds for filtering options based on search input. Controls how quickly the options list updates as the user types. Higher values reduce update frequency for better performance with large datasets. | | `disabled` | `boolean` | `false` | Toggle the disabled state for the component. When `true`, the Angular autocomplete is non-interactive and appears visually disabled. Users cannot type, select options, or trigger the dropdown. | | `highlightOptionsOnSearch` | `boolean` | `false` | Highlight options that match the search criteria. When `true`, matching portions of option labels are visually highlighted based on the current search input value. | | `id` | `string` | `'autocomplete-'` | Unique identifier for the Autocomplete component. If not provided, a default ID will be generated. | | `indicator` | `boolean` | `false` | Show dropdown indicator/arrow button. When `true`, displays a dropdown arrow button that can be clicked to manually show or hide options dropdown. | | `itemSize` | `number` | `40` | Initial height of an option row in pixels for the virtual scroller, replaced by the measured row height once options render. | | `loading` | `boolean` | `false` | When set, the options list will have a loading style: loading spinner and reduced opacity. Use this to indicate that options are being fetched asynchronously. While loading, the list opens only when the user has typed a search, and the no results label is not shown. | | `optionGroupTemplate` | `TemplateRef` | - | Custom template for rendering option groups. Allows customization of how option group headers appear in the dropdown. | | `options` | `AutocompleteOption[]` | - | List of option elements. Can contain Option objects, OptionsGroup objects, or plain strings. Plain strings are converted to simple Option objects internally. Each option is identified by its `value`, or by its label when it has none, so these identifiers must be unique across all options. This is a required prop - the Angular autocomplete needs options to function. | | `optionsMaxHeight` | `string \| number` | `'auto'` | Sets maxHeight of options list. Controls the maximum height of the dropdown options container. Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem'). When content exceeds this height, a scrollbar will appear. | | `optionTemplate` | `TemplateRef` | - | Custom template for rendering individual options. Allows complete customization of how each option appears in the dropdown. | | `placeholder` | `string` | - | Specifies a short hint that is visible in the search input. Displayed when the input is empty to guide user interaction. Standard HTML input placeholder behavior. | | `popperOptions` | `Partial` | `defaultPopperOptions` | Optional popper Options object | | `readOnly` | `boolean` | `false` | Toggle the readonly state for the component. When `true`, the field keeps focus, tab order and its form value, but the dropdown does not open and the user cannot change the value by typing, selecting or clearing. | | `resetSelectionOnOptionsChange` | `boolean` | `false` | Determines whether the selected options should be cleared when the options list is updated. When `true`, a selected option that is missing from a new, non-empty options list, and whose value no longer matches any option, is cleared: the field and the search are emptied, the value becomes `''` and `optionChange` emits `null`. This ensures that outdated selections are not retained when new options are provided. Options still in the list, custom values and a value written from outside together with the new options are kept. | | `search` | `Search` | - | Enables and configures search functionality. - `'external'`: Search is handled externally, filtering is not applied internally - Object with an `external` boolean property `'global'` and `{ global: true }` are deprecated and have no effect: typing anywhere in the component always continues in the search input. | | `searchNoResultsLabel` | `string \| boolean \| TemplateRef` | `false` | Sets the label for no results when filtering. - `false`: Don't show any message when no results found - `true`: Show default "No results found" message - `string`: Show custom text message - `TemplateRef`: Show custom component/element | | `showHints` | `boolean` | `false` | Show hint options based on the current input value. When `true`, displays a preview/hint of the first matching option as semi-transparent text in the input field, similar to browser autocomplete. | | `sizing` | `'' \| 'sm' \| 'lg'` | - | Size the component small or large. - `'sm'`: Small size variant - `'lg'`: Large size variant - `undefined`: Default/medium size | | `valid` | `boolean` | `undefined` | Validation state of the field: `true` valid, `false` invalid, `undefined` none. Not derived from a bound form control; bind it, e.g. `[valid]="control.touched ? !control.invalid : undefined"`. | | `value` | `string \| number \| null` | `undefined` | Sets the selected value for the Angular autocomplete component, two-way bindable with `[(value)]`. Matched against option values first, then against option labels. Selecting an option writes its `value`, or its label when it has none; typed text that matches no option is written as is, unless `allowOnlyDefinedOptions` is set. | | `virtualScroller` | `boolean` | `false` | Enable virtual scroller for the options list. When `true`, only visible options are rendered in the DOM for better performance with large option lists. Works in conjunction with `visibleItems` and `itemSize`. | | `visible` | `boolean` | `false` | Whether the dropdown should be open, two-way bindable with `[(visible)]`. The list is shown while the control is enabled, editable and there is something to show. A request through this input or the exported signal waits until then. A request from the user (keys, a click, the indicator) is accepted only when the list can show, or with external search before the options arrive, so `visibleChange` can trigger loading them. Leaving the field, disabling it, or a typed search that matches nothing (without `searchNoResultsLabel`) cancels the request. | | `visibleItems` | `number` | `8` | Number of options visible without scrolling. With `virtualScroller` it sets the viewport height, and only these rows plus a buffer around them are rendered. Page Up and Page Down move the highlight by this many options. | ### Events | Name | Description | | --- | --- | | `inputChange` | Emits the search text after the user edits the field (when the `delay` elapses, or earlier on a key that acts on the list or a click on an option), and an empty search when a selection or a clear resets it. An edit that ends on a different text than the field showed emits even when the search text itself is unchanged. An edit not yet emitted when focus leaves the field is dropped. Useful for implementing external search functionality or analytics. | | `optionChange` | Emits an event when a user changes the selected option. Called with the selected option object or `null` when cleared. This is the primary callback for handling selection changes. | | `touch` | Emits when the user finishes interacting with the control (blur), marking a bound form field as touched. | | `valueChange` | Emits the value written by a selection, a clear, committed text or `value.set()`; not emitted for values written by the form. | | `visibleChange` | Emits when the requested visibility changes other than through the `visible` input: typing, arrow keys, a click on the field, the indicator, a selection, Escape, a click outside, focus leaving the field, disabling the field, a typed search that matches nothing, or the exported `visible` signal. Not emitted on first render. | --- # Angular Date Picker Component > Create consistent cross-browser and cross-device Angular date picker. ## Examples ### With footer ### Sizing Set heights using `size` property like `size="lg"` and `size="sm"`. ### Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. ### Readonly Add the `inputReadOnly` boolean attribute to prevent modification of the input value. ### Format Control the format of the date displayed in the input using the `format` property according to `locale` rules. Makes the date input read-only. ### Disabled dates Add dates user cannot select using the `disabledDates` property. ## Non-english locale ### Auto ### Chinese ### Japanese ### Korean ## Right to left support RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss. ### Hebrew ### Persian ## Forms Angular handles user input through reactive and template-driven forms. CoreUI Date Picker supports both options. ### Reactive ### Template-driven ## API reference ### DatePicker Module ```typescript import { DatePickerModule, DropdownModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ DatePickerModule, DropdownModule, SharedModule ] }) export class AppModule() { } ``` ### c-date-picker _component_ ```jsx import { DatePickerComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `calendarDate` | `Date` | `new Date()` | Default date month of the component. | | `calendars` | `number` | `2` | The number of calendars that render on desktop devices. | | `cleaner` | `boolean` | `true` | Toggle visibility or set the content of the cleaner button. | | `closeOnSelect` | `boolean` | `false` | Determine if the dropdown should be closed after value setting. | | `date` | `Date \| null` | `null` | Initial selected start date. | | `dateFilter` | `DateFilterType` | - | Custom function to determine selectable dates. | | `dayFormat` | `DayFormatType` | `'numeric'` | Set the format of day number. | | `disabled` | `boolean` | `false` | Toggle the disabled state for the component. | | `disabledDates` | `Date \| Date[][]` | `[]` | Specify the list of dates that cannot be selected. | | `endDate` | `Date \| null` | `null` | Initial selected end date. | | `firstDayOfWeek` | `DaysOfWeek` | `1 (Monday)` | Set the first day of the week. | | `format` | `string` | - | Set date format. We use Angular formatDate() function, see: - https://angular.io/api/common/formatDate - https://angular.io/api/common/DatePipe#pre-defined-format-options | | `indicator` | `boolean` | `true` | Toggle visibility or set the content of the input indicator. | | `inputDateFormat` | `object` | - | Custom function to format the selected date into a string according to a custom format. | | `inputDateParse` | `object` | - | Custom function to parse the input value into a valid Date object. | | `inputReadOnly` | `boolean` | `false` | Toggle the readonly state for the component. | | `locale` | `string` | `'default'` | Sets the default locale for components. If not set, it is inherited from the browser. | | `maxDate` | `Date \| null` | `null` | Max selectable date. | | `minDate` | `Date \| null` | `null` | Min selectable date. | | `navigation` | `boolean` | `true` | Show calendar navigation. | | `navYearFirst` | `boolean` | `false` | Reorder year-month navigation, and render year first. | | `placeholder` | `string \| string[]` | `['Start date', 'End date']` | Specifies short hints that are visible in start date and end date inputs. | | `popperOptions` | `Partial` | `{ strategy: 'absolute' }` | Optional popper Options object | | `range` | `boolean` | `true` | Allow range selection. | | `ranges` | `ICalendarRanges` | - | Predefined date ranges the user can select from. | | `rangesButtonsColor` | `string` | `'secondary'` | Sets the color context of the cancel button to one of CoreUI’s themed colors. | | `rangesButtonsSize` | `'' \| 'sm' \| 'lg'` | `''` | Size the ranges button small or large. | | `rangesButtonsVariant` | `'outline' \| 'ghost'` | `'ghost'` | Set the ranges button variant to an outlined button or a ghost button. | | `selectAdjacentDays` | `boolean` | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true. | | `selectionType` | `SelectionType` | `'day'` | Specify the type of date selection as day, week, month, or year. | | `separator` | `boolean` | `true` | Default icon or character that separates two dates. | | `showAdjacentDays` | `boolean` | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | | `showWeekNumber` | `boolean` | `false` | Set whether to display week numbers in the calendar. | | `size` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `timepicker` | `boolean` | `false` | Provide an additional time selection by adding select boxes to choose time. | | `valid` | `boolean` | `undefined` | Toggle visual validation feedback. | | `value` | `Date \| object \| null` | `null` | | | `visible` | `boolean` | `false` | Toggle the visibility of the dropdown date-picker component. | | `weekdayFormat` | `WeekdayFormatType` | `'short'` | Set the length or format of the day name. | | `weekNumbersLabel` | `string` | `undefined` | Label displayed over week numbers in the calendar. | | `withTime` | `boolean` | `false` | Keep track of the time with the date value. | ### Events | Name | Description | | --- | --- | | `calendarCellHover` | Event emitted on calendar cell hover. | | `calendarDateChange` | Event emitted on calendar month change. | | `dateChange` | Emitted when `date` changes. | | `endDateChange` | Emitted when `endDate` changes. | | `valueChange` | Event emitted on `value` change. | --- # Angular Date Range Picker Component > Create consistent cross-browser and cross-device Angular date range picker. ## Examples ### With footer ### Sizing Set heights using `size` property like `size="lg"` and `size="sm"`. ### Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. ### Readonly Add the `inputReadOnly` boolean attribute to prevent modification of the input value. ### Disabled dates ### Custom ranges ## Non-english locale ### Auto ### Chinese ### Japanese ### Korean ## Right to left support RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss. ### Hebrew ### Persian ## Forms Angular handles user input through reactive and template-driven forms. CoreUI Date Range Picker supports both possibilities. ### Reactive ### Template-driven ## API reference ### DateRangePicker Module ```typescript import { DateRangePickerModule, DropdownModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ DateRangePickerModule, DropdownModule, SharedModule ] }) export class AppModule() { } ``` ### c-date-range-picker _component_ ```jsx import { DateRangePickerComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `calendarDate` | `Date` | `new Date()` | Default date month of the component. | | `calendars` | `number` | `2` | The number of calendars that render on desktop devices. | | `cleaner` | `boolean` | `true` | Toggle visibility or set the content of the cleaner button. | | `closeOnSelect` | `boolean` | `false` | Determine if the dropdown should be closed after value setting. | | `dateFilter` | `DateFilterType` | - | Custom function to determine selectable dates. | | `dayFormat` | `DayFormatType` | `'numeric'` | Set the format of day number. | | `disabled` | `boolean` | `false` | Toggle the disabled state for the component. | | `disabledDates` | `Date \| Date[][]` | `[]` | Specify the list of dates that cannot be selected. | | `endDate` | `Date \| null` | `null` | Initial selected end date. | | `firstDayOfWeek` | `DaysOfWeek` | `1 (Monday)` | Set the first day of the week. | | `format` | `string` | - | Set date format. We use Angular formatDate() function, see: - https://angular.io/api/common/formatDate - https://angular.io/api/common/DatePipe#pre-defined-format-options | | `indicator` | `boolean` | `true` | Toggle visibility or set the content of the input indicator. | | `inputDateFormat` | `object` | - | Custom function to format the selected date into a string according to a custom format. | | `inputDateParse` | `object` | - | Custom function to parse the input value into a valid Date object. | | `inputReadOnly` | `boolean` | `false` | Toggle the readonly state for the component. | | `locale` | `string` | `'default'` | Sets the default locale for components. If not set, it is inherited from the browser. | | `maxDate` | `Date \| null` | `null` | Max selectable date. | | `minDate` | `Date \| null` | `null` | Min selectable date. | | `navigation` | `boolean` | `true` | Show calendar navigation. | | `navYearFirst` | `boolean` | `false` | Reorder year-month navigation, and render year first. | | `placeholder` | `string \| string[]` | `['Start date', 'End date']` | Specifies short hints that are visible in start date and end date inputs. | | `popperOptions` | `Partial` | `{ strategy: 'absolute' }` | Optional popper Options object | | `range` | `boolean` | `true` | Allow range selection. | | `ranges` | `ICalendarRanges` | - | Predefined date ranges the user can select from. | | `rangesButtonsColor` | `string` | `'secondary'` | Sets the color context of the cancel button to one of CoreUI’s themed colors. | | `rangesButtonsSize` | `'' \| 'sm' \| 'lg'` | `''` | Size the ranges button small or large. | | `rangesButtonsVariant` | `'outline' \| 'ghost'` | `'ghost'` | Set the ranges button variant to an outlined button or a ghost button. | | `selectAdjacentDays` | `boolean` | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true. | | `selectionType` | `SelectionType` | `'day'` | Specify the type of date selection as day, week, month, or year. | | `separator` | `boolean` | `true` | Default icon or character that separates two dates. | | `showAdjacentDays` | `boolean` | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | | `showWeekNumber` | `boolean` | `false` | Set whether to display week numbers in the calendar. | | `size` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `startDate` | `Date \| null` | `null` | Initial selected start date. | | `timepicker` | `boolean` | `false` | Provide an additional time selection by adding select boxes to choose time. | | `valid` | `boolean` | `undefined` | Toggle visual validation feedback. | | `value` | `Date \| object \| null` | `null` | | | `visible` | `boolean` | `false` | Toggle the visibility of the dropdown date-picker component. | | `weekdayFormat` | `WeekdayFormatType` | `'short'` | Set the length or format of the day name. | | `weekNumbersLabel` | `string` | `undefined` | Label displayed over week numbers in the calendar. | | `withTime` | `boolean` | `false` | Keep track of the time with the date value. | ### Events | Name | Description | | --- | --- | | `calendarCellHover` | Event emitted on calendar cell hover. | | `calendarDateChange` | Event emitted on calendar month change. | | `endDateChange` | Emitted when `endDate` changes. | | `startDateChange` | Emitted when `startDate` changes. | | `valueChange` | Event emitted on `value` change. | --- # Angular Form Control Components > Angular input and textarea components. Give textual form controls like input and textarea an upgrade with custom styles, sizing, focus states, and more. ## Example ### Sizing Set heights using `size` property like `sizing="lg"` and `sizing="sm"`. ### Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. ### Readonly Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. ### Readonly plain text If you want to have `input readonly` elements in your form styled as plain text, use the `plaintext` boolean property to remove the default form field styling and preserve the correct margin and padding. ### File input ### Color ## API reference ### Form Module ### cFormControl _directive_ Works with `input` and `textarea` html tags. ```jsx import { FormControlDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `plaintext` | `boolean` | `false` | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use alongside `readonly` | | `sizing` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `type` | `Omit` | `'text'` | Specifies the type of input element. | | `valid` | `boolean` | `undefined` | Set component validation state to valid. | ### cLabel _directive_ ```jsx import { FormLabelDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cLabel` | `'' \| 'col'` | `''` | For horizontal forms set labels to 'col' and make them vertically centered with their associated form controls. | | `sizing` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the label small or large. | --- # Angular Select Component > Angular Select directive. Customize the native select with custom CSS that changes initial element appearance. ## Examples ### Sizing You may also choose from small and large custom selects to match our similarly sized text inputs. ### Select Multiple The `multiple` attribute is also supported: ### Html Size As is the html `size` property: ### Disabled Add the `disabled` boolean attribute on a `select` to give it a grayed out appearance and remove pointer events. ## API reference ### Form Module ### cSelect _directive_ ```jsx import { FormSelectDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `sizing` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `valid` | `boolean` | `undefined` | Set component validation state to valid. | --- # Angular Multi Select Component > Customize the native select with a powerful CoreUI Multi-Select component that changes initial element appearance and brings some new functionalities. ## Examples ## Modes ### Allow create options The `allowCreateOptions` property allows users to create new options in addition to selecting pre-existing ones from a list. When this property is set to true, the user can type in a new option in the search input field of the multiselect component. If the option does not exist in the list, it will be created and added to the list of available options. This can be useful when the list of available options is not comprehensive or when the user needs to add and select an option that is not already available. > It's worth noting that this feature may not always be relevant, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature. ### Clear search on select The `clearSearchOnSelect` property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI Angular library. When `clearSearchOnSelect` is set to `true`, the search input field in the MultiSelect component will be cleared as soon as the user selects an option from the dropdown list. This means that the search query will be reset and the user will be able to start a new search immediately. By default, `clearSearchOnSelect` is set to `false`, which means that the search input field will retain the user's search query even after an option has been selected. This can be useful in situations where the user needs to select multiple options from the dropdown list that match the same search query. To use the `clearSearchOnSelect` property with the MultiSelect component in the CoreUI Angular library, you simply need to set it to `true` or `false` as appropriate in your code. In the following example, the `clearSearchOnSelect` property is set to `true`. The search input field will be cleared as soon as the user selects an option from the dropdown list. ## Selection types ### Counter ### Tags ### Text ## Select all _Added in 5.7.29._ With `multiple` enabled, a **select all** button is rendered in the dropdown header (turn it off with the `selectAll` property). The button works as a toggle: it selects every option and its label switches to `deselectAllLabel`, then deselects everything on the next click. With the default `selectAllStyle="checkbox"` the button shows a tri-state indicator that mirrors the overall selection — `none` when nothing is selected, `all` when everything is, and `indeterminate` in between. Set `selectAllStyle="text"` for a plain text toggle instead. ### Acting on filtered options By default (`selectAllMode="all"`) the button acts on the full list, ignoring the current search. Set `selectAllMode="filtered"` to scope it to the options matched by the search filter. The label and the checkbox then answer "are all *filtered* options selected?". With no active search every option matches, so this behaves exactly like `"all"`. To avoid a misleading "Select all" while a search is active, the label switches to `selectFilteredLabel` / `deselectFilteredLabel` (default `Select filtered` / `Deselect filtered`) whenever the search actually narrows the list — and falls back to `selectAllLabel` / `deselectAllLabel` when nothing is hidden. Type into the search box below, then use select all — only the matching options are selected. Because the scope follows the search, a side effect is worth knowing: select all while a search is active (so the checkbox reads `all`), then clear the search — the checkbox drops to `indeterminate`, since the options that were hidden are back in the list and not selected. ### Hiding select all when search has no results _Added in 5.7.32._ When `search` is enabled and the user types a query that matches no options, there is nothing left to select — so leaving the select all button visible above the empty "No results found" message is misleading. By default the component hides the whole dropdown header in that case, and brings it back as soon as the search matches at least one option again. Type a query that matches nothing (for example `xyz`) into the example below — the select all button disappears together with the options, then returns when you clear or change the search. Set `[hideSelectAllOnSearchNoResults]="false"` to keep the header (and the select all button) visible even when the search returns no results. This option only affects the built-in select all button. A [custom dropdown header](#custom-dropdown-header) is always rendered, since it may contain controls unrelated to the options list. ## Selection limit _Added in 5.7.29._ Use the `selectionLimit` property to limit how many options can be selected. Selecting further options is blocked once the limit is reached, while deselecting always works. The select all button stays enabled and selects options up to the limit, then reads as fully selected and toggles to deselect all. The `selectionLimitReached` output fires whenever a user tries to select more options than allowed — use it to show feedback. ## Selectable groups _Added in 5.7.32._ Enable `optionsGroupsSelectable` to turn each options group label into its own tri-state checkbox that toggles the whole group. Because the indicator is rendered with CSS, it supports a third, `indeterminate` state — shown when only some of a group's options are selected — without any real `` element. Each section's indicator follows its own `*Style` property (`optionsStyle`, `optionsGroupsStyle`, `selectAllStyle`, all defaulting to `'checkbox'`). Selectable groups and the select all button require `multiple`, and a group label is a toggle only with `optionsGroupsStyle="checkbox"` — with `'text'` it stays a plain label. Disabled options are skipped, and a disabled group label is inert. The toggle covers the enabled options of the group that match the current search, the indicator counts the same options, and the toggle respects `selectionLimit`. Groups are selectable only when they are written as `c-multi-select-optgroup` content — the `options` input renders a flat list. A selectable group label is a tab stop with `role="checkbox"` and `aria-checked` set to `false`, `mixed` or `true`. Space and Enter toggle the group, ↓ and Home move to its first option, ↑ and End to its last. Put your own markup inside `c-multi-select-optgroup-label` instead of using the `label` input to render a custom group label — it keeps the checkbox styling and the toggle behaviour. ## Custom dropdown header _Added in 5.7.32._ Pass an `ng-template` with `cTemplateId="multiSelectHeaderTemplate"` to fully customize the dropdown header — the area above the options list — including rendering several action buttons. It replaces the built-in select all button and renders independently of `selectAll`. The template context carries a `state` object (`selected`, `total`, `filtered`, `filteredSelected`) and an `actions` object (`selectAll`, `deselectAll`, `selectFiltered`, `deselectFiltered`) with the component's selection methods, so you can wire your own controls. It re-renders on every selection change and search filter, so labels and `disabled` states stay up to date. ## Single selection Set the `multiple` boolean property to `false` and allow select only one element. ## Coordinated selection The selection of Angular select components can be coordinated by dynamically updating city options based on the selected country. To ensure synchronized selections, use the `resetSelectionOnOptionsChange` prop on the city select component to reset the selected city whenever the country changes. ## Disabled Add the `disabled` boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing. ## Sizing You may also choose from small and large multi selects to match our similarly sized text inputs. ## External search Use `(searchValueChange)` to handle external search. ## Custom search Pass `SearchFn` callback to the `search` prop for search customization. ## Virtual scroller Display large selection lists in a performant way by only rendering the options in view. **Virtual scroller with ng-template and external search.** You can pass an ng-template with `cTemplateId="multiSelectOptionTemplate"` as a c-multi-select content. To use `multiSelectOptionTemplate` template you have to: - `import {SharedModule} from '@coreui/angular'`; - pass it as a string to `[cTemplateId]` directive ## Forms CoreUI MultiSelect component works with native html form method as is. Angular handles user input through reactive and template-driven forms. CoreUI MultiSelect supports both approaches. If no `value` prop is included for `c-multi-select-option`, the value defaults to the text contained inside the element. ### Reactive ### Template-driven ## Customizing ### CSS variables Angular multi selects use local CSS variables on `.form-multi-select` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --#{$prefix}form-multi-select-zindex: #{$form-multi-select-zindex}; --#{$prefix}form-multi-select-font-family: #{$form-multi-select-font-family}; --#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size}; --#{$prefix}form-multi-select-font-weight: #{$form-multi-select-font-weight}; --#{$prefix}form-multi-select-line-height: #{$form-multi-select-line-height}; --#{$prefix}form-multi-select-color: #{$form-multi-select-color}; --#{$prefix}form-multi-select-bg: #{$form-multi-select-bg}; --#{$prefix}form-multi-select-box-shadow: #{$form-multi-select-box-shadow}; --#{$prefix}form-multi-select-border-width: #{$form-multi-select-border-width}; --#{$prefix}form-multi-select-border-color: #{$form-multi-select-border-color}; --#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius}; --#{$prefix}form-multi-select-disabled-color: #{$form-multi-select-disabled-color}; --#{$prefix}form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg}; --#{$prefix}form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color}; --#{$prefix}form-multi-select-focus-color: #{$form-multi-select-focus-color}; --#{$prefix}form-multi-select-focus-bg: #{$form-multi-select-focus-bg}; --#{$prefix}form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color}; --#{$prefix}form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow}; --#{$prefix}form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color}; --#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y}; --#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x}; --#{$prefix}form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width}; --#{$prefix}form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height}; --#{$prefix}form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y}; --#{$prefix}form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x}; --#{$prefix}form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)}; --#{$prefix}form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color}; --#{$prefix}form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color}; --#{$prefix}form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size}; --#{$prefix}form-multi-select-indicator-width: #{$form-multi-select-indicator-width}; --#{$prefix}form-multi-select-indicator-height: #{$form-multi-select-indicator-height}; --#{$prefix}form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y}; --#{$prefix}form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x}; --#{$prefix}form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)}; --#{$prefix}form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color}; --#{$prefix}form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color}; --#{$prefix}form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size}; --#{$prefix}form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y}; --#{$prefix}form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x}; --#{$prefix}form-multi-select-select-all-color: #{$form-multi-select-select-all-color}; --#{$prefix}form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg}; --#{$prefix}form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width}; --#{$prefix}form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color}; --#{$prefix}form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color}; --#{$prefix}form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg}; --#{$prefix}form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width}; --#{$prefix}form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg}; --#{$prefix}form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width}; --#{$prefix}form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color}; --#{$prefix}form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius}; --#{$prefix}form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow}; --#{$prefix}form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y}; --#{$prefix}form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x}; --#{$prefix}form-multi-select-options-font-size: #{$form-multi-select-options-font-size}; --#{$prefix}form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight}; --#{$prefix}form-multi-select-options-color: #{$form-multi-select-options-color}; --#{$prefix}form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y}; --#{$prefix}form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x}; --#{$prefix}form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size}; --#{$prefix}form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight}; --#{$prefix}form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color}; --#{$prefix}form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform}; --#{$prefix}form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y}; --#{$prefix}form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x}; --#{$prefix}form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y}; --#{$prefix}form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x}; --#{$prefix}form-multi-select-option-border-width: #{$form-multi-select-option-border-width}; --#{$prefix}form-multi-select-option-border-color: #{$form-multi-select-option-border-color}; --#{$prefix}form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius}; --#{$prefix}form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow}; --#{$prefix}form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color}; --#{$prefix}form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg}; --#{$prefix}form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow}; --#{$prefix}form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color}; --#{$prefix}form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width}; --#{$prefix}form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg}; --#{$prefix}form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border}; --#{$prefix}form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius}; --#{$prefix}form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg}; --#{$prefix}form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg}; --#{$prefix}form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)}; --#{$prefix}form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color}; --#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y}; --#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x}; --#{$prefix}form-multi-select-tag-bg: #{$form-multi-select-tag-bg}; --#{$prefix}form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width}; --#{$prefix}form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color}; --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius}; --#{$prefix}form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width}; --#{$prefix}form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height}; --#{$prefix}form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)}; --#{$prefix}form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color}; --#{$prefix}form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color}; --#{$prefix}form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size}; --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap}; --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y}; --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x}; ``` #### How to use CSS variables ```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html <div [ngStyle]="vars"></div> ``` ### SASS variables ```scss $form-multi-select-zindex: 1000; $form-multi-select-font-family: $input-font-family; $form-multi-select-font-size: $input-font-size; $form-multi-select-font-weight: $input-font-weight; $form-multi-select-line-height: $input-line-height; $form-multi-select-color: $input-color; $form-multi-select-bg: $input-bg; $form-multi-select-box-shadow: $box-shadow-inset; $form-multi-select-border-width: $input-border-width; $form-multi-select-border-color: $input-border-color; $form-multi-select-border-radius: $input-border-radius; $form-multi-select-border-radius-sm: $input-border-radius-sm; $form-multi-select-border-radius-lg: $input-border-radius-lg; $form-multi-select-disabled-color: $input-disabled-color; $form-multi-select-disabled-bg: $input-disabled-bg; $form-multi-select-disabled-border-color: $input-disabled-border-color; $form-multi-select-focus-color: $input-focus-color; $form-multi-select-focus-bg: $input-focus-bg; $form-multi-select-focus-border-color: $input-focus-border-color; $form-multi-select-focus-box-shadow: $input-btn-focus-box-shadow; $form-multi-select-invalid-border-color: var(--#{$prefix}form-invalid-border-color); $form-multi-select-valid-border-color: var(--#{$prefix}form-valid-border-color); $form-multi-select-placeholder-color: var(--#{$prefix}secondary-color); $form-multi-select-selection-padding-y: $input-padding-y; $form-multi-select-selection-padding-x: $input-padding-x; $form-multi-select-selection-tags-gap: .25rem; $form-multi-select-selection-tags-padding-y: .25rem; $form-multi-select-selection-tags-padding-x: .25rem; $form-multi-select-tag-bg: var(--#{$prefix}secondary-bg); $form-multi-select-tag-border-width: var(--#{$prefix}border-width); $form-multi-select-tag-border-color: var(--#{$prefix}border-color); $form-multi-select-tag-border-radius: .25rem; $form-multi-select-tag-border-radius-sm: .125rem; $form-multi-select-tag-border-radius-lg: .375rem; $form-multi-select-tag-padding-y: .0625rem; $form-multi-select-tag-padding-x: .5rem; $form-multi-select-tag-delete-width: .75rem; $form-multi-select-tag-delete-height: .75rem; $form-multi-select-tag-delete-icon: url("data:image/svg+xml,"); $form-multi-select-tag-delete-icon-color: var(--#{$prefix}secondary-color); $form-multi-select-tag-delete-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-tag-delete-icon-size: .5rem; $form-multi-select-cleaner-width: 1.5rem; $form-multi-select-cleaner-height: 1.5rem; $form-multi-select-cleaner-padding-x: 0; $form-multi-select-cleaner-padding-y: 0; $form-multi-select-cleaner-icon: url("data:image/svg+xml,"); $form-multi-select-cleaner-icon-color: var(--#{$prefix}tertiary-color); $form-multi-select-cleaner-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-cleaner-icon-size: .625rem; $form-multi-select-indicator-width: 1.5rem; $form-multi-select-indicator-height: 1.5rem; $form-multi-select-indicator-padding-x: 0; $form-multi-select-indicator-padding-y: 0; $form-multi-select-indicator-icon: url("data:image/svg+xml,"); $form-multi-select-indicator-icon-color: var(--#{$prefix}tertiary-color); $form-multi-select-indicator-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-indicator-icon-size: .75rem; $form-multi-select-dropdown-min-width: 100%; $form-multi-select-dropdown-bg: var(--#{$prefix}body-bg); $form-multi-select-dropdown-border-color: var(--#{$prefix}border-color); $form-multi-select-dropdown-border-width: var(--#{$prefix}border-width); $form-multi-select-dropdown-border-radius: var(--#{$prefix}border-radius); $form-multi-select-dropdown-box-shadow: var(--#{$prefix}box-shadow); $form-multi-select-select-all-padding-y: .5rem; $form-multi-select-select-all-padding-x: .75rem; $form-multi-select-select-all-color: var(--#{$prefix}body-secondary-color); $form-multi-select-select-all-bg: transparent; $form-multi-select-select-all-hover-color: var(--#{$prefix}body-color); $form-multi-select-select-all-hover-bg: transparent; $form-multi-select-select-all-border-width: $input-border-width; $form-multi-select-select-all-border-color: $input-border-color; $form-multi-select-options-padding-y: .5rem; $form-multi-select-options-padding-x: .75rem; $form-multi-select-options-font-size: $font-size-base; $form-multi-select-options-font-weight: $font-weight-normal; $form-multi-select-options-color: var(--#{$prefix}body-color); $form-multi-select-optgroup-label-padding-y: .5rem; $form-multi-select-optgroup-label-padding-x: .625rem; $form-multi-select-optgroup-label-font-size: 80%; $form-multi-select-optgroup-label-font-weight: $font-weight-bold; $form-multi-select-optgroup-label-color: var(--#{$prefix}tertiary-color); $form-multi-select-optgroup-label-text-transform: uppercase; $form-multi-select-option-padding-y: .5rem; $form-multi-select-option-padding-x: 1.25rem; $form-multi-select-option-margin-y: 1px; $form-multi-select-option-margin-x: 0; $form-multi-select-option-border-width: $input-border-width; $form-multi-select-option-border-color: transparent; $form-multi-select-option-border-radius: var(--#{$prefix}border-radius); $form-multi-select-option-box-shadow: $box-shadow-inset; $form-multi-select-option-hover-color: var(--#{$prefix}body-color); $form-multi-select-option-hover-bg: var(--#{$prefix}tertiary-bg); $form-multi-select-option-focus-box-shadow: $input-btn-focus-box-shadow; $form-multi-select-option-indicator-width: 1em; $form-multi-select-option-indicator-bg: $form-check-input-bg; $form-multi-select-option-indicator-border: $form-check-input-border; $form-multi-select-option-indicator-border-radius: .25em; $form-multi-select-option-selected-bg: var(--#{$prefix}secondary-bg); $form-multi-select-option-selected-indicator-bg: $form-check-input-checked-bg-color; $form-multi-select-option-selected-indicator-bg-image: $form-check-input-checked-bg-image; $form-multi-select-option-selected-indicator-border-color: $form-multi-select-option-selected-indicator-bg; $form-multi-select-option-disabled-color: var(--#{$prefix}secondary-color); $form-multi-select-font-size-lg: $input-font-size-lg; $form-multi-select-selection-padding-y-lg: $input-padding-y-lg; $form-multi-select-selection-padding-x-lg: $input-padding-x-lg; $form-multi-select-selection-tags-gap-lg: .25rem; $form-multi-select-selection-tags-padding-y-lg: .25rem; $form-multi-select-selection-tags-padding-x-lg: .25rem; $form-multi-select-tag-padding-y-lg: .175rem; $form-multi-select-tag-padding-x-lg: .5rem; $form-multi-select-font-size-sm: $input-font-size-sm; $form-multi-select-selection-padding-y-sm: $input-padding-y-sm; $form-multi-select-selection-padding-x-sm: $input-padding-x-sm; $form-multi-select-selection-tags-gap-sm: .125rem; $form-multi-select-selection-tags-padding-y-sm: .0625rem; $form-multi-select-selection-tags-padding-x-sm: .125rem; $form-multi-select-tag-padding-y-sm: .075rem; $form-multi-select-tag-padding-x-sm: .5rem; ``` ## API reference ### MultiSelect Module ```typescript import { MultiSelectModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ MultiSelectModule, SharedModule ] }) export class AppModule(){} ``` ### c-multi-select _component_ ```jsx import { MultiSelectComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowCreateOptions` | `boolean` | `false` | Allow users to create options if they are not in the list of options. | | `ariaCleanerLabel` | `string` | `'Clear all selections'` | Sets the accessible label (`aria-label`) for the button that clears the current selection. This label is read by screen readers. | | `ariaIndicatorLabel` | `string` | `'Toggle visibility of options menu'` | Sets the accessible label (`aria-label`) for the indicator button that toggles the options menu. This label is read by screen readers. | | `ariaSearchLabel` | `string` | `'Search options'` | Sets the accessible label (`aria-label`) for the search input. This label is read by screen readers. | | `ariaTagDeleteLabel` | `string` | `'Remove'` | Sets the prefix of the accessible label (`aria-label`) for a tag delete button. The option label is appended to it. | | `cleaner` | `boolean \| 'active'` | `true` | Enables selection cleaner element | | `clearSearchOnSelect` | `boolean` | `false` | Clear current search on selecting an item | | `deselectAllLabel` | `string` | `'Deselect all'` | Sets the select all button label shown once everything is selected. The button is a toggle: it shows `selectAllLabel` and selects all options, then shows `deselectAllLabel` and deselects them. | | `deselectFilteredLabel` | `string` | `'Deselect filtered'` | Sets the deselect filtered button label, used with `selectAllMode="filtered"`. | | `disabled` | `boolean` | `false` | Disables multi-select component | | `hideSelectAllOnSearchNoResults` | `boolean` | `true` | Hides the select all button when the search yields no results. | | `itemMinWidth` | `number` | `196` | Min width of the options list (in pixels). | | `itemSize` | `number` | `40` | The size of the option item in the list (in pixels). | | `loading` | `boolean` | `false` | Add loading spinner and reduced opacity. | | `multiple` | `boolean` | `false` | Specifies that multiple options can be selected at once | | `options` | `IOption[]` | `[]` | List of option elements | | `optionsGroupsSelectable` | `boolean` | `false` | With `multiple` and `optionsGroupsStyle="checkbox"`, makes each options group label a toggle that selects or deselects the group's enabled options matching the search, with a tri-state checkbox indicator (`none` / `all` / `indeterminate`) reflecting their selection. | | `optionsGroupsStyle` | `'checkbox' \| 'text'` | `'checkbox'` | Sets the options group label style when `optionsGroupsSelectable` is enabled: `'checkbox'` makes the label a toggle with a tri-state indicator, `'text'` keeps it a plain, non-interactive label. | | `optionsMaxHeight` | `string \| number` | `'auto'` | Sets maxHeight of options list in px | | `optionsStyle` | `'checkbox' \| 'text'` | `'checkbox'` | Sets option style | | `placeholder` | `string` | `'Select...'` | Specifies a short hint that is visible in the search input | | `popperOptions` | `Partial` | `defaultPopperOptions` | Optional popper Options object | | `resetSelectionOnOptionsChange` | `boolean` | `false` | Resets selection when options are changed When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided. | | `search` | `boolean \| SearchFn \| 'external'` | `true` | Enables search input element | | `searchNoResultsLabel` | `string` | `'No results found'` | Sets the label for no results when filtering | | `searchValue` | `string` | `''` | Sets initial search string | | `selectAll` | `boolean` | `true` | Enables select all button | | `selectAllLabel` | `string` | `'Select all'` | Sets the select all button label | | `selectAllMode` | `'all' \| 'filtered'` | `'all'` | Determines what the select all button operates on: all options (`'all'`) or only the ones matched by the current search (`'filtered'`). | | `selectAllStyle` | `'checkbox' \| 'text'` | `'checkbox'` | Sets the select all button style. With `'checkbox'` the button shows a tri-state indicator (none / all / indeterminate). | | `selectFilteredLabel` | `string` | `'Select filtered'` | Sets the select filtered button label, used with `selectAllMode="filtered"`. | | `selectionLimit` | `number` | `undefined` | Sets the maximum number of options that can be selected. The select all button stays enabled and selects options up to the limit. Selecting more options is blocked and emits `selectionLimitReached`. | | `selectionType` | `'text' \| 'counter' \| 'tags'` | `'tags'` | Selection type | | `selectionTypeCounterText` | `string` | `'item(s) selected'` | Counter selection label value | | `selectionTypeCounterTextPluralMap` | `IPluralMap` | `{ '=1': 'item selected', 'other': 'items selected' }` | Counter selection label plural map for I18nPluralPipe | | `size` | `'' \| 'sm' \| 'lg'` | - | Size the component small or large. | | `valid` | `boolean` | `undefined` | Toggle visual validation feedback. | | `value` | `TValue \| TValue[]` | `== true,` | Initial value of multi-select | | `virtualScroller` | `boolean` | `false` | Enable virtual scroller for options list. | | `visible` | `boolean` | `false` | Toggle the visibility of the dropdown select component. | | `visibleItems` | `number` | `8` | Amount of visible options, if set - overwrites optionsMaxHeight | ### Events | Name | Description | | --- | --- | | `searchValueChange` | Emits searchValue string for external filtering | | `selectionLimitReached` | Emits the active `selectionLimit` when the user tries to select more options than allowed by it. | | `valueChange` | Emits valueChange | | `visibleChange` | Emits visibleChange | ### c-multi-select-option _component_ ```jsx import { MultiSelectOptionComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Option disabled. | | `label` | `string` | `undefined` | Option label | | `optionsStyle` | `'checkbox' \| 'text'` | `undefined` | Option style. When not set, follows the `optionsStyle` of the parent `c-multi-select` (`'checkbox'`). | | `role` | `string` | `'option'` | Role for the option element. | | `selected` | `boolean` | `false` | Option selected. | | `text` | `string` | `undefined` | Option inner text | | `value` | `string \| number` | `undefined` | Option value. | ### Events | Name | Description | | --- | --- | | `focusChange` | Emits the option when it gains focus. | | `selectedChange` | Emits option selected change | ### c-multi-select-optgroup _component_ ```jsx import { MultiSelectOptgroupComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Disables all options in the group. | | `label` | `string` | - | Options group label. | --- # Angular 'Checkbox, Radio & Switch Component > Create consistent cross-browser and cross-device checkboxes and radios with our Angular checkbox, radio, and switch components. ## Approach Browser default checkboxes and radios are replaced with the help of `c-form-check`. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. ## Checkbox ### Indeterminate Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property. ### Disabled checkbox Add the `disabled` attribute and the associated `cFormCheckLabel` is automatically styled to match with a lighter color to help indicate the input's state. ## Radio button ### Radios in forms ### Disabled radio button Add the `disabled` attribute and the associated `cFormCheckLabel` is automatically styled to match with a lighter color to help indicate the input's state. ## Switch A switch has the markup of a custom checkbox but uses the `switch` boolean properly to render a toggle switch. Switches also support the `disabled` attribute. ### Switch size ### Switches in forms ## Layout ### Default (stacked) ### Inline Group checkboxes or radios on the same horizontal row by adding `inline` boolean property to any c-form-check`. ### Without labels Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). ## Toggle buttons Create button-like checkboxes and radio buttons by using button boolean property on the `c-form-check` component. These toggle buttons can further be grouped in a button group if needed. ### Checkbox toggle buttons ### Radio toggle buttons ### Outlined styles Different variants of button, such at the various outlined styles, are supported. ## API reference ### Form Module ### c-form-check _component_ ```jsx import { FormCheckComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `inline` | `boolean` | `false` | Group checkboxes or radios on the same horizontal row. | | `reverse` | `boolean` | `false` | Put checkboxes or radios on the opposite side. | | `sizing` | `'' \| 'lg' \| 'xl'` | `undefined` | Size the component large or extra large. Works only with `[switch]="true"` | | `switch` | `boolean` | `false` | Render a toggle switch on for checkbox. | ### cFormCheckInput _directive_ ```jsx import { FormCheckInputDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `indeterminate` | `boolean` | `false` | Set component indeterminate state. | | `type` | `'checkbox' \| 'radio'` | `'checkbox'` | Specifies the type of component. | | `valid` | `boolean` | `undefined` | Set component validation state to valid. | ### cFormCheckLabel _directive_ ```jsx import { FormCheckLabelDirective } from '@coreui/angular' ``` --- # Angular Chip Input Component > Angular Chip Input component lets users enter multiple values as chips in one field, with keyboard entry, removal, selection and Angular forms support. _Added in 5.7.36._ ## Overview The CoreUI **Angular Chip Input component** lets users enter multiple values as chips inside a single field. Use it as a tag input, multi-value selector, or token field for skills, categories, email recipients, and more. It supports keyboard-friendly entry, chip removal, and optional selection. - Type values and press `Enter` or the separator to create chips; pasted text is split the same way. - Chips can be removable and selectable. - The text field stays inline and grows as you type. - The value is a `string[]`: bind `[(value)]`, or use `formControlName`, `ngModel` or `[formField]`. ## When to use Chip Input Use the Angular Chip Input component when you need: - A **tag input** or **token field** for free-form multi-value entry - An **email or recipient input** where users add multiple addresses - A **skills or category selector** in forms - A **multi-value field** that works with Angular forms ## Basic example Use `c-chip-input` to render a multi-value field with predefined chips and an inline text field. `label` renders an inline label inside the container; the `id` goes to the text field, so the label, or an external `