# 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 Soon: - _Performance optimization with virtual scrolling_ ## 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:
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 Enable global search functionality that allows users to start typing from anywhere within the component to begin searching: ### 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 ``` You can combine external search with global keyboard navigation: ```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 Enhance search visibility by highlighting matching portions of option labels when user hovers over suggestions: ## Validation states Apply validation styling to indicate input validity. ## Disabled state Disable the component to prevent user interaction: ## Sizing Choose from different sizes to match your design system and form layout: ## Cleaner functionality Enable a cleaner button to quickly clear input element: ## 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: ## Forms Angular handles user input through reactive and template-driven forms. CoreUI Autocomplete supports both 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. You can bind the value to a template variable using the `ngModel` directive. ### Signal forms The Angular Autocomplete component works with signal forms. **(preview)** ## Accessibility The Autocomplete component includes several accessibility features: - _ARIA attributes_: Proper `role`, `aria-expanded`, `aria-haspopup`, and `aria-autocomplete` attributes - _Screen reader_ support: Descriptive labels and announcements for state changes - _Keyboard navigation_: Full keyboard support with arrow keys, Enter, Escape, and Tab - _Focus management_: Proper focus handling and visual focus indicators - _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 | |Enter | Select the highlighted option | |Escape | Close the dropdown and clear focus | |Tab | Accept hint completion (when hints are enabled) | |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_
##### Inputs | name | description | type | default | | ---- | ----------- | ---- | ------- | | `allowOnlyDefinedOptions` | 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. | `boolean` | `false` | | `cleaner` | 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. | `boolean` | `false` | | `clearSearchOnSelect` | Whether to clear the internal search state after selecting an option. When set to `true`, the internal search value used for filtering options is cleared after a selection is made. This affects only the component's internal logic. Note: This does *not* clear the visible input field if the component is using external search or is controlled via the searchValue prop. In such cases, clearing must be handled externally. | `boolean` | `true` | | `disabled` | 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. | `boolean` | `undefined` | | `highlightOptionsOnSearch` | Highlight options that match the search criteria. When true, matching portions of option labels are visually highlighted based on the current search input value. | `boolean` | `false` | | `indicator` | Show dropdown indicator/arrow button. When `true`, displays a dropdown arrow button that can be clicked to manually show or hide the options dropdown. | `boolean` | `false` | | `loading` | 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. The dropdown remains functional but shows visual loading indicators. | `boolean` | `false` | | `options` | List of option elements. Can contain Option objects, OptionsGroup objects, or plain strings. Plain strings are converted to simple Option objects internally. This is a required prop - the Angular Autocomplete needs options to function. | `AutocompleteOption[]` | `[]` | | `optionsMaxHeight` | 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. | `string \| number` | `auto` | | `optionGroupTemplate` | Custom template for rendering option groups. Allows customization of how option group headers appear in the dropdown. | `TemplateRef` | `undefined` | | `optionTemplate` | Custom template for rendering individual options. Allows complete customization of how each option appears in the dropdown. | `TemplateRef` | `undefined` | | `placeholder` | 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. | `string` | `undefined` | | `readOnly` | Toggle the readonly state for the component. When true, users can view and interact with the dropdown but cannot type in the search input or modify the selection through typing. Selection via clicking options may still be possible. | `boolean` | `false` | | `resetSelectionOnOptionsChange` | Determines whether the selected options should be cleared when the options list is updated. When 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. | `boolean` | `false` | | `search` | Enables and configures search functionality.
`{ global: boolean, external: boolean }` | `'global' \| 'external' ` | `undefined` | | `searchNoResultsLabel` | 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 | `string \| boolean` | `undefined` | | `showHints` | 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. | `boolean` | `false` | | `sizing` | Size the component small, large, or default. | `sm \| lg` | `undefined` | | `valid` | Set component validation state. | `boolean \| undefined` | `undefined` | | `value` | Sets the initially selected value for the Angular Autocomplete component. Can be a string (matched against option labels) or number (matched against option values). The component will attempt to find and select the matching option on mount. | `string \| number` | `` | | `visible` | Toggle the visibility of autocomplete dropdown. Controls whether the dropdown is initially visible. The dropdown visibility can still be toggled through user interaction. | `boolean` | `false` | {/* | `virtualScroller` | Not yet implemented | `boolean` | `false` |*/} {/* | `visibleItems` | Amount of visible items when virtualScroller is enabled. Determines how many option items are rendered at once when virtual scrolling is active. Higher values show more items but use more memory. Lower values improve performance. | `number` | `10` |*/}
```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` | Whether to clear the internal search state after selecting an option. When set to `true`, the internal search value used for filtering options is cleared after a selection is made. This affects only the component's internal logic. Note: This does **not** clear the visible input field if the component is using external search or is controlled via the `searchValue` prop. In such cases, clearing must be handled externally. | | `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` | The size of the option item in the list (in pixels). | | `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. The dropdown remains functional but shows visual loading indicators. | | `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. 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`, users can view and interact with the dropdown but cannot type in the search input or modify the selection through typing. Selection via clicking options may still be possible. | | `resetSelectionOnOptionsChange` | `boolean` | `false` | Determines whether the selected options should be cleared when the options list is updated. When `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` | `Search` | - | Enables and configures search functionality. - `'external'`: Search is handled externally, filtering is not applied internally - `'global'`: Enables global keyboard search when dropdown is closed - Object with `external` and `global` boolean properties for fine-grained control | | `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` | Set form input validation state to valid. | | `value` | `string \| number` | `undefined` | Sets the initially selected value for the Angular autocomplete component. Can be a string (matched against option labels) or number (matched against option values). The component will attempt to find and select the matching option on mount. | | `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` prop. | | `visible` | `boolean` | `false` | Toggle the visibility of autocomplete dropdown. Controls whether the dropdown is initially visible. The dropdown visibility can still be toggled through user interaction. | | `visibleItems` | `number` | `8` | Amount of visible items when virtualScroller is enabled. Determines how many option items are rendered at once when virtual scrolling is active. Higher values show more items but use more memory. Lower values improve performance. | ### Events | Name | Description | | --- | --- | | `inputChange` | Emits an event when the filter/search value changes. Called whenever the user types in the search input. 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 `undefined` when cleared. This is the primary callback for handling selection changes. | | `valueChange` | Event emitted on `value` change. | | `visibleChange` | The callback is fired when the dropdown requests to be hidden. Called when the dropdown closes due to user interaction, clicks outside, escape key, or programmatic changes. |
--- # 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 ## 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 selection'` | 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. | | `cleaner` | `boolean \| 'active'` | `true` | Enables selection cleaner element | | `clearSearchOnSelect` | `boolean` | `false` | Clear current search on selecting an item | | `disabled` | `boolean` | `false` | Disables multi-select component | | `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 | | `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 items'` | 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 options'` | Sets the select all button label | | `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 | | `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 One Time Password (OTP) Input Component > Develop secure and user-friendly Angular one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows. _Added in 5.5.23._ ## Example The `c-one-time-password` component and `cOtp` directive are perfect for creating secure Angular OTP input fields. They offer automatic character navigation and validation, making them ideal for two-factor authentication, SMS verification codes, and secure login flows. ## One-time password types The one-time password input supports various input types for different use cases. ## Placeholders Provide visual cues to users by displaying placeholder text in the input fields for OTP. You can use a single character for all fields or specify different placeholders for each field. ## Pre-filled values Set initial values using the `value` prop. ## Input modes Control user input behavior with linear and non-linear modes. ## Auto-submit Enable automatic form submission when all one-time password fields are completed. ## Custom layouts Create custom one-time password layouts with separators and different field counts. ## Sizing variants One-time password input supports different sizes. You may choose from small, normal (default), and large inputs to match our similarly sized text inputs. ## Disabled state Disable the entire one-time password input by adding the `disabled` prop. ## Readonly state Use the `readOnly` prop to make the one-time password input non-editable but still selectable. ## Validation state Use the `valid` prop to indicate input validity. ## Forms Angular handles user input through reactive and template-driven forms. CoreUI One Time Password OTP Input for Angular supports both approaches. ### Reactive The Angular OTP Input component can be used with reactive forms. You can bind the OTP Input value to a form control using the `formControlName` directive. ### Template-driven The Angular OTP Input component can be used in template-driven forms. You can bind the value to a template variable using the `ngModel` directive. ## Accessibility (a11y) The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs. - __ARIA Labels__: Each input field automatically receives descriptive `aria-label` attributes - __Role Attribute__: The container has `role="group"` to indicate related form controls - __Keyboard Navigation__: Full keyboard support with arrow keys, tab, and backspace - __Screen Reader__ Support: Clear announcements when values change or validation occurs - __Focus Management__: Automatic focus handling for seamless navigation ### Customizing accessibility You can customize the aria-label generation function to provide more specific descriptions: const ariaLabel = (index, total) => `Enter digit ${index + 1} of your ${total}-digit verification code` ### Keyboard support The one-time password input component provides comprehensive keyboard navigation support: | Key | Action | | --- | --- | |ArrowLeft | Moves focus to previous field | |ArrowRight | Moves focus to next field | |Backspace | Delete current character or move to a previous field (if empty) | |Tab | Move to next focusable element (respects linear mode) | |Shift + Tab | Move to previous focusable element | |Ctrl + V / Cmd + V | Paste clipboard content and auto-fill fields | ## Customizing ### CSS Classes The One Time Password Input components use the following CSS classes: - `.form-otp` - Applied to the wrapper container - `.form-otp-sm` - Small size variant - `.form-otp-lg` - Large size variant - `.form-otp-control` - Applied to individual input elements ### SASS variables ```scss $form-otp-gap: .125rem !default; $form-otp-control-width: 2rem !default; $form-otp-control-padding-y: $input-padding-y !default; $form-otp-control-padding-x: 0 !default; $form-otp-control-font-family: $input-font-family !default; $form-otp-control-font-size: $input-font-size !default; $form-otp-control-font-weight: $input-font-weight !default; $form-otp-control-line-height: $input-line-height !default; $form-otp-control-color: $input-color !default; $form-otp-control-bg: $input-bg !default; $form-otp-control-border-width: $input-border-width !default; $form-otp-control-border-color: $input-border-color !default; $form-otp-control-border-radius: $input-border-radius !default; $form-otp-control-box-shadow: $input-box-shadow !default; $form-otp-control-transition: $input-transition !default; $form-otp-control-focus-color: $input-focus-color !default; $form-otp-control-focus-bg: $input-focus-bg !default; $form-otp-control-focus-border-color: $input-focus-border-color !default; $form-otp-control-focus-box-shadow: $input-focus-box-shadow !default; $form-otp-control-width-sm: 1.5rem !default; $form-otp-control-padding-y-sm: $input-padding-y-sm !default; $form-otp-control-padding-x-sm: 0 !default; $form-otp-control-font-size-sm: $input-font-size-sm !default; $form-otp-control-border-radius-sm: $input-border-radius-sm !default; $form-otp-control-width-lg: 2.5rem !default; $form-otp-control-padding-y-lg: $input-padding-y-lg !default; $form-otp-control-padding-x-lg: 0 !default; $form-otp-control-font-size-lg: $input-font-size-lg !default; $form-otp-control-border-radius-lg: $input-border-radius-lg !default; ``` ## API reference ### OTP Module ```ts import { NgModule } from '@angular/core'; import { OneTimePasswordModule } from '@coreui/angular'; @NgModule({ imports: [OneTimePasswordModule] }) export class CustomAppModule {} ``` ### OTP Standalone ```ts import { Component } from '@angular/core'; import { OneTimePasswordComponent, OtpDirective } from '@coreui/angular'; @Component({ template: ` `, imports: [OneTimePasswordComponent, OtpDirective] }) export class CustomAppComponent {} ``` ### c-one-time-password _component_
```jsx import { OneTimePasswordComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `ariaLabel` | `object` | `(index, total) => `Digit ${index + 1} of ${total}`` | Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs. | | `autoSubmit` | `boolean` | `false` | Automatically submit the form when all one-time password fields are filled. | | `defaultValue` | `string \| number` | `undefined` | Initial value for Angular one-time password input. | | `disabled` | `boolean` | `false` | Disable all one-time password (OTP) input fields. | | `linear` | `boolean` | `true` | Enforce sequential input (users must fill fields in order). | | `masked` | `boolean` | `false` | Show input as a password (masked characters). | | `placeholder` | `string` | `''` | Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character. | | `readOnly` | `boolean` | `false` | Make the Angular OTP input component read-only. | | `sizing` | `'' \| 'sm' \| 'lg'` | `undefined` | Sets the visual size of the Angular one-time password (OTP) input. Use 'sm' for small or 'lg' for large input fields. | | `type` | `'number' \| 'text'` | `'number'` | Input validation type: 'number' for digits only, or 'text' for free text. | | `valid` | `boolean` | `undefined` | Set form input validation state to valid. | | `value` | `string \| number` | `undefined` | Current value for OTP input. | ### Events | Name | Description | | --- | --- | | `complete` | Callback triggered when all Angular one-time password (OTP) fields are filled. | | `valueChange` | Event triggered when the Angular one-time password (OTP) value changes. |
### input[cOtp] _directive_
```jsx import { OtpDirective } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Toggle the disabled state for the slot. Disabled slots are skipped when moving focus between them. | | `placeholder` | `string` | `''` | Placeholder for the slot. A string longer than one character is spread across the slots, one character each; when unset the parent component's placeholder is used. | | `value` | `string \| number` | `''` | Value of the slot, kept in sync with the input element. |
--- # Documentation _Added in 5.4.12._ The `cFormPassword` is a fully featured Angular password input field built with Bootstrap and CoreUI. It includes built-in password visibility toggling, sm / lg sizing options, and support for disabled, readOnly, and form validation states. Ideal for login forms, signup screens, and any secure input in your Angular app. ## Examples ### Sizing Use the `sizing` prop to control the height and padding of the input. Available options: - `sizing="sm"` – small input - `sizing="lg"` – large input ### Disabled Add the `disabled` attribute to make the password input uneditable. This also dims the field to indicate it's inactive. ### Readonly Use the `readOnly` prop to make the input non-editable while still allowing the text to be copied. Unlike disabled, it keeps the default cursor. ### Floating Label Use the `floatingLabel` prop to add a floating label to the password input. This is useful for forms where you want to save space and keep the label visible when the user interacts with the field. ### Validation status Use the `valid` prop to indicate the validation status of the input. Set it to `true` for valid, `false` for invalid, or leave it `undefined` for default styling. ## Forms Angular handles password input through reactive forms and template-driven forms. CoreUI Password Input directive supports both. ## Customizing ### SASS variables Angular CoreUI Password Input directive use Sass variables for enhanced customization. - `$input-*` are shared across most of our form controls (and not buttons). - `$form-password-*` are for our `cFormPassword` directive. ```scss $form-password-action-bg: transparent !default; $form-password-action-hover-bg: var(--cui-tertiary-bg) !default; $form-password-icon-show: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M256%2C144.927A103.309%2C103.309%2C0%2C1%2C0%2C359.309%2C248.236%2C103.426%2C103.426%2C0%2C0%2C0%2C256%2C144.927Zm0%2C174.618a71.309%2C71.309%2C0%2C1%2C1%2C71.309-71.309A71.39%2C71.39%2C0%2C0%2C1%2C256%2C319.545Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223c-77.75-77.749-204.258-77.749-282.008%2C0L16%2C233.79v28.893l98.778%2C102.689.218.222a199.409%2C199.409%2C0%2C0%2C0%2C282.008%2C0l99-102.911V233.79ZM464%2C249.79l-89.732%2C93.285a167.409%2C167.409%2C0%2C0%2C1-236.536%2C0L48%2C249.79v-3.107L137.729%2C153.4c65.247-65.13%2C171.3-65.13%2C236.542%2C0L464%2C246.683Z%22%20class%3D%22ci-primary%22/%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20x%3D%22240%22%20y%3D%22232%22%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default; $form-password-icon-hide: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223C333.831%2C67.707%2C238.47%2C55.862%2C163.228%2C95.346l23.938%2C23.939c61.571-27.691%2C136.573-16.327%2C187.105%2C34.115L464%2C246.683v3.107l-71.744%2C74.585%2C22.63%2C22.63L496%2C262.683V233.79Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M352.8%2C284.33A103.307%2C103.307%2C0%2C0%2C0%2C219.907%2C151.438L246.1%2C177.63a71.228%2C71.228%2C0%2C0%2C1%2C80.507%2C80.508Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M369.9%2C347.268l-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806c-.083.113-.169.222-.253.334l-99.681-99.681c.112-.083.221-.17.334-.253L191.12%2C167.906c-.108.087-.213.179-.321.266L38.627%2C16H16V38.627l95.689%2C95.689L16%2C233.79v28.893l98.778%2C102.689.218.222A199.732%2C199.732%2C0%2C0%2C0%2C367.372%2C390l106%2C106H496V473.373L392.537%2C369.911Zm-177.157-131.9L288.871%2C311.5a71.28%2C71.28%2C0%2C0%2C1-96.133-96.133ZM137.729%2C343.073%2C48%2C249.79v-3.107l86.319-89.737%2C35.065%2C35.064A103.248%2C103.248%2C0%2C0%2C0%2C312.226%2C334.853l32.007%2C32.007C279.723%2C406.875%2C193.711%2C398.955%2C137.729%2C343.073Z%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default; $form-password-icon-color: var(--cui-tertiary-color) !default; $form-password-icon-hover-color: var(--cui-secondary-color) !default; $form-password-icon-size: 1.25rem !default; $form-password-icon-size-lg: 1.5rem !default; $form-password-icon-size-sm: 1rem !default; $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-font-family: $input-btn-font-family !default; $input-font-size: $input-btn-font-size !default; $input-font-weight: $font-weight-base !default; $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; $input-font-size-sm: $input-btn-font-size-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; $input-font-size-lg: $input-btn-font-size-lg !default; $input-bg: var(--cui-body-bg) !default; $input-disabled-color: var(--cui-body-color) !default; $input-disabled-bg: var(--cui-secondary-bg) !default; $input-disabled-border-color: var(--cui-border-color) !default; $input-color: var(--cui-body-color) !default; $input-border-color: var(--cui-border-color) !default; $input-border-width: $input-btn-border-width !default; $input-box-shadow: var(--cui-box-shadow-inset) !default; $input-border-radius: var(--cui-border-radius) !default; $input-border-radius-sm: var(--cui-border-radius-sm) !default; $input-border-radius-lg: var(--cui-border-radius-lg) !default; $input-focus-bg: $input-bg !default; $input-focus-border-color: tint-color($primary, 50%) !default; $input-focus-color: $input-color !default; $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: var(--cui-secondary-color) !default; $input-plaintext-color: var(--cui-body-color) !default; $input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default; $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $form-color-width: 3rem !default; ``` ## API reference ### Form Module ```ts import { NgModule } from '@angular/core'; import { FormModule } from '@coreui/angular'; @NgModule({ imports: [FormModule] }) export class CustomAppModule {} ``` ### Form Password Standalone ```ts import { Component } from '@angular/core'; import { FormPasswordDirective } from '@coreui/angular'; @Component({ template: ``, imports: [FormPasswordDirective] }) export class CustomAppComponent {} ``` ### cFormPassword _directive_
```jsx import { FormPasswordDirective } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `ariaLabelToggler` | `string` | `'Toggle password visibility'` | Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`. | | `disabled` | `boolean` | `false` | Sets disabled state of the password input field. When `true`, the user cannot interact with the field. | | `floatingLabel` | `string` | - | set form labels that float over the password input fields | | `readOnly` | `boolean` | `false` | Disables the password input field. When `true`, the user cannot interact with the field. | | `showPassword` | `boolean` | `false` | Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows **toggling password visibility** in Angular forms. | | `sizing` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `valid` | `boolean` | `undefined` | Set component validation state to valid. | --- # Angular Range Component > Use our custom Angular Range inputs for consistent cross-browser styling and built-in customization. ## Overview Create custom range controls with ``. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. ## Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. ## Min and max Range inputs have implicit values for `min="0"` and `max="100"`, respectively. You may specify new values for those using the `min` and `max` attributes. ## Steps By default, range inputs "snap" to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using `step="0.5"`. ## API reference ### Form Module ### cFormControl _directive_ Works with `input` html tag of `type="range"`. {/* todo: */} {/* ```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. | */} #### Inputs | name | description | type | default | | ---- | ----------- | ---- | ------- | | `max` | Specifies the maximum value for the component. | `number` | _100_ | | `min` | Specifies the minimum value for the component. | `number` | _0_ | | `step` | Specifies the interval between legal numbers in the component. | `number` |_1_| | `type` | Specifies the html type of input element. | `range` |__required__| | `value` | The value attribute of the input. | `number` | _(max-min)/2_ | | `disabled` | Toggle the disabled state for the component. | `boolean` | _false_ | --- # Angular Range Slider > Enhance your forms with our customizable Angular Range Slider component for advanced range selection. _Added in 5.3.5._ ## Overview The Angular Range Slider component allows users to select a value or range of values within a predefined range. Unlike the standard ``, the Range Slider offers enhanced customization options, including multiple handles, labels, tooltips, and vertical orientation. It ensures consistent styling across browsers and provides a rich set of features for advanced use cases. ## Features - **Multiple Handles**: Select single or multiple values within the range. - **Custom Labels**: Display labels at specific points on the slider. - **Tooltips:** Show dynamic tooltips displaying current values. - **Vertical Orientation**: Rotate the slider for vertical layouts. - **Clickable Labels**: Enable users to click on labels to set slider values. - **Disabled State**: Disable the slider to prevent user interaction. ## Angular Range Slider Example Create a simple range slider with default settings. ## Multiple handles Enable multiple handles to allow the selection of a range or/and multiple values. ## Vertical Range Slider Rotate the slider to a vertical orientation. ## Disabled Disable the slider to prevent user interaction. ## Min and max Angular Range Slider component has implicit values for `min` and `max` — `0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. ## Steps Range Slider inputs automatically "snap" to whole numbers. To modify this behavior, set a `step` value. In the example below: - we increase the number of steps by specifying `step="0.25"` - we decrease the number of steps by specifying `step="5"` ## Distance Sets the minimum distance between multiple slider handles by setting `distance` and ensures that the handles do not overlap or get too close. ## Labels Add labels to specific points on the slider for better context. If you provide an array of strings, as in the example below, then labels will be spaced at equal distances from the beginning to the end of the slider. ### Labels customization Labels can be configured as an array of strings or objects. When using objects, you can specify additional properties like `value`, `label`, `class`, and `style`. ### Clickable labels By default, users can click on labels to set the slider to specific values. You can disable this feature by setting `clickableLabels` to `false`. ## Tooltips By default, tooltips display the current value of each handle. You can disable tooltips by setting `tooltips` to `false`. ### Tooltips formatting Customize the content of tooltips using the `tooltipsFormat` property. This should be a function that formats the tooltip text based on the current value. ## Track The `track` property allows you to customize how the slider's track is displayed. By default, the `track` property is set to `fill` enabling dynamic filling of the track based on the slider's current value(s). This means the filled portion of the track will adjust automatically as the slider handle move, offering a responsive visual representation of the selected range. #### Disable filling If you set `track` to `false`, the slider's track will not display any fill. Only the default track background will be visible, which can be useful for minimalist designs or when you use more then two handles. ## Forms Angular handles user input through reactive and template-driven forms. CoreUI Range Slider supports both approaches. ### Reactive The Angular Range Slider component can be used in reactive forms. You can bind the slider's value to a form control using the `formControlName` directive. ### Template-driven The Angular Range Slider component can be used in template-driven forms. You can bind the slider's value to a template variable using the `ngModel` directive. ## Accessibility The Angular Range Slider component is built with accessibility in mind. Each slider handle includes the following ARIA attributes: - `role`: `slider` - `aria-valuemin`: Minimum value - `aria-valuemax`: Maximum value - `aria-valuenow`: Current value - `aria-orientation`: `horizontal` or `vertical` Additionally, ensure that labels and tooltips are clear and descriptive to provide the best experience for all users. ## Customizing ### CSS variables Angular CoreUI Range Sliders use local CSS variables on `.range-slider` class for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss .range-slider { --cui-range-slider-track-width: #{$range-slider-track-width}; --cui-range-slider-track-height: #{$range-slider-track-height}; --cui-range-slider-track-cursor: #{$range-slider-track-cursor}; --cui-range-slider-track-bg: #{$range-slider-track-bg}; --cui-range-slider-track-border-radius: #{$range-slider-track-border-radius}; --cui-range-slider-track-box-shadow: #{$range-slider-track-box-shadow}; --cui-range-slider-track-in-range-bg: #{$range-slider-track-in-range-bg}; --cui-range-slider-disabled-track-in-range-bg: #{$range-slider-disabled-track-in-range-bg}; --cui-range-slider-label-padding-y: #{$range-slider-label-padding-y}; --cui-range-slider-label-padding-x: #{$range-slider-label-padding-x}; --cui-range-slider-label-font-size: #{$range-slider-label-font-size}; --cui-range-slider-label-color: #{$range-slider-label-color}; --cui-range-slider-thumb-width: #{$range-slider-thumb-width}; --cui-range-slider-thumb-height: #{$range-slider-thumb-height}; --cui-range-slider-thumb-bg: #{$range-slider-thumb-bg}; --cui-range-slider-thumb-border: #{$range-slider-thumb-border}; --cui-range-slider-thumb-border-radius: #{$range-slider-thumb-border-radius}; --cui-range-slider-thumb-box-shadow: #{$range-slider-thumb-box-shadow}; --cui-range-slider-thumb-focus-box-shadow: #{$range-slider-thumb-focus-box-shadow}; --cui-range-slider-thumb-active-bg: #{$range-slider-thumb-active-bg}; --cui-range-slider-thumb-disabled-bg: #{$range-slider-thumb-disabled-bg}; --cui-range-slider-thumb-transition: #{$range-slider-thumb-transition}; --cui-range-slider-tooltip-zindex: #{$zindex-tooltip}; --cui-range-slider-tooltip-padding-y: #{$range-slider-tooltip-padding-y}; --cui-range-slider-tooltip-padding-x: #{$range-slider-tooltip-padding-x}; --cui-range-slider-tooltip-margin-end: #{$range-slider-tooltip-margin-end}; --cui-range-slider-tooltip-margin-bottom: #{$range-slider-tooltip-margin-bottom}; --cui-range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size}; --cui-range-slider-tooltip-color: #{$range-slider-tooltip-color}; --cui-range-slider-tooltip-bg: #{$range-slider-tooltip-bg}; --cui-range-slider-tooltip-border-radius: #{$range-slider-tooltip-border-radius}; --cui-range-slider-tooltip-box-shadow: #{$range-slider-tooltip-box-shadow}; --cui-range-slider-tooltip-transition: #{$range-slider-tooltip-transition}; --cui-range-slider-tooltip-arrow-width: #{$range-slider-tooltip-arrow-width}; --cui-range-slider-tooltip-arrow-height: #{$range-slider-tooltip-arrow-height}; } .range-slider.vertical { --cui-range-slider-vertical-track-width: #{$range-slider-vertical-track-width}; --cui-range-slider-vertical-track-height: #{$range-slider-vertical-track-height}; } ``` #### How to use CSS variables ### SASS variables ```scss $range-slider-track-width: 100% !default; $range-slider-track-height: .5rem !default; $range-slider-track-cursor: pointer !default; $range-slider-track-bg: var(--cui-secondary-bg) !default; $range-slider-track-border-radius: 1rem !default; $range-slider-track-box-shadow: var(--cui-box-shadow-inset) !default; $range-slider-track-in-range-bg: rgba(var(--cui-primary-rgb), .5) !default; $range-slider-disabled-track-in-range-bg: rgba(var(--cui-secondary-rgb), .375) !default; $range-slider-label-padding-y: 0 !default; $range-slider-label-padding-x: 0 !default; $range-slider-label-font-size: $font-size-sm !default; $range-slider-label-color: var(--cui-body-color) !default; $range-slider-thumb-width: 1rem !default; $range-slider-thumb-height: $range-slider-thumb-width !default; $range-slider-thumb-bg: $component-active-bg !default; $range-slider-thumb-border: 0 !default; $range-slider-thumb-border-radius: 1rem !default; $range-slider-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; $range-slider-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; $range-slider-thumb-active-bg: tint-color($primary, 70%) !default; $range-slider-thumb-disabled-bg: rgba(var(--cui-secondary-rgb), 1) !default; $range-slider-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $range-slider-tooltip-padding-y: $spacer * .25 !default; $range-slider-tooltip-padding-x: $spacer * .5 !default; $range-slider-tooltip-margin-end: .25rem !default; $range-slider-tooltip-margin-bottom: .25rem !default; $range-slider-tooltip-font-size: $font-size-sm !default; $range-slider-tooltip-color: var(--cui-body-color) !default; $range-slider-tooltip-bg: var(--cui-secondary-bg) !default; $range-slider-tooltip-border-radius: var(--cui-border-radius) !default; $range-slider-tooltip-box-shadow: var(--cui-box-shadow) !default; $range-slider-tooltip-transition: visibility .15s, opacity .15s ease !default; $range-slider-tooltip-arrow-width: .8rem !default; $range-slider-tooltip-arrow-height: .4rem !default; $range-slider-vertical-track-width: .5rem !default; $range-slider-vertical-track-height: 10rem !default; ``` ## API reference ### Range Slider Module ```ts import { NgModule } from '@angular/core'; import { RangeSliderModule } from '@coreui/angular'; @NgModule({ imports: [RangeSliderModule] }) export class CustomAppModule {} ``` ### Range Slider Standalone ```ts import { Component } from '@angular/core'; import { RangeSliderComponent } from '@coreui/angular'; @Component({ template: ``, imports: [RangeSliderComponent], standalone: true }) export class CustomAppComponent {} ``` ### c-range-slider _component_
```jsx import { RangeSliderComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `ariaLabels` | `string[]` | - | Accessible labels (`aria-label`) for the slider handles, one per thumb, applied only to multi-thumb sliders to distinguish otherwise identically-announced handles. When omitted, two-thumb sliders default to `"Minimum value"` / `"Maximum value"` and sliders with more thumbs to `"Value {n}"`. | | `clickableLabels` | `boolean` | `true` | Enable or disable clickable labels in the Angular Range Slider. When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience. | | `disabled` | `boolean` | `false` | Control the interactive state of the Angular Range Slider with the `disabled` prop. Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state. | | `distance` | `number` | `0` | Define the minimum distance between slider handles using the `distance` prop in the Angular Range Slider. This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions. | | `labels` | `Label[]` | `[]` | Add descriptive labels to your Angular Range Slider by providing an array of `labels`. These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users. | | `max` | `number` | `100` | Specify the maximum value for the Angular Range Slider with the `max` prop. This determines the upper limit of the slider's range, enabling precise control over the highest selectable value. | | `min` | `number` | `0` | Set the minimum value for the Angular Range Slider using the `min` prop. This defines the lower bound of the slider's range, allowing you to control the starting point of user selection. | | `role` | `string` | `'slider'` | Default role for c-range-slider. | | `step` | `number` | `1` | Control the granularity of the Angular Range Slider by setting the `step` prop. This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements. | | `tooltips` | `boolean` | `true` | Toggle the visibility of tooltips in the Angular Range Slider with the `tooltips` prop. When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users. | | `tooltipsFormat` | `object` | - | Customize the display format of tooltips in the Angular Range Slider using the `tooltipsFormat` function. This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information. | | `track` | `boolean \| 'fill'` | `'fill'` | Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track. | | `value` | `number \| number[]` | `[]` | Set the current value(s) of the Angular Range Slider using the `value` prop. Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state. | | `vertical` | `boolean` | `false` | Orient the Angular Range Slider vertically by setting the `vertical` prop to `true`. This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs. | ### Events | Name | Description | | --- | --- | | `valueChange` | Event emitted on `value` change. |
##### Types ```ts import { NgCssClass } from '@coreui/angular'; export type Label = | { label: number | string; value: number; class?: NgCssClass; style?: Partial; } | string; ``` --- # Angular Rating Component > Angular star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference. _Added in 5.1.0._ ## Examples Embed the Rating component in your Angular application like this: ### Allow clear Enable users to clear their selected rating by clicking on the current rating again. This functionality is activated by setting `allowClear` boolean property. This allows the selected rating to be deselected, effectively resetting the rating to a state where no value is selected. ### Resettable Our Angular Rating component allows users to assign and reset a star rating within a user interface. In the example below, we use the a button to clear the selected value by passing `null` value. ### Read only Set the Angular Rating component to read-only by adding `readOnly` property. This disables interaction, preventing users from changing the displayed rating value. ### Disabled Add the `disabled` boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing. ### Tooltips Enable descriptive text on hover by adding `tooltips` prop. This provides immediate feedback or guidance as the user interacts with the rating items. For custom messages, provide an array of labels corresponding to each rating value to enhance the user's understanding of each rating level. ### Sizes Larger or smaller Angular rating component? Add `size="lg"` or `size="sm"` for additional sizes. ### Precision Adjust the granularity of the Rating component by setting `precision` prop. This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback. Valid values: `1 | 0.5 | 0.25 | 0.125`. ### Number of items Control the total number of rating items displayed by using `itemCount` property. You can create a Angular Rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity. ### Custom icons Customize the Angular Rating component with your choice of SVG icons by assigning new values to the `activeIcon` and `icon` properties. This allows for a unique look tailored to the design language of your site or application. The Rating component can be customized with either SVG or font icons, allowing for visual alignment with your application's design. You can specify different icons for each rating value to enhance user interaction. In the example below, we demonstrate how to set custom icons using SVG, allowing for detailed customization of the visual elements within the Rating component. In the example below, we use font icons from the CoreUI Icons set. In the `activeIcon` configuration, we also apply the utility class `text-danger` to change the icon's color to red when it is active For a more dynamic experience, define different icons for each rating value, enhancing the visual feedback: ### Custom feedback The Angular Rating component integrates interactive star ratings with dynamic textual feedback using other components from CoreUI. It enables users to select a rating that updates the display and label in real-time, enhancing the interactive experience. Hover effects provide immediate feedback on potential ratings before selection, ensuring an intuitive user interface. ## Forms Angular handles user input through reactive and template-driven forms. CoreUI Time Picker supports both types. ### Reactive ### Template driven ### Signal forms ## Customizing ### CSS variables Angular Rating use local CSS variables on `.rating` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-rating-gap: #{$rating-gap}; --cui-rating-transition: #{$rating-transition}; --cui-rating-item-height: #{$rating-item-height}; --cui-rating-item-color: #{$rating-item-color}; --cui-rating-item-scale-transform: #{$rating-item-scale-transform}; --cui-rating-item-active-color: #{$rating-item-active-color}; --cui-rating-item-icon: #{escape-svg($rating-item-icon)}; ``` #### How to use CSS variables ```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html ; ``` ### SASS variables ```scss $rating-gap: .0625rem !default; $rating-transition: color .15s ease-out, transform .15s ease-out !default; $rating-item-height-sm: 1rem !default; $rating-item-height: 1.25rem !default; $rating-item-height-lg: 1.5rem !default; $rating-item-color: var(--cui-tertiary-color) !default; $rating-item-scale-transform: scale(1.2) !default; $rating-item-active-color: var(--cui-warning) !default; $rating-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M470.935,194.043,333.8,171.757,270.227,48.22a16,16,0,0,0-28.454,0L178.2,171.757,41.065,194.043A16,16,0,0,0,32.273,221.1l97.845,98.636L108.936,457.051a16,16,0,0,0,23.02,16.724L256,411.2l124.044,62.576a16,16,0,0,0,23.02-16.724L381.882,319.74,479.727,221.1A16,16,0,0,0,470.935,194.043Z'%3E%3C/path%3E%3C/svg%3E") !default; ``` ## API reference ### Rating Module ```typescript import { RatingModule } from '@coreui/angular-pro'; @NgModule({ imports: [RatingModule,] }) export class AppModule() { } ``` ### c-rating _component_ ```jsx import { RatingComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `activeIcon` | `string[]` | `[]` | The default icon to display when the item is selected. | | `allowClear` | `boolean` | `false` | Enables the clearing upon clicking the selected item again. | | `ariaLabel` | `object` | `(value, itemCount) => `${value} of ${itemCount}`` | Function that returns the accessible label (`aria-label`) for each rating item. Receives the item's value and the total item count. | | `disabled` | `boolean` | `false` | Toggle the disabled state for the component. | | `highlightOnlySelected` | `boolean` | `false` | If enabled, only the currently selected icon will be visibly highlighted. | | `icon` | `string[]` | `[]` | The default icon to display when the item is not selected. | | `itemCount` | `number` | `5` | Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc. | | `precision` | `number` | `1` | Minimum increment value change allowed. | | `readOnly` | `boolean` | `false` | Toggle the readonly state for the component. | | `size` | `'' \| 'sm' \| 'lg' \| 'custom'` | `undefined` | Size the component small, large, or custom if you define custom icons with custom height. | | `tooltips` | `boolean \| string[]` | `undefined` | Enable tooltips with default values or set specific labels for each icon. | | `value` | `string \| number \| null` | `null` | The `value` attribute of component. | ### Events | Name | Description | | --- | --- | | `hoverValueChange` | Event emitted on `mouseenter` and `mouseleave`. | | `valueChange` | Emitted when `value` changes. | --- # Angular Stepper > Angular Stepper Component – Multi-Step Form Wizard for Angular _Added in 5.5.2._ Build multi-step forms and wizards easily with the Angular Stepper component. Create advanced form flows with custom indicators, validation, and flexible layouts for your Angular applications. The Angular Stepper component helps you build intuitive, multi-step form experiences (Form Wizards) for your Angular applications. It supports horizontal and vertical layouts, built-in form validation, custom indicators, and seamless integration with Angular forms. If you need a Form Wizard in Angular, or a fully customizable Angular Stepper, this component is a go to solution. ## Examples This example shows a simple multi-step form wizard built using the Angular Stepper component. Each step defines its content. Internal step navigation can be managed through provided stepper methods. Use this setup when you need a basic horizontal stepper without advanced customizations. ### Vertical indicator The step indicators are displayed vertically above the labels using the `stepButtonLayout="vertical"` prop, while the form content remains laid out horizontally. This option is useful when you want a more compact and visually balanced look for the step navigation, especially in narrower layouts. Use `stepButtonLayout="vertical"` when you want a clear visual separation of steps without changing the main content flow. ### Vertical layout This example shows a fully vertical multi-step form wizard created with the Angular Stepper component. By using the `layout="vertical"` prop, both the step indicators and the step content are stacked vertically. This layout is ideal for mobile devices or designs where vertical flow is preferred. Choose `layout="vertical"` if you want the entire wizard to guide users in a top-to-bottom progression. ### Linear Form Wizard By default, the Angular Component behaves as a linear wizard: users must complete each step sequentially before moving to the next one. Linear mode is enabled by default `[linear]="true"`, users cannot skip steps. They must finish the current step to unlock the next. Use a Linear Angular Stepper when you need a guided and controlled experience, such as: - Checkout process - Registration wizard - Multistep forms with validation This ensures data integrity and improves the user experience by keeping the flow focused. ### Non-linear Stepper You can configure the Angular Stepper Component to behave as non-linear, allowing users to jump freely between steps without validation restrictions. Set `[linear]="false"` property to allow non-sequential navigation. Use a Non-linear Angular Stepper when users should have full control over navigation, for example: - Survey forms - Onboarding flows where some steps are optional - Complex multi-section forms where order doesn't matter In non-linear mode, all steps are accessible unless explicitly disabled. ## Form Validation The Angular Stepper component natively supports step-by-step form validation. Use this feature to ensure required fields are filled and basic data integrity is maintained throughout the multi-step process without needing any additional code. The following example demonstrates how to use the Angular Stepper with HTML5 validation and template-driven form. Each step contains a form, and when the `validation` prop is enabled, users must complete each form before proceeding to the next step. If a form is invalid, the stepper prevents navigation until the form is valid. ### Browser Validation ### Custom Validation Beyond default HTML5 validation, you can define custom validation rules for each step. This allows you to implement complex form validation logic per step. In the example below using Angular reactive forms, custom validation triggers additional UI feedback. ### Skip validation To completely skip form validation and allow free navigation between steps, add `[validation]="false"` to the Angular Stepper component: ## Accessibility (a11y) The CoreUI Stepper Component is built with accessibility in mind: - Each step button is assigned proper ARIA roles (`role="tab"`) and attributes like `aria-selected`, `aria-controls`, and `tabindex`. - Step contents (stepper-pane) use `role="tabpanel"` and are properly linked to their trigger buttons. - Live updates are announced to screen readers with `aria-live="polite"`. - Keyboard navigation is fully supported. Thanks to these features, your form wizard will be fully compliant with WCAG and modern accessibility standards without additional work. ### Keyboard Support The Stepper component supports comprehensive keyboard navigation out of the box:
Key Function Note
ArrowLeft Moves focus to previous step layout="horizontal"
ArrowRight Moves focus to next step
ArrowUp Moves focus to previous step layout="vertical"
ArrowDown Moves focus to next step
Home Moves focus to the first step [linear]="false"
End Moves focus to the last step
## Customizing ### CSS variables Angular CoreUI Stepper use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss .stepper { --cui-stepper-steps-gap: #{$stepper-steps-gap}; --cui-stepper-step-gap: #{$stepper-step-gap}; --cui-stepper-step-button-width: #{$stepper-step-button-width}; --cui-stepper-step-button-color: #{$stepper-step-button-color}; --cui-stepper-step-button-active-color: #{$stepper-step-button-active-color}; --cui-stepper-step-button-complete-color: #{$stepper-step-button-complete-color}; --cui-stepper-step-button-disabled-color: #{$stepper-step-button-disabled-color}; --cui-stepper-step-indicator-width: #{$stepper-step-indicator-width}; --cui-stepper-step-indicator-height: #{$stepper-step-indicator-height}; --cui-stepper-step-indicator-bg: #{$stepper-step-indicator-bg}; --cui-stepper-step-indicator-color: #{$stepper-step-indicator-color}; --cui-stepper-step-indicator-border-width: #{$stepper-step-indicator-border-width}; --cui-stepper-step-indicator-border-color: #{$stepper-step-indicator-border-color}; --cui-stepper-step-indicator-transition: #{$stepper-step-indicator-transition}; --cui-stepper-step-indicator-active-color: #{$stepper-step-indicator-active-color}; --cui-stepper-step-indicator-active-bg: #{$stepper-step-indicator-active-bg}; --cui-stepper-step-indicator-active-border-color: #{$stepper-step-indicator-active-border-color}; --cui-stepper-step-indicator-complete-color: #{$stepper-step-indicator-complete-color}; --cui-stepper-step-indicator-complete-bg: #{$stepper-step-indicator-complete-bg}; --cui-stepper-step-indicator-complete-border-color: #{$stepper-step-indicator-complete-border-color}; --cui-stepper-step-indicator-disabled-color: #{$stepper-step-indicator-disabled-color}; --cui-stepper-step-indicator-disabled-bg: #{$stepper-step-indicator-disabled-bg}; --cui-stepper-step-indicator-disabled-border-color: #{$stepper-step-indicator-disabled-border-color}; --cui-stepper-step-indicator-focus-box-shadow: #{$stepper-step-indicator-focus-box-shadow}; --cui-stepper-step-indicator-icon: #{$stepper-step-indicator-icon}; --cui-stepper-step-indicator-icon-color: #{$stepper-step-indicator-icon-color}; --cui-stepper-step-indicator-icon-size: #{$stepper-step-indicator-icon-size}; --cui-stepper-step-connector-height: #{$stepper-step-connector-height}; --cui-stepper-step-connector-gap: #{$stepper-step-connector-gap}; --cui-stepper-step-connector-bg: #{$stepper-step-connector-bg}; --cui-stepper-step-connector-complete-bg: #{$stepper-step-connector-complete-bg}; --cui-stepper-step-connector-transition: #{$stepper-step-connector-transition}; --cui-stepper-step-content-transition: #{$stepper-step-content-transition}; } ``` #### How to use CSS variables ### SASS variables ```scss $stepper-steps-gap: .5rem !default; $stepper-step-gap: .5rem !default; $stepper-step-button-width: 8rem !default; $stepper-step-button-color: var(--cui-secondary-color) !default; $stepper-step-button-active-color: var(--cui-secondary-color) !default; $stepper-step-button-complete-color: var(--cui-secondary-color) !default; $stepper-step-button-disabled-color: var(--cui-secondary-color) !default; $stepper-step-indicator-width: 2rem !default; $stepper-step-indicator-height: 2rem !default; $stepper-step-indicator-color: var(--cui-secondary) !default; $stepper-step-indicator-bg: transparent !default; $stepper-step-indicator-border-width: var(--cui-border-width) !default; $stepper-step-indicator-border-color: var(--cui-border-color) !default; $stepper-step-indicator-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $stepper-step-indicator-active-color: var(--cui-primary) !default; $stepper-step-indicator-active-bg: rgba(var(--cui-primary-rgb), .05) !default; $stepper-step-indicator-active-border-color: var(--cui-primary) !default; $stepper-step-indicator-complete-color: var(--cui-white) !default; $stepper-step-indicator-complete-bg: var(--cui-primary) !default; $stepper-step-indicator-complete-border-color: var(--cui-primary) !default; $stepper-step-indicator-disabled-color: var(--cui-secondary) !default; $stepper-step-indicator-disabled-bg: transparent !default; $stepper-step-indicator-disabled-border-color: var(--cui-border-color) !default; $stepper-step-indicator-focus-box-shadow: $focus-ring-box-shadow !default; $stepper-step-indicator-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='var(--ci-primary-color, currentColor)' points='200.359 382.269 61.057 251.673 82.943 228.327 199.641 337.731 428.686 108.687 451.314 131.313 200.359 382.269' class='ci-primary'/%3E%3C/svg%3E") !default; $stepper-step-indicator-icon-color: var(--cui-white) !default; $stepper-step-indicator-icon-size: 1rem !default; $stepper-step-connector-height: .125rem !default; $stepper-step-connector-gap: 1rem !default; $stepper-step-connector-bg: var(--cui-secondary-bg) !default; $stepper-step-connector-complete-bg: var(--cui-primary) !default; $stepper-step-connector-transition: background-color .15s ease-in-out !default; $stepper-step-content-transition: height .3s ease-in-out !default; ``` ### Button Templates The Angular Stepper component allows you to customize step buttons using templates. This enables you to create unique step indicators, labels, and even add icons or custom HTML content. ## API reference ### Stepper Module ```ts import { NgModule } from '@angular/core'; import { StepperModule } from '@coreui/angular'; @NgModule({ imports: [StepperModule] }) export class CustomAppModule {} ``` ### Stepper Standalone ```ts import { Component } from '@angular/core'; import { StepContentComponent, StepperComponent } from '@coreui/angular'; @Component({ template: `

This is the content of step 1.

 `, imports: [StepperComponent, StepContentComponent], standalone: true }) export class CustomAppComponent {} ``` ### c-stepper _component_
```jsx import { StepperComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `activeStepIndex` | `number` | `undefined` | Currently active step index. When not set, falls back to `defaultActiveStepIndex` (`0`). | | `defaultActiveStepIndex` | `number` | `0` | Initial active step index | | `id` | `string` | `'stepper-'` | Unique identifier for the Stepper component. If not provided, a default ID will be generated. | | `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation - `'horizontal'`: Step indicators and content are placed horizontally (default). - `'vertical'`: Step indicators and content are stacked vertically. Choose `'vertical'` layout for mobile or narrow designs. | | `linear` | `boolean` | `true` | Enforces linear progression (cannot skip steps). - `true`: Users must complete steps sequentially. - `false`: Users can jump freely between steps. | | `stepButtonLayout` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout of the step indicator (icon and label) - `'vertical'` – Places the label below the indicator icon. - `'horizontal'` – Places the label beside the indicator icon (default). This prop has no effect when `layout="vertical"` is used. | | `validation` | `boolean` | `false` | Enforces validation of steps. Each step must be valid before advancing to the next. | ### Events | Name | Description | | --- | --- | | `activeStepIndexChange` | Event fired when the active step changes in the Angular Stepper component. | | `finished` | Event fired when the user completes the last step of the Form Wizard. Use this to trigger a submit action or redirect after the final step. | | `onReset` | Event fired when the user triggers the reset() action. Use this to reset or clear related form data. | ##### Methods | name | description | type | | ---- | ----------- | ---- | | `finish` | Triggers the finish action, marking the stepper as completed. | `void` | | `reset` | Resets the stepper to its initial state, clearing all steps and active index. | `void` | | `next` | Moves to the next step, if available and valid. | `void` | | `prev` | Moves to the previous step, if available. | `void` | {/* | `stepValidationComplete` | Emits when the validation of the current step is complete | `boolean` |*/}
### c-stepper-step _component_
```jsx import { StepperStepComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `disabled` | `boolean` | `false` | Whether the step is disabled. | | `id` | `string` | `undefined` | Unique identifier for the step. | | `indicator` | `string \| TemplateRef` | `(step index will be used if not provided)` | Optional indicator to display in the step. Can be a string or a TemplateRef for custom icons. | | `indicatorCtx` | `unknown` | `undefined` | Context for the indicator template. If `indicator` is a TemplateRef, this context will be passed to it. | | `label` | `string \| TemplateRef` | - | Label for the step, which is required. Can be a string or a TemplateRef for custom labels. | | `labelCtx` | `unknown` | `undefined` | Context for the label template. If `label` is a TemplateRef, this context will be passed to it. | | `valid` | `boolean \| null` | `undefined` | Whether the step is valid. This can be used to indicate if the step has been completed successfully. |
--- # Angular Input Group Component > Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. ## Basic example Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `cLabel` outside the input group. ## Wrapping Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`. ## Sizing Add the relative form sizing classes to the `c-input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element. **Sizing on the individual input group elements isn't supported.** ## Checkboxes and radios Place any checkbox or radio option within an input group's addon instead of text. ## Multiple inputs While multiple `input` fields are supported visually, validation styles are only available for input groups with a single `cFormControl`. ## Multiple addons Multiple add-ons are supported and can be mixed with checkbox and radio input versions. ## Button addons Button add-ons are also supported. ## Dropdown addons Dropdown add-ons are supported too. ## Segmented buttons Split dropdown add-ons are supported either. ## Custom forms Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. ### Custom select ### Custom file input ## API reference ### Form Module ### c-input-group _component_ ```jsx import { InputGroupComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `sizing` | `'' \| 'sm' \| 'lg'` | - | Size the component small or large. | ### cInputGroupText _directive_ ```jsx import { InputGroupTextDirective } from '@coreui/angular' ``` --- # Angular Floating Labels Component > Angular floating label component. Create beautifully simple form labels that float over your input fields. ## Example Wrap a pair of `cFormControl` and `label` elements in `cFormControl` to enable floating labels with textual form fields. A `placeholder` is required on each `input` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `cFormControl` must come first so we can utilize a sibling selector (ex., `~`). When there's a `value` already defined, `cLabel` will automatically adjust to their floated position. ## Textareas By default, `textarea` will be the same height as `input`. To set a custom height on your `textarea`, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS). ## Selects Other than `input`, floating labels are only available on `cSelect`. They work in the same way, but unlike `input`, it always shows the `cLabel` in its floated state. **Selects with `size` and `multiple` are not supported.** ## Layout When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes. ## API reference ### Form Module ### cFormFloating _directive_ ```jsx import { FormFloatingDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cFormFloating` | `boolean` | `true` | Enable floating labels | --- # Angular Form Layout Component > Give your forms some structure — from inline to horizontal to custom grid implementations — with our Angular form layout options. ## Forms Every group of form fields should reside in a `form` element. CoreUI provides no default styling for the `form` element, but there are some powerful browser features that are provided by default. - New to browser forms? Consider reviewing the [MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes. - `cButton` within a `form` default to `type="submit"`, so strive to be specific and always include a type. - You can disable every form element within a form with the `disabled` attribute on the `form`. Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. ## Utilities [Margin utilities](https://coreui.io/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency. ## Form grid More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. ## Gutters By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction. More complex layouts can also be created with the grid system. ## Horizontal form Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `cLabel="col"` to your `label` as well so they're vertically centered with their associated form controls. At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline. ## Horizontal form label sizing Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `cLabel` or `legend` to correctly follow the size of `.form-control-lg` and `.form-control-sm`. ## Column sizing As shown in the previous examples, our grid system allows you to place any number of `c-col` within a `c-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining cols equally split the rest, with specific column classes like `c-col [sm]="7"`. ## Auto-sizing The example below uses a flexbox utility to vertically center the contents and changes to `c-col xs="auto"` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. You can then remix that once again with size-specific column classes. ## Inline forms Use the `c-col xs="auto"` to create horizontal layouts. By adding gutter modifier classes, we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `c-form-check` align properly. --- # Angular Time Picker Component > Create consistent cross-browser and cross-device Angular time picker. ## Examples ### 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. ### Filtered Add filter callback functions to limit selectable values. ### with Footer ## 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 Time Picker supports both types. ### Reactive ### Template-driven ## API reference ### TimePicker Module ```typescript import { TimePickerModule, DropdownModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ TimePickerModule, DropdownModule, SharedModule ] }) export class AppModule() { } ``` ### c-time-picker _component_ ```jsx import { TimePickerComponent } from '@coreui/angular-pro' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cleaner` | `boolean` | `true` | Toggle visibility or set the content of the cleaner button. | | `dateTimeFormatOptions` | `DateTimeFormatOptions` | `{}` | Sets DateTime format options including timeZone | | `disabled` | `boolean` | `false` | Toggle the disabled state for the component. | | `filterHours` | `object` | `undefined` | Filter available hours to pick. | | `filterMinutes` | `object` | `undefined` | Filter available minutes to pick. | | `filterSeconds` | `object` | `undefined` | Filter available seconds to pick. | | `indicator` | `boolean` | `true` | Toggle visibility or set the content of the input indicator. | | `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. | | `placeholder` | `string` | `'Select time'` | Specifies a short hint visible in time input. | | `seconds` | `boolean` | `false` | Toggle seconds visibility. | | `size` | `'' \| 'sm' \| 'lg'` | `undefined` | Size the component small or large. | | `time` | `Date` | `undefined` | Initially selected time. | | `valid` | `boolean` | `undefined` | Toggle visual validation feedback. | | `variant` | `'roll' \| 'select'` | `'roll'` | Set the time picker variant to a roll or select. | | `visible` | `boolean` | `false` | Toggle the visibility of dropdown timepicker menu component. | ### Events | Name | Description | | --- | --- | | `timeChange` | Event emitted on `time` change. | --- # Angular Form Validation > Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and Angular Forms Validation. ## Custom styles For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `form`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls. Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. ## Browser defaults Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults with `ngNativeValidate`. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback. While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript. ## Server side We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `valid` boolean property. For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one id to be referenced, in case the field already points to additional form text). Input group needs an extra `.has-validation` class to fix border radius issues with `c-form-feedback` element. ## Supported elements Validation styles are available for the following form controls and components: - `input cFormControl` - `select cSelect` - `c-form-check` ## Tooltips If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup. ## Enhanced example With Angular validators. --- # Angular Accordion Component > Build vertically collapsing accordions in combination with our Angular Collapse component. ## Examples Click the accordions below to expand/collapse the accordion content. ### Flush Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. ### Always open Make accordion items stay open when another item is opened. ## API ### Accordion Module ```typescript import { AccordionModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ AccordionModule, SharedModule ] }) export class AppModule(){} ``` ### c-accordion _component_ ```jsx import { AccordionComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `alwaysOpen` | `boolean` | `false` | Make accordion items stay open when another item is opened | | `flush` | `boolean` | `false` | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | ### c-accordion-item _component_ ```jsx import { AccordionItemComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `visible` | `boolean` | `false` | Toggle an accordion item programmatically | ### cAccordionButton _directive_ ```jsx import { AccordionButtonDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `collapsed` | `boolean` | `undefined` | Toggles an accordion button collapsed state. Use in accordionHeaderTemplate. | | `type` | `string` | `'button'` | Default type for cAccordionButton | ### Shared Module ### cTemplateId _directive_ ```jsx import { TemplateIdDirective } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `cTemplateId` | `string` | - | Predefined template name (id) for optional slots | _templates:_ |template id| description| |---|---| |`accordionHeader` | header content only| |`accordionBody` | body content only| |`accordionHeaderTemplate` | header full template| |`accordionBodyTemplate` | body full template| _internals:_ ##### AccordionService _service_ |prop|type|default|description| |---|---|---|---| |`items`|`AccordionItemComponent[]`|_[ ]_| array of accordion items| |`alwaysOpen`|`boolean`|_false_| in sync with `AccordionComponent.alwaysOpen` prop| --- # Angular Alert Component > Angular alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages. ## Examples ### Colors Angular Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing). ### Link color Use the `cAlertLink` directive class to quickly provide matching colored links within any alert. ### Additional content Alert can also incorporate supplementary HTML elements like heading with `cAlertHeading`, paragraph, and divider. ### Dismissing Alerts can also be easily dismissed. Just add the `dismissible` prop and `fade` for animation. To remove an alert from the DOM, you can use `*ngIf` directive. ### Custom template Use `alertButtonCloseTemplate` to customize close button. ### Icons You can use Icons and flexbox utilities to create alerts with icons. ## API reference ### Alert Module ```typescript import { AlertModule } from '@coreui/angular'; @NgModule({ imports: [AlertModule,] }) export class AppModule(){} ``` ### c-alert _component_ ```jsx import { AlertComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `color` | `string` | `'primary'` | Sets the color context of the component to one of CoreUI’s themed colors. | | `dismissible` | `boolean` | `false` | Optionally adds a close button to the alert and allow it to self-dismiss. | | `fade` | `boolean` | `false` | Adds animation for dismissible alert. | | `role` | `string` | `'alert'` | Default role for alert | | `variant` | `'solid'` | `undefined` | Set the alert variant to a solid. | | `visible` | `boolean` | `true` | Toggle the visibility of the alert component. | ### Events | Name | Description | | --- | --- | | `visibleChange` | Event triggered on the alert visibility change. | ### cAlertHeading _directive_ ```jsx import { AlertHeadingDirective } from '@coreui/angular' ``` ### cAlertLink _directive_ ```jsx import { AlertLinkDirective } from '@coreui/angular' ``` --- # Angular Avatar Component > Angular Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters. ## Image avatars ## Letter avatars ## Rounded avatars Use the `shape="rounded"` prop to make avatars squared with rounded corners. ## Square avatars Use the `shape="rounded-0"` prop to make avatars squared ## Sizes Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes. ## Avatars with status ## Customizing ### CSS variables Angular multi selects use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-avatar-width: #{$avatar-width}; --cui-avatar-height: #{$avatar-height}; --cui-avatar-font-size: #{$avatar-font-size}; --cui-avatar-border-radius: #{$avatar-border-radius}; --cui-avatar-status-width: #{$avatar-status-width}; --cui-avatar-status-height: #{$avatar-status-height}; --cui-avatar-status-border-radius: #{$avatar-status-border-radius}; ``` #### How to use CSS variables ```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html
``` ### SASS variables ```scss $avatar-width: 2rem; $avatar-height: 2rem; $avatar-font-size: .8rem; $avatar-border-radius: 50em; $avatar-status-width: .5rem; $avatar-status-height: .5rem; $avatar-status-border-radius: 50em; $avatar-transition: margin .15s; $avatar-sizes: ( sm: ( width: 1.5rem, height: 1.5rem, font-size: .6rem, status-width: .4rem, status-height: .4rem ), md: ( width: 2.5rem, height: 2.5rem, font-size: 1rem, status-width: .7rem, status-height: .7rem ), lg: ( width: 3rem, height: 3rem, font-size: 1.2rem, status-width: .8rem, status-height: .8rem ), xl: ( width: 4rem, height: 4rem, font-size: 1.6rem, status-width: 1rem, status-height: 1rem ), ); ``` ## API ### Avatar Module ```typescript import { AvatarModule } from '@coreui/angular'; @NgModule({ imports: [AvatarModule,] }) export class AppModule(){} ``` ### c-avatar _component_ ```jsx import { AvatarComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `alt` | `string` | `''` | The alt attribute for the img element alternate text. | | `color` | `string` | - | Sets the background color context of the component to one of CoreUI’s themed colors. | | `shape` | `string` | - | Select the shape of the component. | | `size` | `Omit` | `''` | Size the component small, large, or extra large. | | `src` | `string` | - | The src attribute for the img element. | | `status` | `string` | - | Sets the color context of the status indicator to one of CoreUI’s themed colors. | | `textColor` | `string` | - | Sets the text color of the component to one of CoreUI’s themed colors via TextColorDirective | --- # Angular Badge Component > Angular badge component is small count and labeling component. ## Example Badge component scales to suit the size of the parent element by using relative font sizing and `em` units. ## Contextual variations Add any of the below-mentioned `color` props to modify the presentation of a badge. ## Pill badges Apply the `shape="rounded-pill"` prop to make badges rounded. ## Positioned badges Use `position` prop to place a `c-badge` component it in the corner of a link or button. ## API ### Badge Module ```ts import { NgModule } from '@angular/core'; import { BadgeModule } from '@coreui/angular'; @NgModule({ imports: [BadgeModule] }) export class CustomAppModule {} ``` ### Badge Standalone ```ts import { Component } from '@angular/core'; import { BadgeComponent } from '@coreui/angular'; @Component({ template: `42`, imports: [BadgeComponent], standalone: true }) export class CustomAppComponent {} ``` ### c-badge _component_ ```jsx import { BadgeComponent } from '@coreui/angular' ``` ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `color` | `string` | - | Sets the color context of the component to one of CoreUI’s themed colors. | | `position` | `BadgePositions` | - | Position badge in one of the corners of a link or button. | | `shape` | `string` | - | Select the shape of the component. | | `size` | `'sm'` | - | Size the component small. | | `textBgColor` | `string` | - | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. via TextBgColorDirective | | `textColor` | `string` | - | Sets the text color of the component to one of CoreUI’s themed colors. via TextColorDirective | --- # Angular Breadcrumb Component > Angular Breadcrumb navigation component indicates the current location within a navigational hierarchy that automatically adds separators. ## Example The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through `::before` and content. ## Dividers Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--coreui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time. When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: ```scss $breadcrumb-divider: quote(">"); ``` It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. ```scss $breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E"); ``` You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`. ```scss $breadcrumb-divider: none; ``` ## Accessibility Since breadcrumbs provide navigation, it's useful to add a significant label such as `aria-label="breadcrumb"` to explain the type of navigation implemented in the `