# CoreUI React.js documentation

> CoreUI for React.js is a UI component library written in TypeScript and ready for your next React.js project.


---

# Introduction

> CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project. Learn how to include CoreUI for React.js in your project.

## Installation

### Npm

```bash tab={"label":"CoreUI"}
npm install @coreui/react @coreui/coreui
```

```bash tab={"label":"CoreUI PRO"}
npm install @coreui/react-pro @coreui/coreui-pro
```

### Yarn

```bash tab={"label":"CoreUI"}
yarn add @coreui/react @coreui/coreui
```

```bash tab={"label":"CoreUI PRO"}
yarn add @coreui/react-pro @coreui/coreui-pro
```

## Using components

```jsx tab={"label":"CoreUI"}
import { CAlert } from '@coreui/react';
```

```jsx tab={"label":"CoreUI PRO"}
import { CAlert } from '@coreui/react-pro';
```

## Stylesheets

React components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS library, but you can also use them with the bootstrap CSS library. That is possible because the `@coreui/coreui` library is compatible with Bootstrap, it just extends its functionalities. The only exceptions are custom CoreUI and CoreUI PRO components, which don't exist in the Bootstrap ecosystem.

### CoreUI and CoreUI PRO CSS files

###### Basic usage

```js tab={"label":"CoreUI"}
import '@coreui/coreui/dist/css/coreui.min.css'
```

```js tab={"label":"CoreUI PRO"}
import '@coreui/coreui-pro/dist/css/coreui.min.css'
```

### Bootstrap CSS files

###### Installation

```bash
npm install bootstrap
```

###### Basic usage

```js
import 'bootstrap/dist/css/bootstrap.min.css'
```


---

# Accessibility

> A brief overview of CoreUI for React features and limitations for the creation of accessible content.

CoreUI for React 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 React 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 React that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 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 React 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 React itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

### Interactive components

CoreUI for React 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 [<abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](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 React components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 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 React 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
<p className="text-danger">
  <span className="visually-hidden">Danger: </span>
  This action is not reversible
</p>
```

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
<a className="visually-hidden-focusable" href="#content">Skip to main content</a>
```

### Reduced motion

CoreUI for React 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 React (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 React 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/)


---

# LLMs.txt

> LLM-optimized documentation endpoints for CoreUI for React — 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 React 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/react/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/react/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/react/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: [/react/docs/components/accordion.md](https://coreui.io/react/docs/components/accordion.md)


---

# MCP Server

> Bring the CoreUI for React 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 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 react
```

### 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", "react"]
    }
  }
}
```

### 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", "react"]
    }
  }
}
```

### Windsurf

Edit `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "coreui-docs": {
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "react"]
    }
  }
}
```

### Claude Desktop

Edit `claude_desktop_config.json` (Settings → Developer → Edit Config):

```json
{
  "mcpServers": {
    "coreui-docs": {
      "command": "npx",
      "args": ["-y", "@coreui/docs-mcp", "--framework", "react"]
    }
  }
}
```

### 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 react
```

```toml
[mcp_servers.coreui-docs]
command = "npx"
args = ["-y", "@coreui/docs-mcp", "--framework", "react"]
```

## 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 <list>` | `COREUI_DOCS_FRAMEWORKS` | `bootstrap,react,vue` | Enabled editions (comma-separated). The first is the default for tools. |
| `--base-url <url>` | `COREUI_DOCS_BASE_URL` | `https://coreui.io` | Origin of the CoreUI site. The `/<framework>/docs` path is appended automatically — override only for a staging or self-hosted mirror. |
| `--ttl <minutes>` | `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 React Multi Select component?"
- "What props does the CoreUI React Date Picker accept?"
- "Show me the CoreUI React 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 our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.

Utilize our source Sass files to take advantage of variables, maps, mixins, and more.

## File structure

Whenever possible, avoid modifying CoreUI's 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/
├── scss
│   └── custom.scss
└── node_modules/
    └── @coreui/coreui
        ├── js
        └── 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's source files separate from your own.

```text
your-project/
├── scss
│   └── custom.scss
└── @coreui/coreui/
    ├── js
    └── scss
```

## Importing

In your `custom.scss`, you'll import CoreUI's 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.

```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";
```

```scss
// Custom.scss
// Option A: Include all of CoreUI

@import "../node_modules/@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 "../node_modules/@coreui/coreui/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required CoreUI stylesheets
@import "../node_modules/@coreui/coreui/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/@coreui/coreui/scss/maps";
@import "../node_modules/@coreui/coreui/scss/mixins";
@import "../node_modules/@coreui/coreui/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/@coreui/coreui/scss/utilities";
@import "../node_modules/@coreui/coreui/scss/reboot";
@import "../node_modules/@coreui/coreui/scss/type";
@import "../node_modules/@coreui/coreui/scss/images";
@import "../node_modules/@coreui/coreui/scss/containers";
@import "../node_modules/@coreui/coreui/scss/grid";
@import "../node_modules/@coreui/coreui/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/@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 import stack from our `coreui.scss` file as your starting point.

## 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:

```scss
@use "@coreui/coreui/scss/coreui" with (
  $body-bg: #000,
  $body-color: #111
)
```

```scss
// Required
@import "../node_modules/@coreui/coreui/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/@coreui/coreui/scss/variables";
@import "../node_modules/@coreui/coreui/scss/maps";
@import "../node_modules/@coreui/coreui/scss/mixins";
@import "../node_modules/@coreui/coreui/scss/root";

// Optional CoreUI components here
@import "../node_modules/@coreui/coreui/scss/reboot";
@import "../node_modules/@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
$primary: #0074d9;
$danger: #ff4136;
```

Later on, these variables are set in CoreUI's `$theme-colors` map:

```scss
$theme-colors: (
  "primary": $primary,
  "danger": $danger
);
```

### 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`.

```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";
```

```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:

```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";
```

```scss
// Required
@import "../node_modules/@coreui/coreui/scss/functions";
@import "../node_modules/@coreui/coreui/scss/variables";
@import "../node_modules/@coreui/coreui/scss/maps";
@import "../node_modules/@coreui/coreui/scss/mixins";
@import "../node_modules/@coreui/coreui/scss/root";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/@coreui/coreui/scss/reboot";
@import "../node_modules/@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/bootstrap/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's `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 functions

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 React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.

Customize CoreUI for React 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's `@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/bootstrap/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/bootstrap/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/bootstrap/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/bootstrap/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/bootstrap/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's 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's 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.


---

# Breakpoints

> Breakpoints are the triggers in CoreUI for React.js 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's 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 React.js 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 |
| --- | --- | --- |
| Extra small | <em>None</em> | &lt;576px |
| Small | `sm` | &ge;576px |
| Medium | `md` | &ge;768px |
| Large | `lg` | &ge;992px |
| Extra large | `xl` | &ge;1200px |
| Extra extra large | `xxl` | &ge;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/bootstrap/docs/layout/grid#sass).

## Media queries

Since CoreUI for React.js 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 React.js 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) { ... }
```


---

# Containers

> Containers are a fundamental building block of CoreUI for React.js that 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 React.js 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 React.js comes with three different containers:

- `<CContainer>`, which sets a `max-width` at each responsive breakpoint
- `<CContainer fluid>`, which is `width: 100%` at all breakpoints
- `<CContainer {sm|md|lg|xl|xxl}>`, which is `width: 100%` until the specified breakpoint

The table below illustrates how each container's `max-width` compares to the original `<CContainer>` and `<CContainer fluid>` across each breakpoint.

|  | Extra small<div className="fw-normal">&lt;576px</div> | Small<div className="fw-normal">&ge;576px</div> | Medium<div className="fw-normal">&ge;768px</div> | Large<div className="fw-normal">&ge;992px</div> | X-Large<div className="fw-normal">&ge;1200px</div> | XX-Large<div className="fw-normal">&ge;1400px</div> |
| --- | --- | --- | --- | --- | --- | --- |
| `.container` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-sm` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-md` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
| `.container-lg` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
| `.container-xl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1140px | 1320px |
| `.container-xxl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1320px |
| `.container-fluid` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> |

## Default container

Our default `<CContainer>` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.

```jsx
<CContainer>
  Content here
</CContainer>
```

## 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`s for each of the higher breakpoints. For example, `<CContainer sm>` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.

```jsx
<CContainer sm>100% wide until small breakpoint</CContainer>
<CContainer md>100% wide until medium breakpoint</CContainer>
<CContainer lg>100% wide until large breakpoint</CContainer>
<CContainer xl>100% wide until extra large breakpoint</CContainer>
<CContainer xxl>100% wide until extra extra large breakpoint</CContainer>
```

## Fluid containers

Use `<CContainer fluid>` for a full width container, spanning the entire width of the viewport.

```jsx
<CContainer fluid>
  Content here
</CContainer>
```

## API

### CContainer

```jsx
import { CContainer } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `fluid` | `boolean \| undefined` | - | Set container 100% wide, spanning the entire width of the viewport. |
| `lg` | `boolean \| undefined` | - | Set container 100% wide until large breakpoint. |
| `md` | `boolean \| undefined` | - | Set container 100% wide until medium breakpoint. |
| `sm` | `boolean \| undefined` | - | Set container 100% wide until small breakpoint. |
| `xl` | `boolean \| undefined` | - | Set container 100% wide until X-large breakpoint. |
| `xxl` | `boolean \| undefined` | - | Set container 100% wide until XX-large breakpoint. |


---

# 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) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol sm="auto">One of three columns</CCol>
    <CCol sm="auto">One of three columns</CCol>
    <CCol sm="auto">One of three columns</CCol>
  </CRow>
</CContainer>
```

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 `<CContainer>`.

## How it works

Breaking it down, here's how the grid system comes together:

- **Our grid supports [six responsive breakpoints](../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 `<CContainer>` for a responsive pixel width, `<CContainer fluid>` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `<CContainer 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](#row-columns) and [gutter classes](../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., `CCol xs={4}` spans four). `width`s are set in percentages so you always have the same relative sizing.

- **Gutters are also responsive and customizable.** [Gutter classes are available](../gutters) across all breakpoints, with all the same sizes as our [margin and padding spacing](https://coreui.io/bootstrap/docs/utilities/spacing/). Change horizontal gutters with `xs|sm|md|lg|xl|xxl={{ gutterX: * }}` classes, vertical gutters with `xs|sm|md|lg|xl|xxl={{ gutterY: * }}`, or all gutters with `xs|sm|md|lg|xl|xxl={{ gutter: * }}` classes. `xs|sm|md|lg|xl|xxl={{ gutter: 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's 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:

{<div className="table-responsive">
  <table className="table mb-4">
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">
          xs
          <div className="fw-normal">&lt;576px</div>
        </th>
        <th scope="col">
          sm
          <div className="fw-normal">&ge;576px</div>
        </th>
        <th scope="col">
          md
          <div className="fw-normal">&ge;768px</div>
        </th>
        <th scope="col">
          lg
          <div className="fw-normal">&ge;992px</div>
        </th>
        <th scope="col">
          xl
          <div className="fw-normal">&ge;1200px</div>
        </th>
        <th scope="col">
          xxl
          <div className="fw-normal">&ge;1400px</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th className="text-nowrap" scope="row">Container <code className="fw-normal">max-width</code></th>
        <td>None (auto)</td>
        <td>540px</td>
        <td>720px</td>
        <td>960px</td>
        <td>1140px</td>
        <td>1320px</td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row">Class prefix</th>
        <td><code>.col-</code></td>
        <td><code>.col-sm-</code></td>
        <td><code>.col-md-</code></td>
        <td><code>.col-lg-</code></td>
        <td><code>.col-xl-</code></td>
        <td><code>.col-xxl-</code></td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row"># of columns</th>
        <td colSpan={6}>12</td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row">Gutter width</th>
        <td colSpan={6}>1.5rem (.75rem on left and right)</td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row">Custom gutters</th>
        <td colSpan={6}><a href="../gutters">Yes</a></td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row">Nestable</th>
        <td colSpan={6}><a href="#nesting">Yes</a></td>
      </tr>
      <tr>
        <th className="text-nowrap" scope="row">Column ordering</th>
        <td colSpan={6}><a href="../columns#reordering">Yes</a></td>
      </tr>
    </tbody>
  </table>
</div>}

## Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `<CCol 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.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol>1 of 2</CCol>
    <CCol>2 of 2</CCol>
  </CRow>
  <CRow>
    <CCol>1 of 3</CCol>
    <CCol>2 of 3</CCol>
    <CCol>3 of 3</CCol>
  </CRow>
</CContainer>
```

### 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.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol>1 of 3</CCol>
    <CCol xs={6}>2 of 3 (wider)</CCol>
    <CCol>3 of 3</CCol>
  </CRow>
  <CRow>
    <CCol>1 of 3</CCol>
    <CCol xs={6}>2 of 3 (wider)</CCol>
    <CCol>3 of 3</CCol>
  </CRow>
</CContainer>
```

### Variable width content

Use `<CCol {breakpoint}="auto"` props to size columns based on the natural width of their content.

```jsx preview className="docs-example-row"
<CContainer>
  <div className="row justify-content-md-center">
    <CCol xs lg={2}>
      1 of 3
    </CCol>
    <CCol md="auto">Variable width content</CCol>
    <CCol xs lg={2}>
      3 of 3
    </CCol>
  </div>
  <CRow>
    <CCol>1 of 3</CCol>
    <CCol md="auto">Variable width content</CCol>
    <CCol xs lg={2}>
      3 of 3
    </CCol>
  </CRow>
</CContainer>
```

## 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 `<CCol>` and `<CCol xs={*}>` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `<CCol>`.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol>col</CCol>
    <CCol>col</CCol>
    <CCol>col</CCol>
    <CCol>col</CCol>
  </CRow>
  <CRow>
    <CCol xs={8}>col-8</CCol>
    <CCol xs={4}>col-4</CCol>
  </CRow>
</CContainer>
```

### Stacked to horizontal

Using a single set of `<CCol sm={*}>` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol sm={8}>col-sm-8</CCol>
    <CCol sm={4}>col-sm-4</CCol>
  </CRow>
  <CRow>
    <CCol sm>col-sm</CCol>
    <CCol sm>col-sm</CCol>
    <CCol sm>col-sm</CCol>
  </CRow>
</CContainer>
```

### 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.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol md={8}>.col-md-8</CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
  </CRow>
  <CRow>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
  </CRow>
  <CRow>
    <CCol xs={6}>.col-6</CCol>
    <CCol xs={6}>.col-6</CCol>
  </CRow>
</CContainer>
```

### Row columns

Use the responsive `{breakpoint}={{ cols: * }}` classes to quickly set the number of columns that best render your content and layout. Whereas normal `<CCol xs={*}>` classes apply to the individual columns (e.g., `<CCol xs={4}>`), the row columns classes are set on the parent `<CRow>` as a shortcut. With `{breakpoint}={{ cols: '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.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 2 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 3 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 'auto' }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 4 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 4 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol xs={6}>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 4 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

## API

### CContainer

```jsx
import { CContainer } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `fluid` | `boolean \| undefined` | - | Set container 100% wide, spanning the entire width of the viewport. |
| `lg` | `boolean \| undefined` | - | Set container 100% wide until large breakpoint. |
| `md` | `boolean \| undefined` | - | Set container 100% wide until medium breakpoint. |
| `sm` | `boolean \| undefined` | - | Set container 100% wide until small breakpoint. |
| `xl` | `boolean \| undefined` | - | Set container 100% wide until X-large breakpoint. |
| `xxl` | `boolean \| undefined` | - | Set container 100% wide until XX-large breakpoint. |

### CRow

```jsx
import { CRow } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |

### CCol

```jsx
import { CCol } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |


---

# Columns

> Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our 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](./../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's grid goes from [container](./../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 React.js includes predefined components for creating fast, responsive layouts.** With [six breakpoints](./../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

```jsx preview className="docs-example-row docs-example-row-flex-cols"
<CContainer>
  <CRow className="align-items-start">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
  <CRow className="align-items-center">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
  <CRow className="align-items-end">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row docs-example-row-flex-cols"
<CContainer>
  <CRow>
    <CCol className="align-self-start">One of three columns</CCol>
    <CCol className="align-self-center">One of three columns</CCol>
    <CCol className="align-self-end">One of three columns</CCol>
  </CRow>
</CContainer>
```

### Horizontal alignment

```jsx preview className="docs-example-row"
<CContainer>
  <CRow className="justify-content-start">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-center">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-end">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-around">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-between">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-evenly">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
</CContainer>
```

### 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.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol xs={9}>.col-9</CCol>
    <CCol xs={4}>
      .col-4
      <br />
      Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one
      contiguous unit.
    </CCol>
    <CCol xs={6}>
      .col-6
      <br />
      Subsequent columns continue along the new line.
    </CCol>
  </CRow>
</CContainer>
```

### 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 `<CRow>`s, but not every implementation method can account for this.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <div className="w-100"></div>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
  </CRow>
</CContainer>
```

You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/bootstrap/docs/utilities/display).

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <div className="w-100 d-none d-md-block"></div>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
  </CRow>
</CContainer>
```

## Reordering

### Order props

Use `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` props for controlling the **visual order** of your content. These props are responsive, so you can set the `order` by breakpoint (e.g., `xs={{ order: 1}} md={{ order: 2}}`). Includes support for `1` through `5` across all six grid tiers.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol>First in DOM, no order applied</CCol>
    <CCol xs={{ span: true, order: 5 }}>Second in DOM, with a larger order</CCol>
    <CCol xs={{ span: true, order: 1 }}>Third in DOM, with an order of 1</CCol>
  </CRow>
</CContainer>
```

There are also responsive `xs|sm|md|lg|xl|xxl={{ order: 'first' }}` and `xs|sm|md|lg|xl|xxl={{ order: 'last' }}` props that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These values can also be intermixed with the numbered `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` values as needed.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol xs={{ span: true, order: 'last' }}>First in DOM, ordered last</CCol>
    <CCol>Second in DOM, unordered</CCol>
    <CCol xs={{ span: true, order: 'first' }}>Third in DOM, ordered first</CCol>
  </CRow>
</CContainer>
```

### Offsetting columns

You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl={{ offset: 0-12 }}` grid props and our [margin utilities](https://coreui.io/bootstrap/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 `md={{ offset: * }}` props. These props increase the left margin of a column by `*` columns. For example, `md={{ offset: 4 }}` moves `.col-md-4` over four columns.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol md={4}>.col-md-4</CCol>
    <CCol md={{ span: 4, offset: 4 }}>.col-md-4 .offset-md-4</CCol>
  </CRow>
  <CRow>
    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
  </CRow>
  <CRow>
    <CCol md={{ span: 6, offset: 3 }}>.col-md-6 .offset-md-3</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol sm={5} md={6}>
      .col-sm-5 .col-md-6
    </CCol>
    <CCol sm={{ span: 5, offset: 2 }} md={{ span: 6, offset: 0 }}>
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
    </CCol>
  </CRow>
  <CRow>
    <CCol sm={6} md={5} lg={6}>
      .col-sm-6 .col-md-5 .col-lg-6
    </CCol>
    <CCol sm={6} md={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 0 }}>
      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
    </CCol>
  </CRow>
</CContainer>
```

#### Margin utilities

You can use margin utilities like `.me-auto` to force sibling columns away from one another.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol md={4}>.col-md-4</CCol>
    <CCol md={4} className="ms-auto">
      .col-md-4 .ms-auto
    </CCol>
  </CRow>
  <CRow>
    <CCol md={3} className="ms-md-auto">
      .col-md-3 .ms-md-auto
    </CCol>
    <CCol md={3} className="ms-md-auto">
      .col-md-3 .ms-md-auto
    </CCol>
  </CRow>
  <CRow>
    <CCol xs="auto" className="me-auto">
      .col-auto .me-auto
    </CCol>
    <CCol xs="auto">.col-auto</CCol>
  </CRow>
</CContainer>
```

## Standalone column component

The `<CCol>` component can also be used outside a `<CRow>` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.

```jsx preview
<CCol xs={3} className="bg-light p-3 border">
  .col-3: width of 25%
</CCol>
<CCol sm={9} className="bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</CCol>
```

## API

### CCol

```jsx
import { CCol } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |


---

# Gutters

> Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js 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/bootstrap/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

`{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `<CContainer>` or `<CContainer 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`:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="px-4">
  <CRow xs={{ gutterX: 5 }}>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

An alternative solution is to add a wrapper around the `<CRow>` with the `.overflow-hidden` class:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="overflow-hidden">
  <CRow xs={{ gutterX: 5 }}>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Vertical gutters

`{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `<CRow>` at the end of a page. If this occurs, you add a wrapper around `<CRow>` with the `.overflow-hidden` class:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="overflow-hidden">
  <CRow xs={{ gutterY: 5 }}>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Horizontal & vertical gutters

`{breakpoint}={{ gutter: * }}` props 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.

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer>
  <CRow xs={{ gutter: 2 }}>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Row columns gutters

Gutter props can also be added to [row columns](../grid#row-columns). In the following example, we use responsive row columns and responsive gutter props.

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer>
  <CRow xs={{ cols:2, gutter: 2 }} lg={{ cols: 5, gutter: 3}}>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
  </CRow>
</CContainer>
```

## No gutters

The gutters between columns in our predefined grid props can be removed with `{breakpoint}={{ gutter: 0 }}`. This removes the negative `margin`s from `<CRow>` and the horizontal `padding` from all immediate children columns.

**Need an edge-to-edge design?** Drop the parent `<CContainer>` or `<CContainer 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).

```jsx preview className="docs-example m-0 border-0 docs-example-row"
<CRow xs={{ gutter: 0 }}>
  <CCol sm={6} md={8}>.col-sm-6 .col-md-8</CCol>
  <CCol xs={6} md={4}>.col-6 .col-md-4</CCol>
</CRow>
```

## Change the gutters

Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map.

```scss
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
```

## API

### CContainer

```jsx
import { CContainer } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `fluid` | `boolean \| undefined` | - | Set container 100% wide, spanning the entire width of the viewport. |
| `lg` | `boolean \| undefined` | - | Set container 100% wide until large breakpoint. |
| `md` | `boolean \| undefined` | - | Set container 100% wide until medium breakpoint. |
| `sm` | `boolean \| undefined` | - | Set container 100% wide until small breakpoint. |
| `xl` | `boolean \| undefined` | - | Set container 100% wide until X-large breakpoint. |
| `xxl` | `boolean \| undefined` | - | Set container 100% wide until XX-large breakpoint. |

### CRow

```jsx
import { CRow } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |

### CCol

```jsx
import { CCol } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |


---

# React Autocomplete Component

> Build powerful React Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate React Autocomplete solution for modern web applications.

## Overview

The React Autocomplete Component is a powerful, feature-rich autocomplete solution that enhances form usability by providing intelligent suggestions as user types. Whether you're building a React autocomplete with static array data, fetching data from APIs, or implementing complex search logic, this autocomplete component delivers a smooth, accessible user experience with extensive customization options.

Key features of this React Autocomplete include:
- Dynamic dropdown suggestions with real time filtering
- External data integration with API support
- Customizable templates and custom styles
- Advanced search capabilities
- Performance optimization with virtual scrolling
- Accessibility-first design

## Basic example

A straightforward demonstration of how to implement a basic autocomplete input field, highlighting essential attributes and configurations.

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteBasicExample = () => {
  return (
    <CAutocomplete
      cleaner
      highlightOptionsOnSearch
      indicator
      label="Framework"
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Search technologies..."
      search="global"
      searchNoResultsLabel="No results found"
      showHints
      text="Start typing to search option or provide value"
      value="Bootstrap"
    />
  )
}
```

You can also use objects with `option` property for more structured data:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteBasic2Example = () => {
  const options = [
    {
      label: 'Angular',
      value: 1,
    },
    {
      label: 'Bootstrap',
      value: 2,
    },
    {
      label: 'Next.js',
      value: 3,
    },
    {
      label: 'React.js',
      value: 4,
    },
    {
      label: 'Vue.js',
      value: 5,
    },
  ]

  return (
    <CAutocomplete
      cleaner
      highlightOptionsOnSearch
      indicator
      label="Framework"
      options={options}
      placeholder="Search technologies..."
      search="global"
      searchNoResultsLabel="No results found"
      showHints
      text="Start typing to search option or provide value"
      value={4}
    />
  )
}
```

For a minimal implementation without additional features:

```jsx
<CAutocomplete
  label="Framework"
  options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
  placeholder="Search technologies..."
  text="Start typing to search option or provide value"
/>
```

## 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:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteSearchExample = () => {
  return (
    <CAutocomplete
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Search technologies..."
    />
  )
}
```

### Global search

Enable global search functionality that allows users to start typing from anywhere within the component to begin searching:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteSearchGlobalExample = () => {
  return (
    <CAutocomplete
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Global search enabled..."
      search="global"
    />
  )
}
```

### 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:

```jsx
<CAutocomplete 
  options={filteredOptions} 
  onInput={handleSearch} 
  search="external" 
/>
```

You can combine external search with global keyboard navigation:

```jsx
<CAutocomplete 
  options={filteredOptions} 
  onInput={handleSearch} 
  search={{ external: true, global: true }} 
/>
```

See the [External Data](#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:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteRestrictedSelectionExample = () => {
  return (
    <CAutocomplete
      allowOnlyDefinedOptions
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Only predefined options allowed..."
    />
  )
}
```

## User experience 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:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteShowHintsExample = () => {
  return (
    <CAutocomplete
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Type to see hints..."
      showHints
    />
  )
}
```

### Highlight matching text

Enhance search visibility by highlighting matching portions of option labels when user hovers over suggestions:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteHighlightOptionsExample = () => {
  return (
    <CAutocomplete
      highlightOptionsOnSearch
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Search with highlighting..."
    />
  )
}
```

## Validation states

Apply validation styling to indicate input validity.

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteValidationExample = () => {
  return (
    <>
      <CAutocomplete
        options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
        placeholder="Valid autocomplete..."
        valid
      />
      <CAutocomplete
        invalid
        options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
        placeholder="Invalid autocomplete..."
      />
    </>
  )
}
```

## Disabled state

Disable the component to prevent user interaction:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteDisabledExample = () => {
  return (
    <CAutocomplete
      disabled
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Disabled autocomplete..."
    />
  )
}
```

## Sizing

Choose from different sizes to match your design system and form layout:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteSizingExample = () => {
  return (
    <>
      <CAutocomplete
        cleaner
        indicator
        options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
        placeholder="Large autocomplete..."
        size="lg"
      />
      <CAutocomplete
        cleaner
        indicator
        options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
        placeholder="Default autocomplete..."
      />
      <CAutocomplete
        cleaner
        indicator
        options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
        placeholder="Small autocomplete..."
        size="sm"
      />
    </>
  )
}
```

## Cleaner functionality

Enable a cleaner button to quickly clear input element:

```html
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'

export const AutocompleteCleanerExample = () => {
  return (
    <CAutocomplete
      cleaner
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="With cleaner button..."
    />
  )
}
```

## Custom templates

The CoreUI React Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the `optionsTemplate`, and for groups, you can use `optionsGroupsTemplate`, as demonstrated in the examples below:

```html
import React from 'react'
import { cifPl, cifDe, cifUs, cifEs, cifGb } from '@coreui/icons'
import CIcon from '@coreui/icons-react'
import { CCol, CRow } from '@coreui/react'
import { CAutocomplete } from '@coreui/react-pro'

type FlagsMap = {
  [key: string]: string[]
}

export const AutocompleteCustomOptionsExample = () => {
  const flags: FlagsMap = {
    de: cifDe,
    es: cifEs,
    gb: cifGb,
    pl: cifPl,
    us: cifUs,
  }

  const countries = [
    {
      value: 'pl',
      label: 'Poland',
    },
    {
      value: 'de',
      label: 'Germany',
    },
    {
      value: 'us',
      label: 'United States',
    },
    {
      value: 'es',
      label: 'Spain',
    },
    {
      value: 'gb',
      label: 'United Kingdom',
    },
  ]

  const cities = [
    {
      label: 'United States',
      code: 'us',
      options: [
        {
          value: 'au',
          label: 'Austin',
        },
        {
          value: 'ch',
          label: 'Chicago',
        },
        {
          value: 'la',
          label: 'Los Angeles',
        },
        {
          value: 'ny',
          label: 'New York',
        },
        {
          value: 'sa',
          label: 'San Jose',
        },
      ],
    },
    {
      label: 'United Kingdom',
      code: 'gb',
      options: [
        {
          value: 'li',
          label: 'Liverpool',
        },
        {
          value: 'lo',
          label: 'London',
        },
        {
          value: 'ma',
          label: 'Manchester',
        },
      ],
    },
  ]

  return (
    <CRow>
      <CCol md={6}>
        <CAutocomplete
          highlightOptionsOnSearch
          label="Country"
          options={countries}
          optionsTemplate={(option) => (
            <div className="d-flex">
              <CIcon className="me-3" icon={flags[option.value]} size="xl" /> {option.label}
            </div>
          )}
          placeholder="Select country"
          showHints
        />
      </CCol>
      <CCol md={6}>
        <CAutocomplete
          highlightOptionsOnSearch
          label="City"
          options={cities}
          optionsGroupsTemplate={(option) => (
            <div className="d-flex align-items-center">
              <CIcon className="me-3" icon={flags[option.code]} size="xl" /> {option.label}
            </div>
          )}
          placeholder="Select city"
          showHints
        />
      </CCol>
    </CRow>
  )
}
```

## External Data

One of the most powerful features of the React 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:

```html
import React, { useState } from 'react'
import { CAutocomplete, useDebouncedCallback } from '@coreui/react-pro'
import type { Option } from '@coreui/react-pro/src/components/multi-select/types'

export const AutocompleteExternalDataExample = () => {
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])

  const getUsers = async (name = '') => {
    setLoading(true)
    try {
      const response = await fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`)
      const result = await response.json()

      setUsers(
        result.records.map((record: Option) => ({
          value: record.id,
          label: record.first_name,
        }))
      )
    } catch (error) {
      console.error('Error fetching users:', error)
      setUsers([]) // Optionally handle an error state
    } finally {
      setLoading(false)
    }
  }

  // Use the debounced callback for API calls
  const debouncedGetUsers = useDebouncedCallback((value: string) => {
    getUsers(value)
  }, 300)

  return (
    <CAutocomplete
      cleaner
      highlightOptionsOnSearch
      indicator
      label="Users"
      loading={loading}
      onInput={debouncedGetUsers} // Debounce the actual API call
      // onInput={(value) => getUsers(value)} // API call without debounce
      onShow={getUsers} // Triggers the getUsers function when the dropdown is shown
      options={users}
      placeholder="Search users..."
      search={{
        external: true,
        global: true,
      }}
      showHints
      text="Please select your user."
      virtualScroller
    />
  )
}
```

### Key features for external data

- **`useDebouncedCallback`**: Prevents excessive API calls during rapid typing
- **`search="external"`**: Disables internal filtering to rely on server-side search
- **`loading` prop**: Shows loading indicators during API requests
- **`virtualScroller`**: Efficiently renders large result sets
- **`searchNoResultsLabel`**: Provides user feedback when no results are found

### Required imports

```jsx
import { useDebouncedCallback } from '@coreui/react-pro'
```

The `useDebouncedCallback` hook is a utility available in `@coreui/react-pro` that delays function execution until after a specified timeout has elapsed since the last invocation. This prevents excessive API calls during rapid input changes and improves overall performance.

## Performance optimization

For large datasets, the React Autocomplete component includes several performance optimizations:

- **Virtual scrolling**: Use `virtualScroller={true}` to render only visible options
- **Debounced search**: Implement search debouncing to reduce API calls
- **External filtering**: Delegate filtering to the server with `search="external"`
- **Lazy loading**: Load data only when needed

## 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 |
| --- | --- |
| <kbd>Arrow Down</kbd> | Navigate to the next option or open dropdown |
| <kbd>Arrow Up</kbd> | Navigate to the previous option |
| <kbd>Home</kbd> | Focus the first option |
| <kbd>End</kbd> | Focus the last option |
| <kbd>Enter</kbd> | Select the highlighted option |
| <kbd>Escape</kbd> | Close the dropdown and clear focus |
| <kbd>Tab</kbd> | Accept hint completion (when hints are enabled) |
| <kbd>Backspace/Delete</kbd> | Clear input and trigger search |

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAutocomplete /&gt;](./api/#cautocomplete)


---

# React Checkbox Components

> Create consistent cross-browser and cross-device checkboxes with our React checkbox components.

## Approach

Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.

## Checkboxes

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxExample = () => {
  return (
    <>
      <CFormCheck id="flexCheckDefault" label="Default checkbox" />
      <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
    </>
  )
}
```

### Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxIndeterminateExample = () => {
  return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
}
```

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxDisabledExample = () => {
  return (
    <>
      <CFormCheck label="Disabled checkbox" disabled />
      <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
    </>
  )
}
```

## Default (stacked)

By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxStackedExample = () => {
  return (
    <>
      <CFormCheck id="defaultCheck1" label="Default checkbox" />
      <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
    </>
  )
}
```

## Inline

Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxInlineExample = () => {
  return (
    <>
      <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
      <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
      <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
    </>
  )
}
```

## Reverse 

Put your checkboxes on the opposite side by adding `reverse` boolean property.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxReverseExample = () => {
  return (
    <>
      <CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
      <CFormCheck
        reverse
        id="reverseCheckbox2"
        value="option2"
        label="Disabled reverse checkbox"
        disabled
      />
    </>
  )
}
```

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxWithoutLabelsExample = () => {
  return <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
}
```

## Checkbox toggle buttons

Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check"
        autoComplete="off"
        label="Single toggle"
      />
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check-2"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check-3"
        autoComplete="off"
        label="Disabled"
        disabled
      />
    </>
  )
}
```

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btn-check-outlined"
        autoComplete="off"
        label="Single toggle"
      />
      <CFormCheck
        button={{ color: 'secondary', variant: 'outline' }}
        id="btn-check-2-outlined"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        id="btn-check-3-outlined"
        autoComplete="off"
        label="Checked success"
        defaultChecked
      />
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormCheck /&gt;](./api/#cformcheck)


---

# React Chip Input Component

> React Chip Input component for CoreUI helps you create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.

## Overview

The CoreUI **React Chip Input component** lets users enter multiple values as chips inside a single field. Use it as a tag input, multi-value selector, or token field for skills, categories, email recipients, and more. The chip input component supports keyboard-friendly entry, chip removal, and optional selection for bulk actions.

- Type values and press `Enter` or a separator to create chips.
- Chips can be removable and selectable.
- The input stays inline and grows as you type.
- Form integration is supported with a hidden input when `name` is provided.

## When to use Chip Input

Use the React Chip Input component when you need:

- A **tag input** or **token field** for free-form multi-value entry
- An **email or recipient input** where users add multiple addresses
- A **skills or category selector** in forms
- A **filterable multi-select** that integrates with standard HTML forms

## Basic example

Use `CChipInput` to render a multi-value field with predefined chips and inline input.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputExample = () => {
  return (
    <CChipInput
      id="skillsInputBasic"
      label="Skills:"
      defaultValue={['JavaScript', 'TypeScript', 'Accessibility']}
      name="chipInputBasicExample"
      placeholder="Add a skill..."
    />
  )
}
```

> Note: `CChipInput` renders the inline text input automatically. When `name` is provided, it also renders a hidden input so chip values can participate in standard form submission.

## Variants

Use contextual chip classes inside React Chip Input to represent categories, status, or priority.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

const variants: Record<string, string> = {
  feature: 'chip-primary',
  approved: 'chip-success',
  'needs review': 'chip-warning',
  blocking: 'chip-danger',
}

export const ChipInputVariantsExample = () => {
  return (
    <CChipInput
      defaultValue={['Feature', 'Approved', 'Needs review', 'Blocking']}
      chipClassName={(value) => variants[value.trim().toLowerCase()] || ''}
      name="issues"
      placeholder="Add label..."
    />
  )
}
```

In the example below, chip color is assigned dynamically based on the chip text using the `chipClassName` callback.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputClassNameExample = () => {
  return (
    <CChipInput
      defaultValue={['Feature', 'Blocking', 'Approved']}
      chipClassName={(value) => {
        const variants: Record<string, string> = {
          approved: 'chip-success',
          blocking: 'chip-danger',
          feature: 'chip-primary',
        }
        return variants[value.trim().toLowerCase()] || 'chip-secondary'
      }}
      placeholder="Type and press Enter"
    />
  )
}
```

## Sizes

Use `size="sm"` and `size="lg"` to match surrounding form controls. Default size is provided without a size modifier.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputSizesExample = () => {
  return (
    <>
      <div className="mb-3">
        <CChipInput
          id="skillsInputSm"
          label="Small"
          size="sm"
          defaultValue={['HTML']}
          placeholder="Add small tag..."
        />
      </div>

      <div className="mb-3">
        <CChipInput
          id="skillsInputMd"
          label="Default"
          defaultValue={['JavaScript']}
          placeholder="Add default tag..."
        />
      </div>

      <div>
        <CChipInput
          id="skillsInputLg"
          label="Large"
          size="lg"
          defaultValue={['TypeScript']}
          placeholder="Add large tag..."
        />
      </div>
    </>
  )
}
```

## Empty state

Start with just the input and let users add chips as they type.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputEmptyStateExample = () => {
  return <CChipInput name="tags" placeholder="Start typing tags..." />
}
```

## With label

Use a standard form label for accessibility.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputWithLabelExample = () => {
  return (
    <div className="mb-3">
      <label className="form-label" htmlFor="techStackInput">
        Tech stack
      </label>
      <CChipInput
        id="techStackInput"
        name="techStack"
        defaultValue={['Vue', 'Vite']}
        placeholder="Add package..."
      />
      <div className="form-text">Press Enter or comma to add a value.</div>
    </div>
  )
}
```

## Disabled

Set disabled state on the component to make the input and chips non-interactive. Combine it with `removable={false}` for disabled, non-removable chips.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputDisabledExample = () => {
  return (
    <CChipInput
      defaultValue={['Read only', 'Locked']}
      disabled
      removable={false}
      placeholder="Input disabled"
    />
  )
}
```

## Readonly

Use readonly state when chips should stay visible and focusable, but values must not change.

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputReadonlyExample = () => {
  return (
    <CChipInput
      defaultValue={['JavaScript', 'TypeScript']}
      readOnly
      placeholder="Read-only values"
    />
  )
}
```

## Selectable chips

Enable selection for chips managed by Chip Input. In this example, `onSelect` updates a live list of selected values below the field.

```html
import React, { useState } from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputSelectableExample = () => {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <>
      <CChipInput
        defaultValue={['Design', 'Backend', 'QA', 'DevOps']}
        selectable
        onSelect={setSelected}
        placeholder="Select chips"
      />
      <p className="mt-2 mb-0 small text-body-secondary">
        Selected: {selected.length > 0 ? selected.join(', ') : 'None'}
      </p>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CChipInput /&gt;](./api/#cchipinput)


---

# React Date Picker Component

> The React Date Picker Component is an essential tool for any React-based application that requires date selection functionality.

## About

This component, provided by CoreUI for React.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.

With its responsive design and support for all modern browsers, the React Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application's design.

The React Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.

One of the standout features of the React Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality.

## Example

Below is an example of a basic React DatePicker.

### Days

Basic examples demonstrating how to pick dates using the React Date Picker Component.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerDaysExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker label="Date Picker" locale="en-US" />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker date="2022/2/16" label="Date Picker" locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

#### With timepicker

In addition to supporting date selection, our React DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. React TimePicker can be enabled by passing a `timepicker` prop to the `` component

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerDaysWithTimePickerExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker locale="en-US" timepicker />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker date="2023/03/15 02:22:13 PM" locale="en-US" timepicker />
      </CCol>
    </CRow>
  )
}
```

#### With footer

Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as "Today" or "Clear" buttons. The footer component is fully customizable and can be styled to match the rest of the application.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerDaysWithFooterExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker footer locale="en-US" />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker date="2022/2/16" footer locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

### Weeks

Illustration of week selection using the React Date Picker, including week number display.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerWeeksExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker label="Week Picker" locale="en-US" selectionType="week" showWeekNumber />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker
          date="2025W07"
          label="Week Picker"
          locale="en-US"
          selectionType="week"
          showWeekNumber
        />
      </CCol>
    </CRow>
  )
}
```

### Months

Selecting whole months with the React Date Picker Component.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerMonthsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker label="Month Picker" locale="en-US" selectionType="month" />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker label="Month Picker" locale="en-US" selectionType="month" date="2022-08" />
      </CCol>
    </CRow>
  )
}
```

### Quarters

Selecting quarters using the React Date Picker.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerQuartersExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker label="Quarter Picker" locale="en-US" selectionType="quarter" />
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker date="2025Q1" label="Quarter Picker" locale="en-US" selectionType="quarter" />
      </CCol>
    </CRow>
  )
}
```

### Years

Picking years using the React Date Picker.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerYearsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={5}>
        <CDatePicker label="Year Picker" locale="en-US" selectionType="year" />{' '}
      </CCol>
      <CCol sm={6} lg={5}>
        <CDatePicker label="Year Picker" locale="en-US" selectionType="year" date="2022" />{' '}
      </CCol>
    </CRow>
  )
}
```

## Sizing

Set heights using `size` property like `size="lg"` and `size="sm"`.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerSizingExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CCol lg={5}>
          <CDatePicker locale="en-US" size="lg" />
        </CCol>
      </CRow>
      <CRow>
        <CCol lg={4}>
          <CDatePicker locale="en-US" size="sm" />
        </CCol>
      </CRow>
    </>
  )
}
```

## Disabled

Add the `disabled` boolean attribute on the React Date Picker to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerDisabledExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker disabled locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Readonly

Add the `inputReadOnly` boolean attribute to prevent modification of the input's value.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerReadonlyExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker inputReadOnly locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Preview date on hover

By default, the date picker shows a live preview in the input field when hovering over calendar dates. To disable this feature, set `previewDateOnHover={false}`.

```html
import React from 'react'
import { CCol, CFormLabel, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerPreviewDateOnHoverExample = () => {
  return (
    <CRow>
      <CCol sm={6} className="mb-3 mb-sm-0">
        <CFormLabel>With preview (default)</CFormLabel>
        <CDatePicker locale="en-US" />
      </CCol>
      <CCol sm={6}>
        <CFormLabel>Without preview</CFormLabel>
        <CDatePicker locale="en-US" previewDateOnHover={false} />
      </CCol>
    </CRow>
  )
}
```

## Disabled dates

CoreUI React DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to `disabledDate` prop to the component, which determines which dates should be disabled based on custom logic.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerDisabledDatesExample = () => {
  const calendarDate = new Date(2022, 2, 1)
  const disabledDates = [
    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
    new Date(2022, 2, 16),
    new Date(2022, 3, 16),
    [new Date(2022, 4, 2), new Date(2022, 4, 8)],
  ]
  const maxDate = new Date(2022, 5, 0)
  const minDate = new Date(2022, 1, 1)

  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker
          calendarDate={calendarDate}
          disabledDates={disabledDates}
          locale="en-US"
          maxDate={maxDate}
          minDate={minDate}
        />
      </CCol>
    </CRow>
  )
}
```

### Disabling weekends

You can disable weekends by passing a function to the `disabledDates` prop. Here's how to do it:

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

const disableWeekends = (date: Date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}

export const DatePickerDisablingWeekendsExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker disabledDates={disableWeekends} locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Locale

CoreUI React Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages. 

### Auto

By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocaleAutoExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker />
      </CCol>
    </CRow>
  )
}
```

### Chinese

Below is an example of a basic React Date Picker with Chinese locales.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocaleChineseExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker placeholder="入住日期" locale="zh-CN" />
      </CCol>
    </CRow>
  )
}
```

### Japanese

Below is an example of a basic React Date Picker with Japanese locales.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocaleJapaneseExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker placeholder="日付を選択" locale="ja" />
      </CCol>
    </CRow>
  )
}
```

### Korean

Below is an example of a basic React Date Picker with Korean locales.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocaleKoreanExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker placeholder="날짜 선택" locale="ko" />
      </CCol>
    </CRow>
  )
}
```

## Right to left support

RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss.

### Hebrew

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocaleHebrewExample = () => {
  return (
    <CRow dir="rtl">
      <CCol lg={4}>
        <CDatePicker placeholder="בחר תאריך" locale="he-IL" />
      </CCol>
    </CRow>
  )
}
```

### Persian

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerLocalePersianExample = () => {
  return (
    <CRow dir="rtl">
      <CCol lg={4}>
        <CDatePicker placeholder="تاریخ شروع" locale="fa-IR" />
      </CCol>
    </CRow>
  )
}
```

## Custom formats

> Heads up! As of v5.0.0, the `format` property is removed in ``. Instead, utilize the `inputDateFormat` to format dates into custom strings and `inputDateParse` to parse custom strings into Date objects.

The provided code demonstrates how to use the `inputDateFormat` and `inputDateParse` properties. In this example, the `format` and `parse` functions from `date-fns` are employed to tailor the date presentation and interpretation. 

```jsx
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
```
The `inputDateFormat` property formats the date into a custom string, while the `inputDateParse` property parses a custom string into a Date object. The code showcases the date range in different formats based on locale, such as 'MMMM dd, yyyy' and 'yyyy MMMM dd', and accommodates different locales, like 'en-US' and 'es-ES'.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerCustomFormatsExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker
          date="2022/08/17"
          label="Date picker"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'MMMM dd, yyyy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMMM dd, yyyy')}
        />
      </CCol>
      <CCol lg={4}>
        <CDatePicker
          date="2022/08/17"
          label="Selector de fechas"
          locale="es-ES"
          placeholder="Seleccionar fecha"
          inputDateParse={(date: string) => parse(date, 'yyyy MMMM dd', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'yyyy MMMM dd', { locale: es })}
        />
      </CCol>
    </CRow>
  )
}
```

### With timepicker

If you need to display custom date and time formats, use the `timepicker` property along with `inputDateParse` and `inputDateFormat`. This allows users to select a date with a specified time format, such as `'MMM dd, yyyy h:mm:ss a'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerCustomFormatsWithTimePickerExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDatePicker
          date="2022/08/03 02:34:17 AM"
          label="Date picker"
          locale="en-US"
          timepicker
          inputDateParse={(date: string) => parse(date, 'MMM dd, yyyy h:mm:ss a', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMM dd, yyyy h:mm:ss a')}
        />
      </CCol>
      <CCol lg={5}>
        <CDatePicker
          date="2022/08/03 02:34:17 AM"
          label="Selector de fechas"
          locale="es-ES"
          timepicker
          inputDateParse={(date: string) =>
            parse(date, 'yyyy MMM dd h:mm:ss a', new Date(), { locale: es })
          }
          inputDateFormat={(date) =>
            format(new Date(date), 'yyyy MMM dd h:mm:ss a', { locale: es })
          }
        />
      </CCol>
    </CRow>
  )
}
```

### Weeks

If you want to show weeks in a custom format, set the `selectionType` to `'week'`. This configuration allows you to use `inputDateParse` and `inputDateFormat` to present and parse week-based date strings, like `'Io RRRR'`. Additionally, the `showWeekNumber` property can be used to display week numbers in your preferred format.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerCustomFormatsWeeksExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker
          date="2022W10"
          label="Date picker"
          locale="en-US"
          inputDateParse={(date: string) =>
            parse(date, 'Io RRRR', new Date(), {
              useAdditionalWeekYearTokens: true,
              weekStartsOn: 1,
            })
          }
          inputDateFormat={(date) => format(new Date(date), 'Io RRRR', { weekStartsOn: 1 })}
          selectionType="week"
          showWeekNumber
        />
      </CCol>
      <CCol lg={4}>
        <CDatePicker
          date="2022W10"
          label="Selector de fechas"
          locale="es-ES"
          inputDateParse={(date: string) =>
            parse(date, 'Io RRRR', new Date(), {
              locale: es,
              useAdditionalWeekYearTokens: true,
            })
          }
          inputDateFormat={(date) => format(new Date(date), 'Io RRRR', { locale: es })}
          selectionType="week"
          showWeekNumber
        />
      </CCol>
    </CRow>
  )
}
```

### Months

If your application requires month selection in a specific format, set the `selectionType` property to `'month'`. Using `inputDateFormat` and `inputDateParse`, you can customize the display of months, such as using the format `'MMM yyyy'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerCustomFormatsMonthsExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker
          date="2022-08"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'MMM yyyy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMM yyyy')}
          selectionType="month"
        />
      </CCol>
      <CCol lg={4}>
        <CDatePicker
          date="2022-08"
          label="Selector de fechas"
          locale="es-ES"
          inputDateParse={(date: string) => parse(date, 'MMM yyyy', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'MMM yyyy', { locale: es })}
          selectionType="month"
        />
      </CCol>
    </CRow>
  )
}
```

### Years

If you need to work with custom year formats, set the `selectionType` to `'year'`. This enables you to use `inputDateFormat` and `inputDateParse` to format years in a manner that suits your application's requirements, like `'yy'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'

export const DatePickerCustomFormatsYearsExample = () => {
  return (
    <CRow>
      <CCol lg={4}>
        <CDatePicker
          date="2022"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'yy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'yy')}
          selectionType="year"
        />
      </CCol>
      <CCol lg={4}>
        <CDatePicker
          date="2022"
          label="Selector de fechas"
          locale="es-ES"
          inputDateParse={(date: string) => parse(date, 'yy', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'yy', { locale: es })}
          selectionType="year"
        />
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CDatePicker /&gt;](./api/#cdatepicker)


---

# React Date Range Picker Component

## Example

Explore basic usage of the Date Range Picker through sample code snippets that demonstrate its core functionality.

### Days

Select date ranges by day with examples including basic usage, as well as variants featuring time pickers and footers for enhanced functionality.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerDaysExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          endDate="2022/08/17"
          label="Date range"
          locale="en-US"
          startDate="2022/08/03"
        />
      </CCol>
    </CRow>
  )
}
```

#### With timepicker

Our React DateRangePicker component not only supports date selection but also includes a time picker feature for selecting a specific time of day. Enable the React TimePicker by passing a `timepicker` prop to the `` component.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerDaysWithTimePickerExample = () => {
  return (
    <CRow>
      <CCol className="mb-3" sm={7}>
        <CDateRangePicker locale="en-US" timepicker />
      </CCol>
      <CCol sm={7}>
        <CDateRangePicker
          startDate="2022/08/03 02:34:17 AM"
          endDate="2022/09/17 11:29:41 PM"
          locale="en-US"
          timepicker
        />
      </CCol>
    </CRow>
  )
}
```

#### With footer

Here's an example with an additional footer. The footer is useful for displaying extra information or actions related to the selected date, such as "Today" or "Clear" buttons. The footer component is fully customizable and can be styled to match the rest of the application.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerDaysWithFooterExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker footer locale="en-US" />
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

### Weeks

To enable week selection, set the `selectionType` property to `week` and pass the `showWeekNumber` prop to display week numbers.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerWeeksExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="week"
          showWeekNumber
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          startDate="2025W07"
          endDate="2025W12"
          label="Date range"
          locale="en-US"
          selectionType="week"
          showWeekNumber
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
    </CRow>
  )
}
```

### Months

Set the `selectionType` property to `month` to enable months range selection.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerMonthsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="month"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="month"
          startDate="2022-08"
          endDate="2023-05"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
    </CRow>
  )
}
```

### Quarters

Set the `selectionType` property to `quarter` to enable quarters range selection.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerQuartersExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="quarter"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          startDate="2025Q3"
          endDate="2026Q2"
          label="Date range"
          locale="en-US"
          selectionType="quarter"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />
      </CCol>
    </CRow>
  )
}
```

### Years

Set the `selectionType` property to `year` to enable years range selection.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerYearsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="year"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />{' '}
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="year"
          startDate="2022"
          endDate="2028"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />{' '}
      </CCol>
    </CRow>
  )
}
```

## Sizing

Set heights using `size` property like `size="lg"` and `size="sm"`.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerSizingExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CCol lg={6}>
          <CDateRangePicker locale="en-US" size="lg" />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CCol lg={5}>
          <CDateRangePicker locale="en-US" />
        </CCol>
      </CRow>
      <CRow>
        <CCol lg={4}>
          <CDateRangePicker locale="en-US" size="sm" />
        </CCol>
      </CRow>
    </>
  )
}
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerDisabledExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker disabled locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Readonly

Add the `inputReadOnly` boolean attribute to prevent modification of the input's value.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerReadonlyExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker inputReadOnly locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Preview date on hover

By default, the date range picker shows a live preview in the input fields when hovering over calendar dates. To disable this feature, set `previewDateOnHover={false}`.

```html
import React from 'react'
import { CCol, CFormLabel, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerPreviewDateOnHoverExample = () => {
  return (
    <CRow>
      <CCol sm={6} className="mb-3 mb-sm-0">
        <CFormLabel>With preview (default)</CFormLabel>
        <CDateRangePicker locale="en-US" />
      </CCol>
      <CCol sm={6}>
        <CFormLabel>Without preview</CFormLabel>
        <CDateRangePicker locale="en-US" previewDateOnHover={false} />
      </CCol>
    </CRow>
  )
}
```

## Disabled dates

Our React Date Range Picker component features the ability to disable specific dates, such as weekends or holidays, by using the `disabledDate` prop. This prop takes an array and uses custom logic to determine which dates should be disabled.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerDisabledDatesExample = () => {
  const calendarDate = new Date(2022, 2, 1)
  const disabledDates = [
    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
    new Date(2022, 2, 16),
    new Date(2022, 3, 16),
    [new Date(2022, 4, 2), new Date(2022, 4, 8)],
  ]
  const maxDate = new Date(2022, 5, 0)
  const minDate = new Date(2022, 1, 1)

  return (
    <CRow>
      <CCol lg={4}>
        <CDateRangePicker
          calendarDate={calendarDate}
          disabledDates={disabledDates}
          locale="en-US"
          maxDate={maxDate}
          minDate={minDate}
        />
      </CCol>
    </CRow>
  )
}
```

### Disabling weekends

You can disable weekends by passing a function to the `disabledDates` prop. Here's how to do it:

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

const disableWeekends = (date: Date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}

export const DateRangePickerDisablingWeekendsExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker disabledDates={disableWeekends} locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Custom ranges

In order to configure custom date ranges in the Date Range component, you must use the `ranges` prop to define a set of predefined ranges. These ranges can include predefined options such as "Today", "Yesterday", "Last 7 Days", etc.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomRangesExample = () => {
  const customRanges = {
    Today: [new Date(), new Date()],
    Yesterday: [
      new Date(new Date().setDate(new Date().getDate() - 1)),
      new Date(new Date().setDate(new Date().getDate() - 1)),
    ],
    'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date())],
    'Last 30 Days': [new Date(new Date().setDate(new Date().getDate() - 29)), new Date(new Date())],
    'This Month': [
      new Date(new Date().setDate(1)),
      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
    ],
    'Last Month': [
      new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      new Date(new Date().getFullYear(), new Date().getMonth(), 0),
    ],
  }

  return (
    <CRow>
      <CCol sm={5}>
        <CDateRangePicker ranges={customRanges} />
      </CCol>
    </CRow>
  )
}
```

## Locale

CoreUI's React Date Range Picker enables the display of dates and times in non-English locales, making it essential for international users and multilingual support.

### Auto

By default, the DateRangePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can pass the desired language code as a prop to the DateRangePicker component. This feature enables the creation of more inclusive and accessible applications that cater to a diverse audience.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocaleAutoExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker />
      </CCol>
    </CRow>
  )
}
```

### Chinese

Here is an example of a simple React Date Range Picker with Chinese localization.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocaleChineseExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker locale="zh-CN" placeholder={['入住日期', '退房日期']} />
      </CCol>
    </CRow>
  )
}
```

### Japanese

Below is an example of a basic React Date Range Picker with Japanese locales.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocaleJapaneseExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker locale="ja" placeholder={['日付を選択', '終了日']} />
      </CCol>
    </CRow>
  )
}
```

### Korean

Here's a simple example of a Date Range Picker with Korean locales.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocaleKoreanExample = () => {
  return (
    <CRow>
      <CCol lg={5}>
        <CDateRangePicker locale="ko" placeholder={['날짜 선택', '종료일']} />
      </CCol>
    </CRow>
  )
}
```

## Right to left support

RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss.

### Hebrew

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocaleHebrewExample = () => {
  return (
    <CRow dir="rtl">
      <CCol lg={5}>
        <CDateRangePicker placeholder={['בחר תאריך', 'תאריך סיום']} locale="he-IL" />
      </CCol>
    </CRow>
  )
}
```

### Persian

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerLocalePersianExample = () => {
  return (
    <CRow dir="rtl">
      <CCol lg={5}>
        <CDateRangePicker locale="fa-IR" placeholder={['تاریخ شروع', 'تاریخ پایان']} />
      </CCol>
    </CRow>
  )
}
```

## Custom formats

> Heads up! As of v5.0.0, the `format` property is removed in ``. Instead, utilize the `inputDateFormat` to format dates into custom strings and `inputDateParse` to parse custom strings into Date objects.

The provided code demonstrates how to use the `inputDateFormat` and `inputDateParse` properties. In this example, the `format` and `parse` functions from `date-fns` are employed to tailor the date presentation and interpretation.

```jsx
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
```

The `inputDateFormat` property formats the date into a custom string, while the `inputDateParse` property parses a custom string into a Date object. The code showcases the date range in different formats based on locale, such as 'MMMM dd, yyyy' and 'yyyy MMMM dd', and accommodates different locales, like 'en-US' and 'es-ES'.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomFormatsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" lg={6}>
        <CDateRangePicker
          startDate="2022/08/03"
          endDate="2022/08/17"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'MMMM dd, yyyy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMMM dd, yyyy')}
        />
      </CCol>
      <CCol lg={6}>
        <CDateRangePicker
          startDate="2022/08/03"
          endDate="2022/08/17"
          label="Rango de fechas"
          locale="es-ES"
          placeholder={['Fecha de inicio', 'Fecha de fin']}
          inputDateParse={(date: string) => parse(date, 'yyyy MMMM dd', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'yyyy MMMM dd', { locale: es })}
        />
      </CCol>
    </CRow>
  )
}
```

### With timepicker

If you need to display custom date and time formats, use the `timepicker` property along with `inputDateParse` and `inputDateFormat`. This example shows how you can customize both the date and time formats, allowing users to select a range with time specified, such as `'MMM dd, yyyy h:mm:ss a'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomFormatsWithTimePickerExample = () => {
  return (
    <CRow>
      <CCol className="mb-3" lg={8}>
        <CDateRangePicker
          startDate="2022/08/03 02:34:17 AM"
          endDate="2022/09/17 11:29:41 PM"
          label="Date range"
          locale="en-US"
          timepicker
          inputDateParse={(date: string) => parse(date, 'MMM dd, yyyy h:mm:ss a', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMM dd, yyyy h:mm:ss a')}
        />
      </CCol>
      <CCol lg={8}>
        <CDateRangePicker
          startDate="2022/08/03 02:34:17 AM"
          endDate="2022/09/17 11:29:41 PM"
          label="Rango de fechas"
          locale="es-ES"
          placeholder={['Fecha de inicio', 'Fecha de fin']}
          timepicker
          inputDateParse={(date: string) =>
            parse(date, 'yyyy MMM dd h:mm:ss a', new Date(), { locale: es })
          }
          inputDateFormat={(date) =>
            format(new Date(date), 'yyyy MMM dd h:mm:ss a', { locale: es })
          }
        />
      </CCol>
    </CRow>
  )
}
```

### Weeks

If you want to show weeks in a custom format, set the `selectionType` to `'week'`. This example demonstrates how to use `inputDateParse` and `inputDateFormat` to present and parse week-based date strings, like `'Io RRRR'`. Including the `showWeekNumber` property allows you to display week numbers, which can be formatted according to your needs.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomFormatsWeeksExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" lg={6}>
        <CDateRangePicker
          startDate="2022W10"
          endDate="2022W13"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) =>
            parse(date, 'Io RRRR', new Date(), {
              useAdditionalWeekYearTokens: true,
              weekStartsOn: 1,
            })
          }
          inputDateFormat={(date) => format(new Date(date), 'Io RRRR', { weekStartsOn: 1 })}
          selectionType="week"
          showWeekNumber
        />
      </CCol>
      <CCol lg={6}>
        <CDateRangePicker
          startDate="2022W10"
          endDate="2022W13"
          label="Rango de fechas"
          locale="es-ES"
          inputDateParse={(date: string) =>
            parse(date, 'Io RRRR', new Date(), {
              locale: es,
              useAdditionalWeekYearTokens: true,
            })
          }
          inputDateFormat={(date) => format(new Date(date), 'Io RRRR', { locale: es })}
          selectionType="week"
          showWeekNumber
        />
      </CCol>
    </CRow>
  )
}
```

### Months

If your application requires month selection in a specific format, use the `selectionType` set to `'month'`. This example shows how to customize the month display using `inputDateFormat` and how to parse month strings with `inputDateParse`, allowing for formats such as `'MMM yyyy'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomFormatsMonthsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" lg={6}>
        <CDateRangePicker
          startDate="2022-08"
          endDate="2023-04"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'MMM yyyy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'MMM yyyy')}
          selectionType="month"
        />
      </CCol>
      <CCol lg={6}>
        <CDateRangePicker
          startDate="2022-08"
          endDate="2023-04"
          label="Rango de fechas"
          locale="es-ES"
          inputDateParse={(date: string) => parse(date, 'MMM yyyy', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'MMM yyyy', { locale: es })}
          selectionType="month"
        />
      </CCol>
    </CRow>
  )
}
```

### Years

If you need to format years in a custom way, use the `selectionType` set to `'year'`. This example provides guidance on using `inputDateFormat` and `inputDateParse` to work with custom year formats like `'yy'`.

```html
import React from 'react'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'

export const DateRangePickerCustomFormatsYearsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" lg={6}>
        <CDateRangePicker
          startDate="2022"
          endDate="2024"
          label="Date range"
          locale="en-US"
          inputDateParse={(date: string) => parse(date, 'yy', new Date())}
          inputDateFormat={(date) => format(new Date(date), 'yy')}
          selectionType="year"
        />
      </CCol>
      <CCol lg={6}>
        <CDateRangePicker
          startDate="2022"
          endDate="2024"
          label="Rango de fechas"
          locale="es-ES"
          inputDateParse={(date: string) => parse(date, 'yy', new Date(), { locale: es })}
          inputDateFormat={(date) => format(new Date(date), 'yy', { locale: es })}
          selectionType="year"
        />
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CDateRangePicker /&gt;](./api/#cdaterangepicker)


---

# React Floating labels

> React floating label component. Create beautifully simple form labels that float over your input fields.

## Example

Use `floatingLabel` property on `<CFormInput>`, `<CFormSelect>` or `<CFormTextarea>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>`, `<CFormSelect>` and `<CFormTextarea>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInput"
        floatingClassName="mb-3"
        floatingLabel="Email address"
        placeholder="name@example.com"
      />
      <CFormInput
        type="password"
        id="floatingPassword"
        floatingLabel="Password"
        placeholder="Password"
      />
    </>
  )
}
```

You can create the same form control by wrapping a pair of `<CFormInput>` and `<CFormLabel>` elements in `<CFormFloating>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also, note that the `<CFormInput>` must come first so we can utilize a sibling selector (e.g., `~`).

```jsx
<CFormFloating className="mb-3">
  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
  <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
</CFormFloating>
```

When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabels2Example = () => {
  return (
    <CFormInput
      type="email"
      id="floatingInputValue"
      floatingLabel="Input with value"
      placeholder="name@example.com"
      defaultValue="test@example.com"
    />
  )
}
```

Form validation styles also work as expected.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsValidationExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputValid"
        floatingClassName="mb-3"
        floatingLabel="Email addresss"
        placeholder="name@example.com"
        defaultValue="test@example.com"
        valid
      />
      <CFormInput
        type="email"
        id="floatingInputInvalid"
        floatingLabel="Email addresss"
        placeholder="name@example.com"
        defaultValue="test@example.com"
        invalid
      />
    </>
  )
}
```

## Textareas

By default, `<CFormTextarea>`s will be the same height as `<CFormInput>`s.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextareaExample = () => {
  return (
    <CFormTextarea
      id="floatingTextarea"
      floatingLabel="Comments"
      placeholder="Leave a comment here"
    ></CFormTextarea>
  )
}
```

To set a custom height on your `<CFormTextarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextarea2Example = () => {
  return (
    <CFormTextarea
      placeholder="Leave a comment here"
      id="floatingTextarea2"
      floatingLabel="Comments"
      style={{ height: '100px' }}
    ></CFormTextarea>
  )
}
```

## Selects

Other than `<CFormInput>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormInput>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FloatingLabelsSelectExample = () => {
  return (
    <CFormSelect
      id="floatingSelect"
      floatingLabel="Works with selects"
      aria-label="Floating label select example"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

## Layout

When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.

```html
import React from 'react'
import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'

export const FloatingLabelsLayoutExample = () => {
  return (
    <CRow xs={{ gutter: 2 }}>
      <CCol md>
        <CFormInput
          type="email"
          id="floatingInputGrid"
          floatingLabel="Email address"
          placeholder="name@example.com"
          defaultValue="email@example.com"
        />
      </CCol>
      <CCol md>
        <CFormSelect
          id="floatingSelectGrid"
          floatingLabel="Email address"
          aria-label="Works with selects"
        >
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormFloating /&gt;](./api/#cformfloating)


---

# React Form Input Component

> React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.

## Example

```html
import React from 'react'
import { CForm, CFormInput } from '@coreui/react'

export const FormInputExample = () => {
  return (
    <CForm>
      <CFormInput
        type="email"
        id="exampleFormControlInput1"
        label="Email address"
        placeholder="name@example.com"
        text="Must be 8-20 characters long."
        aria-describedby="exampleFormControlInputHelpInline"
      />
    </CForm>
  )
}
```

If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.

```jsx
<CForm>
  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
  <CFormText as="span" id="exampleFormControlInputHelpInline">
    Must be 8-20 characters long.
  </CFormText>
</CForm>
```

## Sizing

Set heights using `size` property like `size="lg"` and `size="sm"`.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputSizingExample = () => {
  return (
    <>
      <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
      <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
      <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
    </>
  )
}
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputDisabledExample = () => {
  return (
    <>
      <CFormInput
        type="text"
        placeholder="Disabled input"
        aria-label="Disabled input example"
        disabled
      />
      <CFormInput
        type="text"
        placeholder="Disabled readonly input"
        aria-label="Disabled input example"
        disabled
        readOnly
      />
    </>
  )
}
```

## 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.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const FormInputReadonlyExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="text"
            id="staticEmail"
            defaultValue="email@example.com"
            readOnly
            plainText
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword" />
        </CCol>
      </CRow>
    </>
  )
}
```

## 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.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const FormInputReadonlyPlainTextExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="staticEmail2" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="text"
            id="staticEmail2"
            defaultValue="email@example.com"
            readOnly
            plainText
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword2" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword2" />
        </CCol>
      </CRow>
    </>
  )
}
```

```html
import React from 'react'
import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'

export const FormInputReadonlyPlainText2Example = () => {
  return (
    <CForm className="row g-3">
      <CCol xs="auto">
        <CFormLabel htmlFor="staticEmail3" className="visually-hidden">
          Email
        </CFormLabel>
        <CFormInput
          type="text"
          id="staticEmail3"
          defaultValue="email@example.com"
          readOnly
          plainText
        />
      </CCol>
      <CCol xs="auto">
        <CFormLabel htmlFor="inputPassword3" className="visually-hidden">
          Password
        </CFormLabel>
        <CFormInput type="password" id="inputPassword3" placeholder="Password" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit" className="mb-3">
          Confirm identity
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## File input

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputFileExample = () => {
  return (
    <>
      <div className="mb-3">
        <CFormInput type="file" id="formFile" label="Default file input example" />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileMultiple"
          label="Multiple files input example"
          multiple
        />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileDisabled"
          label="Disabled file input example"
          disabled
        />
      </div>
      <div className="mb-3">
        <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
      </div>
      <div>
        <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
      </div>
    </>
  )
}
```

## Color

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputColorExample = () => {
  return (
    <CFormInput
      type="color"
      id="exampleColorInput"
      defaultValue="#563d7c"
      label="Color picker"
      title="Choose your color"
    />
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormInput /&gt;](./api/#cforminput)
- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
- [&lt;CFormLabel /&gt;](./api/#cformlabel)
- [&lt;CFormText /&gt;](./api/#cformtext)


---

# React Input Mask

> React input masks allow you to regulate the format of data entered. You can enhance data entry accuracy by implementing react input masks for fields with consistent formatting requirements. This ensures that users input data correctly, such as accurately formatted phone numbers in a designated phone number field.

## Usage

While CoreUI for React does not currently include a 'mask' feature, it can be enhanced by leveraging existing libraries like `react-imask` to extend the functionality of our components.

To enable the extension of the `` component, please ensure that you have installed `react-imask` first.

```bash tab={"label":"Npm"}
npm install react-imask
```

```bash tab={"label":"Yarn"}
yarn add react-imask
```

Once you have installed react-imask, you can proceed to create a custom component with a mask.

```jsx
import { IMaskMixin } from 'react-imask'
```

```jsx
const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
  <CFormInput
    {...props}
    ref={inputRef} // bind internal input
  />
))
```

Here is an example of a date mask for reference.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'
import { IMaskMixin } from 'react-imask'

const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
  <CFormInput {...props} ref={inputRef} />
))

export const InputMaskExample = () => {
  return (
    <CFormInputWithMask
      mask={Date}
      min={new Date(1990, 0, 1)}
      max={new Date(2020, 0, 1)}
      lazy={false}
    />
  )
}
```

## Example masks

Please take a moment to review some example masks you can use for reference. These examples serve as helpful templates for implementing input masks and can assist you in effectively controlling data entry formats.

### Phone

This example react input mask for a phone number follows the format commonly used in North America. It consists of three groups of numbers: the area code enclosed in parentheses, followed by a space, and then the seven-digit phone number separated by a hyphen.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'
import { IMaskMixin } from 'react-imask'

const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
  <CFormInput {...props} ref={inputRef} />
))

export const InputMaskPhoneExample = () => {
  return <CFormInputWithMask mask="+{1}(000)000-00-00" />
}
```

### Credit Card

The provided code snippet demonstrates an implementation of an react input mask for a credit card number using the IMask library in JavaScript. The mask is set to "0000 0000 0000 0000", indicating that the input should consist of a 16-digit credit card number with spaces separating every four digits. The component renders an input field with the specified mask, allowing users to enter credit card numbers in the desired format.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'
import { IMaskMixin } from 'react-imask'

const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
  <CFormInput {...props} ref={inputRef} />
))

export const InputMaskCreditCardExample = () => {
  return <CFormInputWithMask mask="0000 0000 0000 0000" />
}
```

For more information on how to use the input mask, you can refer to the following resource: https://imask.js.org/


---

# React 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 `<CFormLabel>`s outside the input group.

```html
import React from 'react'
import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon1">@</CInputGroupText>
        <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
      </CInputGroup>

      <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
        <CFormInput id="basic-url" aria-describedby="basic-addon3" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CFormInput aria-label="Amount (to the nearest dollar)" />
        <CInputGroupText>.00</CInputGroupText>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput placeholder="Username" aria-label="Username" />
        <CInputGroupText>@</CInputGroupText>
        <CFormInput placeholder="Server" aria-label="Server" />
      </CInputGroup>

      <CInputGroup>
        <CInputGroupText>With textarea</CInputGroupText>
        <CFormTextarea aria-label="With textarea"></CFormTextarea>
      </CInputGroup>
    </>
  )
}
```

## 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`.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupWrappingExample = () => {
  return (
    <CInputGroup className="flex-nowrap">
      <CInputGroupText id="addon-wrapping">@</CInputGroupText>
      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
    </CInputGroup>
  )
}
```

## Sizing

Add the relative form sizing classes to the `<CInputGroup>` 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.**

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupSizingExample = () => {
  return (
    <>
      <CInputGroup size="sm" className="mb-3">
        <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
        <CFormInput
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
        />
      </CInputGroup>

      <CInputGroup size="lg">
        <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
      </CInputGroup>
    </>
  )
}
```

## Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.

```html
import React from 'react'
import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCheckboxesAndRadiosExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText>
          <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input" />
        </CInputGroupText>
        <CFormInput aria-label="Text input with checkbox" />
      </CInputGroup>

      <CInputGroup>
        <CInputGroupText>
          <CFormCheck type="radio" value="" aria-label="Radio button for following text input" />
        </CInputGroupText>
        <CFormInput aria-label="Text input with radio button" />
      </CInputGroup>
    </>
  )
}
```

## Multiple inputs

While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleInputsExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>First and last name</CInputGroupText>
      <CFormInput aria-label="First name" />
      <CFormInput aria-label="Last name" />
    </CInputGroup>
  )
}
```

## Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleAddonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CInputGroupText>0.00</CInputGroupText>
        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
        <CInputGroupText>$</CInputGroupText>
        <CInputGroupText>0.00</CInputGroupText>
      </CInputGroup>
    </>
  )
}
```

## Button addons

```html
import React from 'react'
import { CButton, CFormInput, CInputGroup } from '@coreui/react'

export const InputGroupButtonAddonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline" id="button-addon1">
          Button
        </CButton>
        <CFormInput
          placeholder=""
          aria-label="Example text with button addon"
          aria-describedby="button-addon1"
        />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        />
        <CButton type="button" color="secondary" variant="outline" id="button-addon2">
          Button
        </CButton>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CFormInput placeholder="" aria-label="Example text with two button addons" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username with two button addons"
        />
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
      </CInputGroup>
    </>
  )
}
```

## Buttons with dropdowns

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupButtonsWithDropdownsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CDropdown variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with dropdown button" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput aria-label="Text input with dropdown button" />
        <CDropdown alignment="end" variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>

      <CInputGroup>
        <CDropdown variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with 2 dropdown buttons" />
        <CDropdown alignment="end" variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>
    </>
  )
}
```

## Segmented buttons

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupSegmentedButtonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CDropdown variant="input-group">
          <CButton type="button" color="secondary" variant="outline">
            Action
          </CButton>
          <CDropdownToggle color="secondary" variant="outline" split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with segmented dropdown button" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput aria-label="Text input with segmented dropdown button" />
        <CDropdown alignment="end" variant="input-group">
          <CButton type="button" color="secondary" variant="outline">
            Action
          </CButton>
          <CDropdownToggle color="secondary" variant="outline" split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>
    </>
  )
}
```

## Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

### Custom select

```html
import React from 'react'
import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomSelectExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupSelect01">
          Options
        </CInputGroupText>
        <CFormSelect id="inputGroupSelect01">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CFormSelect id="inputGroupSelect02">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
        <CInputGroupText as="label" htmlFor="inputGroupSelect02">
          Options
        </CInputGroupText>
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CInputGroup>
      <CInputGroup>
        <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
      </CInputGroup>
      Custom file input# Upload
    </>
  )
}
```

### Custom file input

```html
import React from 'react'
import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomFileInputExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupFile01">
          Upload
        </CInputGroupText>
        <CFormInput type="file" id="inputGroupFile01" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput type="file" id="inputGroupFile02" />
        <CInputGroupText as="label" htmlFor="inputGroupFile02">
          Upload
        </CInputGroupText>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">
          Button
        </CButton>
        <CFormInput
          type="file"
          id="inputGroupFile03"
          aria-describedby="inputGroupFileAddon03"
          aria-label="Upload"
        />
      </CInputGroup>

      <CInputGroup>
        <CFormInput
          type="file"
          id="inputGroupFile04"
          aria-describedby="inputGroupFileAddon04"
          aria-label="Upload"
        />
        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">
          Button
        </CButton>
      </CInputGroup>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CInputGroup /&gt;](./api/#cinputgroup)
- [&lt;CInputGroupText /&gt;](./api/#cinputgrouptext)


---

# React Multi Select Component

> Customize the native <select>s with a powerful React Multi Select component that changes the element’s initial appearance and brings some new functionalities.

## Basic example

A clear demonstration of implementing a basic React Multi Select dropdown, highlighting essential options and configurations.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return (
    <CMultiSelect
      options={options}
      label="Framework"
      text="Please select your framework."
      search="global"
      value={[3, 4, 5]}
    />
  )
}
```

## Search

You can configure the search functionality within the component. The `search` property determines how the search input element is enabled and behaves. It accepts multiple types to provide flexibility in configuring search behavior. By default is set to `true`.

### Disabled search

To disable the default search input element, please set `search` property to `false` like in the example below:

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSearchDisabledExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return (
    <CMultiSelect
      options={options}
      label="Framework"
      text="Please select your framework."
      search={false}
    />
  )
}
```

### Global search

<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.8.0</small>

To enable the global search functionality within the React Multi Select component, please set `search` property to `'global'`. When global search is turned on, the user can perform searches across the entire component, regardless of where their focus is within the component. This allows for a more flexible and intuitive search experience, ensuring the search input is recognized from any point within the component.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSearchGlobalExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return (
    <CMultiSelect
      options={options}
      label="Framework"
      text="Please select your framework."
      search="global"
    />
  )
}
```

### External search

When external search is enabled (`search="external"`), the component delegates search operations to an external API. This setup is ideal for scenarios where third-party services or custom backend implementations power search capabilities. 

```jsx
<CMultiSelect options={...} onFilterChange={...} search="external" />
```

If you want to enable both external (API-handled) and global search:

```jsx
<CMultiSelect options={...} onFilterChange={...} search={{ external: true, global: true }} />
```

Please check the [External Data](#external-data) section to check a working example of how to handle external data.

## Modes

### Allow create options

The `allowCreateOptions` property in the `` component 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, and if the option does not already 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 select an option that is not already available.

> It's worth noting that this feature may not always be appropriate, 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.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectAllowCreateOptionsExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect allowCreateOptions options={options} />
}
```

### Clear search on select

The `clearSearchOnSelect` property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI React 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 React library, you simply need to set it to `true` or `false` as appropriate in your code. For example:

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectClearSearchOnSelectExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect clearSearchOnSelect options={options} />
}
```

In this example, the `clearSearchOnSelect` property is set to `true`, which means that the search input field will be cleared as soon as the user selects an option from the dropdown list.

## Selection types

The React Multi Select component enables users to present selected items in multiple ways. Users can choose to display selected items as a counter, tags, or a list of comma-separated values.

To change the way that selected items are displayed, you can use the `selectionType` property to set the presentation type.

### Tags

By default, the `selectionType` property is set to `"tags"`, which displays selected options as tags. Users can remove a selected option by pressing the "X" button.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectionTypesTagsExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} selectionType="tags" />
}
```

### Counter

In the example below, selected items from the list are counted and presented in the form of a counter. To use this option, set the `selectionType` to `"counter"`.

To further customize the counter, the `selectionTypeCounterText` property allows you to set the text that is displayed after the counter.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectionTypesCounterExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} selectionType="counter" />
}
```

### Text

To display the list of selected options as comma-separated text values, set the `selectionType` property to `"text"`.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectionTypesTextExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} selectionType="text" />
}
```

## Select all

_Added in 5.26.0._

When `multiple` is enabled, a **select all** button is rendered in the dropdown header (toggle it with the `selectAll` property, on by default). The button works as a toggle: it selects every option and its label switches to `deselectAllLabel`, then deselects everything on the next click.

With the default `selectAllStyle="checkbox"` the button shows a tri-state indicator that mirrors the overall selection — `none` when nothing is selected, `all` when everything is, and `indeterminate` in between. Set `selectAllStyle="text"` for a plain text toggle instead.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectAllExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} search />
}
```

### Acting on filtered options

By default (`selectAllMode="all"`) the header button acts on the full list, ignoring the current filter. Set `selectAllMode="filtered"` to scope the button to the options currently matched by the search filter. The button's label and checkbox then answer "are all *filtered* options selected?". With no active filter, every option matches, so this behaves exactly like `"all"`.

To avoid a misleading "Select all" while a filter is active, the label switches to `selectFilteredLabel` / `deselectFilteredLabel` (default `Select filtered` / `Deselect filtered`) whenever the filter actually narrows the list — and falls back to `selectAllLabel` / `deselectAllLabel` when nothing is hidden.

Type into the search box below, then use select all — only the matching options are selected.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectAllModeExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} search selectAllMode="filtered" />
}
```

Because the scope follows the filter, a side effect is worth knowing: if you select all options while a filter is active (so the checkbox shows `all`) and then clear the search, the checkbox drops to `indeterminate` — the previously hidden, unselected options are now back in the list, so not everything in view is selected anymore.

### Hiding select all when search has no results

_Added in 5.27.0._

When `search` is enabled and the user types a query that matches no options, there is nothing left to select — so leaving the **select all** button visible above the empty "No results found" message is misleading. By default (`hideSelectAllOnSearchNoResults={true}`) the component hides the whole dropdown header in that case, and brings it back as soon as the search matches at least one option again.

Type a query that matches nothing (for example `xyz`) into the example below — the select all button disappears together with the options, then returns when you clear or change the search.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectHideSelectAllExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} search />
}
```

Set `hideSelectAllOnSearchNoResults={false}` to keep the header (and the select all button) visible even when the search returns no results.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectKeepSelectAllExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} search hideSelectAllOnSearchNoResults={false} />
}
```

This option only affects the built-in select all button. A [custom dropdown header](#custom-dropdown-header) is always rendered, since it may contain controls unrelated to the options list.

## Selection limit

_Added in 5.26.0._

Use the `selectionLimit` property to limit how many options can be selected. The select all button stays enabled and selects options up to the limit, then toggles to deselect all once the limit is reached. The `onSelectionLimit` callback fires when a user tries to select more options than allowed — use it to show feedback.

```html
import React, { useState } from 'react'
import { CAlert } from '@coreui/react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectionLimitExample = () => {
  const [limitReached, setLimitReached] = useState(false)

  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return (
    <>
      {limitReached && (
        <CAlert color="warning" dismissible onClose={() => setLimitReached(false)}>
          You can select up to 3 options.
        </CAlert>
      )}
      <CMultiSelect
        options={options}
        search
        selectionLimit={3}
        onSelectionLimit={() => setLimitReached(true)}
      />
    </>
  )
}
```

## Selectable groups

_Added in 5.26.0._

Enable `optionsGroupsSelectable` to turn each group label into its own tri-state checkbox that toggles the whole group. Because the indicator is rendered with CSS, it supports a third, `indeterminate` state — shown when only some of a group's options are selected — without any real `<input>` element. Each section's indicator follows its own `*Style` property (`optionsStyle`, `optionsGroupsStyle`, `selectAllStyle`, all defaulting to `'checkbox'`) and requires `multiple`.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSelectableGroupsExample = () => {
  const options = [
    {
      label: 'Frontend',
      options: [
        {
          value: 0,
          label: 'Angular',
        },
        {
          value: 1,
          label: 'Bootstrap',
        },
        {
          value: 2,
          label: 'React.js',
        },
        {
          value: 3,
          label: 'Vue.js',
        },
      ],
    },
    {
      label: 'Backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect options={options} search optionsGroupsSelectable />
}
```

## Custom dropdown header

_Added in 5.26.0._

Use the `headerTemplate` property to fully customize the dropdown header — the area above the options list — including rendering several action buttons. It replaces the built-in select all button and renders independently of `selectAll`. The render function receives a `state` object (`{ selected, total, filtered, filteredSelected }`) and an `actions` object (`{ selectAll, deselectAll, selectFiltered, deselectFiltered }`) with the component's selection methods, so you can wire your own controls. It re-renders on every selection change and search filter, so labels and `disabled` states stay up to date.

```html
import React from 'react'
import { CButton } from '@coreui/react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectHeaderTemplateExample = () => {
  const options = [
    {
      value: 'angular',
      label: 'Angular',
    },
    {
      value: 'bootstrap',
      label: 'Bootstrap',
    },
    {
      value: 'react',
      label: 'React.js',
    },
    {
      value: 'vue',
      label: 'Vue.js',
    },
    {
      value: 'django',
      label: 'Django',
    },
    {
      value: 'laravel',
      label: 'Laravel',
    },
    {
      value: 'node',
      label: 'Node.js',
    },
  ]

  return (
    <CMultiSelect
      options={options}
      placeholder="Select frameworks"
      search
      headerTemplate={(state, actions) => (
        <div className="d-flex flex-wrap gap-2">
          <CButton
            size="sm"
            color="primary"
            disabled={state.selected >= state.total}
            onClick={() => actions.selectAll()}
          >
            Select all ({state.total})
          </CButton>
          <CButton
            size="sm"
            color="secondary"
            disabled={state.filtered === state.filteredSelected}
            onClick={() => actions.selectFiltered()}
          >
            Select filtered ({state.filtered})
          </CButton>
          <CButton
            size="sm"
            color="secondary"
            variant="outline"
            disabled={state.filteredSelected === 0}
            onClick={() => actions.deselectFiltered()}
          >
            Deselect filtered ({state.filteredSelected})
          </CButton>
          <CButton
            size="sm"
            color="danger"
            variant="outline"
            disabled={state.selected === 0}
            onClick={() => actions.deselectAll()}
          >
            Deselect all ({state.selected})
          </CButton>
        </div>
      )}
    />
  )
}
```

## Single Selection

Set the `multiple` boolean property to `false` and allow select only one element.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSingleSelectionExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
    },
    {
      value: 1,
      label: 'Bootstrap',
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect multiple={false} options={options} value={5} />
}
```

## Custom options and options group labels

The CoreUI React Multi Select component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the `optionsTemplate`, and for groups, you can use `optionsGroupsTemplate`, as demonstrated in the examples below:

```html
import React from 'react'
import { cifPl, cifDe, cifUs, cifEs, cifGb } from '@coreui/icons'
import CIcon from '@coreui/icons-react'
import { CCol, CRow } from '@coreui/react'
import { CMultiSelect } from '@coreui/react-pro'

type FlagsMap = {
  [key: string]: string[]
}

export const MultiSelectCustomOptionsExample = () => {
  const flags: FlagsMap = {
    de: cifDe,
    es: cifEs,
    gb: cifGb,
    pl: cifPl,
    us: cifUs,
  }

  const countries = [
    {
      value: 'pl',
      label: 'Poland',
    },
    {
      value: 'de',
      label: 'Germany',
    },
    {
      value: 'us',
      label: 'United States',
    },
    {
      value: 'es',
      label: 'Spain',
    },
    {
      value: 'gb',
      label: 'United Kingdom',
    },
  ]

  const cities = [
    {
      label: 'United States',
      code: 'us',
      options: [
        {
          value: 'au',
          label: 'Austin',
        },
        {
          value: 'ch',
          label: 'Chicago',
        },
        {
          value: 'la',
          label: 'Los Angeles',
        },
        {
          value: 'ny',
          label: 'New York',
        },
        {
          value: 'sa',
          label: 'San Jose',
        },
      ],
    },
    {
      label: 'United Kingdom',
      code: 'gb',
      options: [
        {
          value: 'li',
          label: 'Liverpool',
        },
        {
          value: 'lo',
          label: 'London',
        },
        {
          value: 'ma',
          label: 'Manchester',
        },
      ],
    },
  ]

  return (
    <CRow>
      <CCol md={6}>
        <CMultiSelect
          label="Select country"
          options={countries}
          optionsStyle="text"
          optionsTemplate={(option) => (
            <div className="d-flex">
              <CIcon className="me-3" icon={flags[option.value]} size="xl" /> {option.label}
            </div>
          )}
        />
      </CCol>
      <CCol md={6}>
        <CMultiSelect
          label="Select city"
          options={cities}
          optionsGroupsTemplate={(option) => (
            <div className="d-flex align-items-center">
              <CIcon className="me-3" icon={flags[option.code]} size="xl" /> {option.label}
            </div>
          )}
        />
      </CCol>
    </CRow>
  )
}
```

## Coordinated selection

The selection of React select components can be coordinated by dynamically updating city options based on the selected country. Use the `resetSelectionOnOptionsChange` prop on the city select component to reset the selected city whenever the country changes, ensuring synchronized selections.

```html
import React, { useState } from 'react'
import { cifPl, cifDe, cifUs, cifEs, cifGb } from '@coreui/icons'
import CIcon from '@coreui/icons-react'
import { CCol, CRow } from '@coreui/react'
import { CMultiSelect } from '@coreui/react-pro'
import type { Option } from '@coreui/react-pro/src/components/multi-select/types'

type FlagsMap = {
  [key: string]: string[]
}

export const MultiSelectCoordinatedSelectionExample = () => {
  const [cities, setCities] = useState([])

  const countries = [
    {
      value: 'pl',
      label: 'Poland',
      cities: [
        { value: 'warszawa', label: 'Warszawa' },
        { value: 'krakow', label: 'Kraków' },
        { value: 'lodz', label: 'Łódź' },
        { value: 'wroclaw', label: 'Wrocław' },
        { value: 'poznan', label: 'Poznań' },
      ],
    },
    {
      value: 'de',
      label: 'Germany',
      cities: [
        { value: 'berlin', label: 'Berlin' },
        { value: 'hamburg', label: 'Hamburg' },
        { value: 'munich', label: 'Munich' },
        { value: 'cologne', label: 'Cologne' },
        { value: 'frankfurt', label: 'Frankfurt' },
      ],
    },
    {
      value: 'us',
      label: 'United States',
      cities: [
        { value: 'new_york', label: 'New York' },
        { value: 'los_angeles', label: 'Los Angeles' },
        { value: 'chicago', label: 'Chicago' },
        { value: 'houston', label: 'Houston' },
        { value: 'phoenix', label: 'Phoenix' },
      ],
    },
    {
      value: 'es',
      label: 'Spain',
      cities: [
        { value: 'madrid', label: 'Madrid' },
        { value: 'barcelona', label: 'Barcelona' },
        { value: 'valencia', label: 'Valencia' },
        { value: 'seville', label: 'Seville' },
        { value: 'zaragoza', label: 'Zaragoza' },
      ],
    },
    {
      value: 'gb',
      label: 'United Kingdom',
      cities: [
        { value: 'london', label: 'London' },
        { value: 'birmingham', label: 'Birmingham' },
        { value: 'manchester', label: 'Manchester' },
        { value: 'glasgow', label: 'Glasgow' },
        { value: 'liverpool', label: 'Liverpool' },
      ],
    },
  ]

  const flags: FlagsMap = {
    de: cifDe,
    es: cifEs,
    gb: cifGb,
    pl: cifPl,
    us: cifUs,
  }

  return (
    <CRow>
      <CCol md={6}>
        <CMultiSelect
          label="Select country"
          multiple={false}
          onChange={(country: Option[]) => {
            setCities(country.length > 0 ? country[0].cities : [])
          }}
          options={countries}
          optionsStyle="text"
          optionsTemplate={(option) => (
            <div className="d-flex">
              <CIcon className="me-3" icon={flags[option.value]} size="xl" /> {option.label}
            </div>
          )}
        />
      </CCol>
      <CCol md={6}>
        <CMultiSelect
          label="Select city"
          multiple={false}
          options={cities}
          optionsStyle="text"
          resetSelectionOnOptionsChange
        />
      </CCol>
    </CRow>
  )
}
```

## Disabled

Add the `disabled` boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectDisabledExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
      selected: true,
      disabled: true,
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
          selected: true,
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return <CMultiSelect disabled options={options} />
}
```

## Sizing

You may also choose from small and large multi selects to match our similarly sized text inputs.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CMultiSelect } from '@coreui/react-pro'

export const MultiSelectSizingExample = () => {
  const options = [
    {
      value: 0,
      label: 'Angular',
      selected: true,
    },
    {
      value: 1,
      label: 'Bootstrap',
    },
    {
      value: 2,
      label: 'React.js',
    },
    {
      value: 3,
      label: 'Vue.js',
    },
    {
      label: 'backend',
      options: [
        {
          value: 4,
          label: 'Django',
        },
        {
          value: 5,
          label: 'Laravel',
        },
        {
          value: 6,
          label: 'Node.js',
        },
      ],
    },
  ]

  return (
    <CRow>
      <CCol md={6} className="mb-3">
        <CMultiSelect options={options} selectionType="counter" size="lg" />
      </CCol>
      <CCol md={6} className="mb-3">
        <CMultiSelect options={options} size="lg" />
      </CCol>
      <CCol md={6}>
        <CMultiSelect options={options} selectionType="counter" size="sm" />
      </CCol>
      <CCol md={6}>
        <CMultiSelect options={options} size="sm" />
      </CCol>
    </CRow>
  )
}
```

## Virtual Scroller (1000 records)

To enhance performance and manage large amounts of data in React Multi Select, you can generate a list of options using ``. This component renders only the items currently visible on the screen, and as the user scrolls, new items are dynamically loaded and added to the view. This helps to reduce the data load and processing time, resulting in a more responsive UI.

To enable Virtual Scroller, simply set the `virtualScroller` boolean property to `true`, as shown in the example below.

```html
import React from 'react'
import { CMultiSelect } from '@coreui/react-pro'

const users = [
  {
    value: '1',
    label: 'Nanon',
  },
  {
    value: '2',
    label: 'Uriel',
  },
  {
    value: '3',
    label: 'Gilbertine',
  },
  {
    value: '4',
    label: 'Flo',
  },
  {
    value: '5',
    label: 'Husein',
  },
  {
    value: '6',
    label: 'Laurence',
  },
  {
    value: '7',
    label: 'Roberta',
  },
  {
    value: '8',
    label: 'Anjela',
  },
  {
    value: '9',
    label: 'Averill',
  },
  {
    value: '10',
    label: 'Ashlin',
  },
  {
    value: '11',
    label: 'Vilma',
  },
  {
    value: '12',
    label: 'Marcello',
  },
  {
    value: '13',
    label: 'Zacharias',
  },
  {
    value: '14',
    label: 'Nancee',
  },
  {
    value: '15',
    label: 'Dannye',
  },
  {
    value: '16',
    label: 'Janaye',
  },
  {
    value: '17',
    label: 'Camel',
  },
  {
    value: '18',
    label: 'Abbott',
  },
  {
    value: '19',
    label: 'Jamima',
  },
  {
    value: '20',
    label: 'Rossy',
  },
  {
    value: '21',
    label: 'Vinson',
  },
  {
    value: '22',
    label: 'Rockwell',
  },
  {
    value: '23',
    label: 'Wyatt',
  },
  {
    value: '24',
    label: 'Berny',
  },
  {
    value: '25',
    label: 'Augustine',
  },
  {
    value: '26',
    label: 'Levon',
  },
  {
    value: '27',
    label: 'Angil',
  },
  {
    value: '28',
    label: 'Aubree',
  },
  {
    value: '29',
    label: 'Mona',
  },
  {
    value: '30',
    label: 'Alva',
  },
  {
    value: '31',
    label: 'Tessi',
  },
  {
    value: '32',
    label: 'Nico',
  },
  {
    value: '33',
    label: 'Cull',
  },
  {
    value: '34',
    label: 'Dexter',
  },
  {
    value: '35',
    label: 'Ethelin',
  },
  {
    value: '36',
    label: 'Sileas',
  },
  {
    value: '37',
    label: 'Jerrilee',
  },
  {
    value: '38',
    label: 'Esmaria',
  },
  {
    value: '39',
    label: 'Alys',
  },
  {
    value: '40',
    label: 'Milty',
  },
  {
    value: '41',
    label: 'Rodrick',
  },
  {
    value: '42',
    label: 'Lanae',
  },
  {
    value: '43',
    label: 'Gisele',
  },
  {
    value: '44',
    label: 'Guss',
  },
  {
    value: '45',
    label: 'Darbee',
  },
  {
    value: '46',
    label: 'Jaymie',
  },
  {
    value: '47',
    label: 'Mattias',
  },
  {
    value: '48',
    label: 'Lonna',
  },
  {
    value: '49',
    label: 'Emmanuel',
  },
  {
    value: '50',
    label: 'Leigh',
  },
  {
    value: '51',
    label: 'Devonna',
  },
  {
    value: '52',
    label: 'Timothea',
  },
  {
    value: '53',
    label: 'Aggi',
  },
  {
    value: '54',
    label: 'Simone',
  },
  {
    value: '55',
    label: 'Tiertza',
  },
  {
    value: '56',
    label: 'Gay',
  },
  {
    value: '57',
    label: 'Barbee',
  },
  {
    value: '58',
    label: 'Odetta',
  },
  {
    value: '59',
    label: 'Nelly',
  },
  {
    value: '60',
    label: 'Kendrick',
  },
  {
    value: '61',
    label: 'Ave',
  },
  {
    value: '62',
    label: 'Hedy',
  },
  {
    value: '63',
    label: 'Minny',
  },
  {
    value: '64',
    label: 'Read',
  },
  {
    value: '65',
    label: 'Dick',
  },
  {
    value: '66',
    label: 'De',
  },
  {
    value: '67',
    label: 'Nerita',
  },
  {
    value: '68',
    label: 'Ahmad',
  },
  {
    value: '69',
    label: 'Myrtie',
  },
  {
    value: '70',
    label: 'Alena',
  },
  {
    value: '71',
    label: 'Lin',
  },
  {
    value: '72',
    label: 'Lenard',
  },
  {
    value: '73',
    label: 'Sergei',
  },
  {
    value: '74',
    label: 'Gilda',
  },
  {
    value: '75',
    label: 'Minnaminnie',
  },
  {
    value: '76',
    label: 'Livvy',
  },
  {
    value: '77',
    label: 'Gaultiero',
  },
  {
    value: '78',
    label: 'Adolf',
  },
  {
    value: '79',
    label: 'Penrod',
  },
  {
    value: '80',
    label: 'Robb',
  },
  {
    value: '81',
    label: 'Cass',
  },
  {
    value: '82',
    label: 'Rivi',
  },
  {
    value: '83',
    label: 'Emmalyn',
  },
  {
    value: '84',
    label: 'Petronella',
  },
  {
    value: '85',
    label: 'Claiborn',
  },
  {
    value: '86',
    label: 'Torrey',
  },
  {
    value: '87',
    label: 'Leslie',
  },
  {
    value: '88',
    label: 'Ginelle',
  },
  {
    value: '89',
    label: 'Rosalie',
  },
  {
    value: '90',
    label: 'Farrel',
  },
  {
    value: '91',
    label: 'Adina',
  },
  {
    value: '92',
    label: 'Shandra',
  },
  {
    value: '93',
    label: 'Annice',
  },
  {
    value: '94',
    label: 'Carly',
  },
  {
    value: '95',
    label: 'Julius',
  },
  {
    value: '96',
    label: 'Ambrosi',
  },
  {
    value: '97',
    label: 'Deane',
  },
  {
    value: '98',
    label: 'Fritz',
  },
  {
    value: '99',
    label: 'Janella',
  },
  {
    value: '100',
    label: 'Mattie',
  },
  {
    value: '101',
    label: 'Catherin',
  },
  {
    value: '102',
    label: 'Anett',
  },
  {
    value: '103',
    label: 'Corenda',
  },
  {
    value: '104',
    label: 'Foster',
  },
  {
    value: '105',
    label: 'Clim',
  },
  {
    value: '106',
    label: 'Meghan',
  },
  {
    value: '107',
    label: 'Dalton',
  },
  {
    value: '108',
    label: 'Boris',
  },
  {
    value: '109',
    label: 'Salli',
  },
  {
    value: '110',
    label: 'Hailey',
  },
  {
    value: '111',
    label: 'Dalston',
  },
  {
    value: '112',
    label: 'Brittni',
  },
  {
    value: '113',
    label: 'Weston',
  },
  {
    value: '114',
    label: 'Dennie',
  },
  {
    value: '115',
    label: 'Michael',
  },
  {
    value: '116',
    label: 'Melli',
  },
  {
    value: '117',
    label: 'Cate',
  },
  {
    value: '118',
    label: 'Humfried',
  },
  {
    value: '119',
    label: 'Tomkin',
  },
  {
    value: '120',
    label: 'Lenna',
  },
  {
    value: '121',
    label: 'Margo',
  },
  {
    value: '122',
    label: 'Roxane',
  },
  {
    value: '123',
    label: 'Nichole',
  },
  {
    value: '124',
    label: 'Heriberto',
  },
  {
    value: '125',
    label: 'Jobey',
  },
  {
    value: '126',
    label: 'Warner',
  },
  {
    value: '127',
    label: 'Gabriellia',
  },
  {
    value: '128',
    label: 'Letta',
  },
  {
    value: '129',
    label: 'Sybyl',
  },
  {
    value: '130',
    label: 'Mathian',
  },
  {
    value: '131',
    label: 'Ange',
  },
  {
    value: '132',
    label: 'Millicent',
  },
  {
    value: '133',
    label: 'Katee',
  },
  {
    value: '134',
    label: 'Casar',
  },
  {
    value: '135',
    label: 'Marta',
  },
  {
    value: '136',
    label: 'Missy',
  },
  {
    value: '137',
    label: 'Rosemarie',
  },
  {
    value: '138',
    label: 'Valentia',
  },
  {
    value: '139',
    label: 'Sybilla',
  },
  {
    value: '140',
    label: 'Karole',
  },
  {
    value: '141',
    label: 'Pandora',
  },
  {
    value: '142',
    label: 'Gwenny',
  },
  {
    value: '143',
    label: 'Desmund',
  },
  {
    value: '144',
    label: 'Joseph',
  },
  {
    value: '145',
    label: 'Marna',
  },
  {
    value: '146',
    label: 'Siusan',
  },
  {
    value: '147',
    label: 'Corly',
  },
  {
    value: '148',
    label: 'Judye',
  },
  {
    value: '149',
    label: 'Velvet',
  },
  {
    value: '150',
    label: 'Phyllida',
  },
  {
    value: '151',
    label: 'Jeramey',
  },
  {
    value: '152',
    label: 'Kendra',
  },
  {
    value: '153',
    label: 'Cherida',
  },
  {
    value: '154',
    label: 'Dunn',
  },
  {
    value: '155',
    label: 'Jonie',
  },
  {
    value: '156',
    label: 'Archibold',
  },
  {
    value: '157',
    label: 'Monique',
  },
  {
    value: '158',
    label: 'Micky',
  },
  {
    value: '159',
    label: 'Chrysler',
  },
  {
    value: '160',
    label: 'Franchot',
  },
  {
    value: '161',
    label: 'Gaston',
  },
  {
    value: '162',
    label: 'Ajay',
  },
  {
    value: '163',
    label: 'Chet',
  },
  {
    value: '164',
    label: 'Huntington',
  },
  {
    value: '165',
    label: 'Gerald',
  },
  {
    value: '166',
    label: 'Janeta',
  },
  {
    value: '167',
    label: 'Helaina',
  },
  {
    value: '168',
    label: 'Morty',
  },
  {
    value: '169',
    label: 'Issie',
  },
  {
    value: '170',
    label: 'Lammond',
  },
  {
    value: '171',
    label: 'Izaak',
  },
  {
    value: '172',
    label: 'Tybi',
  },
  {
    value: '173',
    label: 'Phaedra',
  },
  {
    value: '174',
    label: 'Misha',
  },
  {
    value: '175',
    label: 'Merralee',
  },
  {
    value: '176',
    label: 'Arni',
  },
  {
    value: '177',
    label: 'Vassily',
  },
  {
    value: '178',
    label: 'Alvira',
  },
  {
    value: '179',
    label: 'Dani',
  },
  {
    value: '180',
    label: 'Joannes',
  },
  {
    value: '181',
    label: 'Jarib',
  },
  {
    value: '182',
    label: 'Virgie',
  },
  {
    value: '183',
    label: 'Pauly',
  },
  {
    value: '184',
    label: 'Chancey',
  },
  {
    value: '185',
    label: 'Deni',
  },
  {
    value: '186',
    label: 'Jaynell',
  },
  {
    value: '187',
    label: 'Mirabella',
  },
  {
    value: '188',
    label: 'Elizabet',
  },
  {
    value: '189',
    label: 'Clay',
  },
  {
    value: '190',
    label: 'Chastity',
  },
  {
    value: '191',
    label: 'Bethanne',
  },
  {
    value: '192',
    label: 'Gwenette',
  },
  {
    value: '193',
    label: 'Mommy',
  },
  {
    value: '194',
    label: 'Ferris',
  },
  {
    value: '195',
    label: 'Mahmud',
  },
  {
    value: '196',
    label: 'Tami',
  },
  {
    value: '197',
    label: 'Stirling',
  },
  {
    value: '198',
    label: 'Neron',
  },
  {
    value: '199',
    label: 'Basile',
  },
  {
    value: '200',
    label: 'Theadora',
  },
  {
    value: '201',
    label: 'Raffarty',
  },
  {
    value: '202',
    label: 'Kim',
  },
  {
    value: '203',
    label: 'Darren',
  },
  {
    value: '204',
    label: 'Sydney',
  },
  {
    value: '205',
    label: 'Bogey',
  },
  {
    value: '206',
    label: 'Guss',
  },
  {
    value: '207',
    label: 'Kristopher',
  },
  {
    value: '208',
    label: 'Jillie',
  },
  {
    value: '209',
    label: 'Sal',
  },
  {
    value: '210',
    label: 'Chad',
  },
  {
    value: '211',
    label: 'Martha',
  },
  {
    value: '212',
    label: 'Tommy',
  },
  {
    value: '213',
    label: 'Krispin',
  },
  {
    value: '214',
    label: 'Benson',
  },
  {
    value: '215',
    label: 'Trumaine',
  },
  {
    value: '216',
    label: 'Dulcia',
  },
  {
    value: '217',
    label: 'Esmaria',
  },
  {
    value: '218',
    label: 'Aldrich',
  },
  {
    value: '219',
    label: 'Rita',
  },
  {
    value: '220',
    label: 'Alikee',
  },
  {
    value: '221',
    label: 'Jackie',
  },
  {
    value: '222',
    label: 'Hynda',
  },
  {
    value: '223',
    label: 'Fayre',
  },
  {
    value: '224',
    label: 'Vale',
  },
  {
    value: '225',
    label: 'Melessa',
  },
  {
    value: '226',
    label: 'Duane',
  },
  {
    value: '227',
    label: 'Dee',
  },
  {
    value: '228',
    label: 'Lotta',
  },
  {
    value: '229',
    label: 'Piper',
  },
  {
    value: '230',
    label: 'Marieann',
  },
  {
    value: '231',
    label: 'Rodney',
  },
  {
    value: '232',
    label: 'Maurizia',
  },
  {
    value: '233',
    label: 'Abbey',
  },
  {
    value: '234',
    label: 'Joe',
  },
  {
    value: '235',
    label: 'Stanislas',
  },
  {
    value: '236',
    label: 'Thomasa',
  },
  {
    value: '237',
    label: 'Bridgette',
  },
  {
    value: '238',
    label: 'Jemmy',
  },
  {
    value: '239',
    label: 'Fan',
  },
  {
    value: '240',
    label: 'Archambault',
  },
  {
    value: '241',
    label: 'Elissa',
  },
  {
    value: '242',
    label: 'Lori',
  },
  {
    value: '243',
    label: 'Bron',
  },
  {
    value: '244',
    label: 'Jacquette',
  },
  {
    value: '245',
    label: 'Emelina',
  },
  {
    value: '246',
    label: 'Cindelyn',
  },
  {
    value: '247',
    label: 'Adriaens',
  },
  {
    value: '248',
    label: 'Lori',
  },
  {
    value: '249',
    label: 'Gabie',
  },
  {
    value: '250',
    label: 'Wallache',
  },
  {
    value: '251',
    label: 'Brit',
  },
  {
    value: '252',
    label: 'Tuck',
  },
  {
    value: '253',
    label: 'Doralin',
  },
  {
    value: '254',
    label: 'Kenny',
  },
  {
    value: '255',
    label: 'Mercedes',
  },
  {
    value: '256',
    label: 'Persis',
  },
  {
    value: '257',
    label: 'Imogen',
  },
  {
    value: '258',
    label: 'Clywd',
  },
  {
    value: '259',
    label: 'Rosaleen',
  },
  {
    value: '260',
    label: 'Penny',
  },
  {
    value: '261',
    label: 'Natalie',
  },
  {
    value: '262',
    label: 'Julietta',
  },
  {
    value: '263',
    label: 'Paola',
  },
  {
    value: '264',
    label: 'Corabella',
  },
  {
    value: '265',
    label: 'Paddie',
  },
  {
    value: '266',
    label: 'Miguela',
  },
  {
    value: '267',
    label: 'Liesa',
  },
  {
    value: '268',
    label: 'Juditha',
  },
  {
    value: '269',
    label: 'Cherlyn',
  },
  {
    value: '270',
    label: 'Alica',
  },
  {
    value: '271',
    label: 'Opalina',
  },
  {
    value: '272',
    label: 'Allegra',
  },
  {
    value: '273',
    label: 'Emmit',
  },
  {
    value: '274',
    label: 'Liesa',
  },
  {
    value: '275',
    label: 'Tommie',
  },
  {
    value: '276',
    label: 'Micky',
  },
  {
    value: '277',
    label: 'Ranee',
  },
  {
    value: '278',
    label: 'Paddie',
  },
  {
    value: '279',
    label: 'Heddie',
  },
  {
    value: '280',
    label: 'Ruperta',
  },
  {
    value: '281',
    label: 'Justinian',
  },
  {
    value: '282',
    label: 'Earvin',
  },
  {
    value: '283',
    label: 'Gayle',
  },
  {
    value: '284',
    label: 'Guinna',
  },
  {
    value: '285',
    label: 'Muffin',
  },
  {
    value: '286',
    label: 'Marsiella',
  },
  {
    value: '287',
    label: 'Sherye',
  },
  {
    value: '288',
    label: 'Deni',
  },
  {
    value: '289',
    label: 'Auria',
  },
  {
    value: '290',
    label: 'Marion',
  },
  {
    value: '291',
    label: 'Slade',
  },
  {
    value: '292',
    label: 'Bridget',
  },
  {
    value: '293',
    label: 'Rhys',
  },
  {
    value: '294',
    label: 'Abba',
  },
  {
    value: '295',
    label: 'Farlee',
  },
  {
    value: '296',
    label: 'Spenser',
  },
  {
    value: '297',
    label: 'Vicky',
  },
  {
    value: '298',
    label: 'Lory',
  },
  {
    value: '299',
    label: 'Cassaundra',
  },
  {
    value: '300',
    label: 'Bary',
  },
  {
    value: '301',
    label: 'Katie',
  },
  {
    value: '302',
    label: 'Nedi',
  },
  {
    value: '303',
    label: 'Laurena',
  },
  {
    value: '304',
    label: 'Vonnie',
  },
  {
    value: '305',
    label: 'Margo',
  },
  {
    value: '306',
    label: 'Donetta',
  },
  {
    value: '307',
    label: 'Aurelie',
  },
  {
    value: '308',
    label: 'Roby',
  },
  {
    value: '309',
    label: 'Cherie',
  },
  {
    value: '310',
    label: 'Bernita',
  },
  {
    value: '311',
    label: 'Shina',
  },
  {
    value: '312',
    label: 'Lenee',
  },
  {
    value: '313',
    label: 'Nester',
  },
  {
    value: '314',
    label: 'Udale',
  },
  {
    value: '315',
    label: 'Magdalena',
  },
  {
    value: '316',
    label: 'Jania',
  },
  {
    value: '317',
    label: 'Giustina',
  },
  {
    value: '318',
    label: 'Cobb',
  },
  {
    value: '319',
    label: 'Michelle',
  },
  {
    value: '320',
    label: 'Craggy',
  },
  {
    value: '321',
    label: 'Amitie',
  },
  {
    value: '322',
    label: 'Byrle',
  },
  {
    value: '323',
    label: 'Geri',
  },
  {
    value: '324',
    label: 'Eb',
  },
  {
    value: '325',
    label: 'Harlan',
  },
  {
    value: '326',
    label: 'Devy',
  },
  {
    value: '327',
    label: 'Rene',
  },
  {
    value: '328',
    label: 'Yance',
  },
  {
    value: '329',
    label: 'Olin',
  },
  {
    value: '330',
    label: 'Kit',
  },
  {
    value: '331',
    label: 'Alix',
  },
  {
    value: '332',
    label: 'Gerrie',
  },
  {
    value: '333',
    label: 'Katina',
  },
  {
    value: '334',
    label: 'Tedman',
  },
  {
    value: '335',
    label: 'Dev',
  },
  {
    value: '336',
    label: 'Kessiah',
  },
  {
    value: '337',
    label: 'Chester',
  },
  {
    value: '338',
    label: 'Jefferson',
  },
  {
    value: '339',
    label: 'Klement',
  },
  {
    value: '340',
    label: 'Cynde',
  },
  {
    value: '341',
    label: 'Eustace',
  },
  {
    value: '342',
    label: 'Alisha',
  },
  {
    value: '343',
    label: 'Vinnie',
  },
  {
    value: '344',
    label: 'Chaddie',
  },
  {
    value: '345',
    label: 'Evangelia',
  },
  {
    value: '346',
    label: 'Giorgi',
  },
  {
    value: '347',
    label: 'August',
  },
  {
    value: '348',
    label: 'Berthe',
  },
  {
    value: '349',
    label: 'Kendre',
  },
  {
    value: '350',
    label: 'Dorette',
  },
  {
    value: '351',
    label: 'Judie',
  },
  {
    value: '352',
    label: 'Dyanne',
  },
  {
    value: '353',
    label: 'Aksel',
  },
  {
    value: '354',
    label: 'Ardyth',
  },
  {
    value: '355',
    label: 'Langsdon',
  },
  {
    value: '356',
    label: 'Dianemarie',
  },
  {
    value: '357',
    label: 'Megen',
  },
  {
    value: '358',
    label: 'Shanna',
  },
  {
    value: '359',
    label: 'Janene',
  },
  {
    value: '360',
    label: 'Rodney',
  },
  {
    value: '361',
    label: 'Robb',
  },
  {
    value: '362',
    label: 'Meade',
  },
  {
    value: '363',
    label: 'Douglas',
  },
  {
    value: '364',
    label: 'Hazel',
  },
  {
    value: '365',
    label: 'Judie',
  },
  {
    value: '366',
    label: 'Paolina',
  },
  {
    value: '367',
    label: 'Edwina',
  },
  {
    value: '368',
    label: 'Shane',
  },
  {
    value: '369',
    label: 'Gordy',
  },
  {
    value: '370',
    label: 'Denise',
  },
  {
    value: '371',
    label: 'Stacee',
  },
  {
    value: '372',
    label: 'Fredelia',
  },
  {
    value: '373',
    label: 'Barbabra',
  },
  {
    value: '374',
    label: 'Jonas',
  },
  {
    value: '375',
    label: 'Ardyce',
  },
  {
    value: '376',
    label: 'Philippa',
  },
  {
    value: '377',
    label: 'Biddy',
  },
  {
    value: '378',
    label: 'Cy',
  },
  {
    value: '379',
    label: 'Branden',
  },
  {
    value: '380',
    label: 'Reuven',
  },
  {
    value: '381',
    label: 'Kris',
  },
  {
    value: '382',
    label: 'Bendicty',
  },
  {
    value: '383',
    label: 'Ardis',
  },
  {
    value: '384',
    label: 'Gigi',
  },
  {
    value: '385',
    label: 'Elvis',
  },
  {
    value: '386',
    label: 'Tamar',
  },
  {
    value: '387',
    label: 'Cacilie',
  },
  {
    value: '388',
    label: 'Farrell',
  },
  {
    value: '389',
    label: 'Giuseppe',
  },
  {
    value: '390',
    label: 'Clerkclaude',
  },
  {
    value: '391',
    label: 'Otha',
  },
  {
    value: '392',
    label: 'Idaline',
  },
  {
    value: '393',
    label: 'Lise',
  },
  {
    value: '394',
    label: 'Faye',
  },
  {
    value: '395',
    label: 'Staci',
  },
  {
    value: '396',
    label: 'Elfrida',
  },
  {
    value: '397',
    label: 'Angelico',
  },
  {
    value: '398',
    label: 'Bessie',
  },
  {
    value: '399',
    label: 'Appolonia',
  },
  {
    value: '400',
    label: 'Don',
  },
  {
    value: '401',
    label: 'Vivyan',
  },
  {
    value: '402',
    label: 'Kittie',
  },
  {
    value: '403',
    label: 'Joe',
  },
  {
    value: '404',
    label: 'Marve',
  },
  {
    value: '405',
    label: 'Rosaline',
  },
  {
    value: '406',
    label: 'Gabbi',
  },
  {
    value: '407',
    label: 'Davis',
  },
  {
    value: '408',
    label: 'Candis',
  },
  {
    value: '409',
    label: 'Xylia',
  },
  {
    value: '410',
    label: 'Delores',
  },
  {
    value: '411',
    label: 'Hymie',
  },
  {
    value: '412',
    label: 'Ronny',
  },
  {
    value: '413',
    label: 'Wilhelmine',
  },
  {
    value: '414',
    label: 'Gregg',
  },
  {
    value: '415',
    label: 'Cara',
  },
  {
    value: '416',
    label: 'Jenda',
  },
  {
    value: '417',
    label: 'Gusta',
  },
  {
    value: '418',
    label: 'Nester',
  },
  {
    value: '419',
    label: 'Noella',
  },
  {
    value: '420',
    label: 'Gayle',
  },
  {
    value: '421',
    label: 'Philippa',
  },
  {
    value: '422',
    label: 'Sylvester',
  },
  {
    value: '423',
    label: 'Hailey',
  },
  {
    value: '424',
    label: 'Gaylord',
  },
  {
    value: '425',
    label: 'Olive',
  },
  {
    value: '426',
    label: 'Annabelle',
  },
  {
    value: '427',
    label: 'Tabina',
  },
  {
    value: '428',
    label: 'Kali',
  },
  {
    value: '429',
    label: 'Ingemar',
  },
  {
    value: '430',
    label: 'Terra',
  },
  {
    value: '431',
    label: 'Mahala',
  },
  {
    value: '432',
    label: 'Arman',
  },
  {
    value: '433',
    label: 'Celestyn',
  },
  {
    value: '434',
    label: 'Kennith',
  },
  {
    value: '435',
    label: 'Ellary',
  },
  {
    value: '436',
    label: 'Fair',
  },
  {
    value: '437',
    label: 'Joann',
  },
  {
    value: '438',
    label: 'Norma',
  },
  {
    value: '439',
    label: 'Imojean',
  },
  {
    value: '440',
    label: 'Jessamyn',
  },
  {
    value: '441',
    label: 'Dulcie',
  },
  {
    value: '442',
    label: 'Odessa',
  },
  {
    value: '443',
    label: 'Gerek',
  },
  {
    value: '444',
    label: 'Sky',
  },
  {
    value: '445',
    label: 'Tarrance',
  },
  {
    value: '446',
    label: 'Paolina',
  },
  {
    value: '447',
    label: 'Emmye',
  },
  {
    value: '448',
    label: 'Mandi',
  },
  {
    value: '449',
    label: 'Harper',
  },
  {
    value: '450',
    label: 'Alain',
  },
  {
    value: '451',
    label: 'Iorgos',
  },
  {
    value: '452',
    label: 'Vivia',
  },
  {
    value: '453',
    label: 'Marijo',
  },
  {
    value: '454',
    label: 'Beauregard',
  },
  {
    value: '455',
    label: 'Addia',
  },
  {
    value: '456',
    label: 'Stephana',
  },
  {
    value: '457',
    label: 'Janot',
  },
  {
    value: '458',
    label: 'Krisha',
  },
  {
    value: '459',
    label: 'Arlette',
  },
  {
    value: '460',
    label: 'Illa',
  },
  {
    value: '461',
    label: 'Legra',
  },
  {
    value: '462',
    label: 'Valene',
  },
  {
    value: '463',
    label: 'Morena',
  },
  {
    value: '464',
    label: 'Chantal',
  },
  {
    value: '465',
    label: 'Elisa',
  },
  {
    value: '466',
    label: 'Rayna',
  },
  {
    value: '467',
    label: 'Kore',
  },
  {
    value: '468',
    label: 'Malina',
  },
  {
    value: '469',
    label: 'Leeanne',
  },
  {
    value: '470',
    label: 'Fanny',
  },
  {
    value: '471',
    label: 'Roslyn',
  },
  {
    value: '472',
    label: 'Brig',
  },
  {
    value: '473',
    label: 'Claudie',
  },
  {
    value: '474',
    label: 'Anthe',
  },
  {
    value: '475',
    label: 'Llywellyn',
  },
  {
    value: '476',
    label: 'Kimberli',
  },
  {
    value: '477',
    label: 'Adrianne',
  },
  {
    value: '478',
    label: 'Travers',
  },
  {
    value: '479',
    label: 'Edik',
  },
  {
    value: '480',
    label: 'Pinchas',
  },
  {
    value: '481',
    label: 'Lizbeth',
  },
  {
    value: '482',
    label: 'Muriel',
  },
  {
    value: '483',
    label: 'Wynn',
  },
  {
    value: '484',
    label: 'Tommy',
  },
  {
    value: '485',
    label: 'Angela',
  },
  {
    value: '486',
    label: 'Beth',
  },
  {
    value: '487',
    label: 'Delcine',
  },
  {
    value: '488',
    label: 'Ellynn',
  },
  {
    value: '489',
    label: 'Angil',
  },
  {
    value: '490',
    label: 'Nelly',
  },
  {
    value: '491',
    label: 'Wenonah',
  },
  {
    value: '492',
    label: 'Brinn',
  },
  {
    value: '493',
    label: 'Galen',
  },
  {
    value: '494',
    label: 'Bobbye',
  },
  {
    value: '495',
    label: 'Cammy',
  },
  {
    value: '496',
    label: 'Rowney',
  },
  {
    value: '497',
    label: 'Gerrard',
  },
  {
    value: '498',
    label: 'Salli',
  },
  {
    value: '499',
    label: 'Estele',
  },
  {
    value: '500',
    label: 'Kristofer',
  },
  {
    value: '501',
    label: 'Juliet',
  },
  {
    value: '502',
    label: 'Claybourne',
  },
  {
    value: '503',
    label: 'Dorie',
  },
  {
    value: '504',
    label: 'Halsy',
  },
  {
    value: '505',
    label: 'Annabell',
  },
  {
    value: '506',
    label: 'Claybourne',
  },
  {
    value: '507',
    label: 'Dave',
  },
  {
    value: '508',
    label: 'Marj',
  },
  {
    value: '509',
    label: 'Bethena',
  },
  {
    value: '510',
    label: 'Wandie',
  },
  {
    value: '511',
    label: 'Angelia',
  },
  {
    value: '512',
    label: 'Ede',
  },
  {
    value: '513',
    label: 'Roxie',
  },
  {
    value: '514',
    label: 'Franciskus',
  },
  {
    value: '515',
    label: 'Edouard',
  },
  {
    value: '516',
    label: 'Bernita',
  },
  {
    value: '517',
    label: 'Gardie',
  },
  {
    value: '518',
    label: 'Karil',
  },
  {
    value: '519',
    label: 'Margarita',
  },
  {
    value: '520',
    label: 'Nikos',
  },
  {
    value: '521',
    label: 'Della',
  },
  {
    value: '522',
    label: 'Isacco',
  },
  {
    value: '523',
    label: 'Odille',
  },
  {
    value: '524',
    label: 'Finn',
  },
  {
    value: '525',
    label: 'Wini',
  },
  {
    value: '526',
    label: 'Ricca',
  },
  {
    value: '527',
    label: 'Griff',
  },
  {
    value: '528',
    label: 'Eadmund',
  },
  {
    value: '529',
    label: 'Doti',
  },
  {
    value: '530',
    label: 'Barnebas',
  },
  {
    value: '531',
    label: 'Rube',
  },
  {
    value: '532',
    label: 'Aguie',
  },
  {
    value: '533',
    label: 'Finlay',
  },
  {
    value: '534',
    label: 'Dominique',
  },
  {
    value: '535',
    label: 'Scarlett',
  },
  {
    value: '536',
    label: 'Wenda',
  },
  {
    value: '537',
    label: 'Burgess',
  },
  {
    value: '538',
    label: 'Alexandra',
  },
  {
    value: '539',
    label: 'Cale',
  },
  {
    value: '540',
    label: 'Toddy',
  },
  {
    value: '541',
    label: 'Curtis',
  },
  {
    value: '542',
    label: 'Carlin',
  },
  {
    value: '543',
    label: 'Ric',
  },
  {
    value: '544',
    label: 'Rosene',
  },
  {
    value: '545',
    label: 'Susi',
  },
  {
    value: '546',
    label: 'Cilka',
  },
  {
    value: '547',
    label: 'Farrel',
  },
  {
    value: '548',
    label: 'Ema',
  },
  {
    value: '549',
    label: 'Kimmie',
  },
  {
    value: '550',
    label: 'Lydon',
  },
  {
    value: '551',
    label: 'Nolie',
  },
  {
    value: '552',
    label: 'Dian',
  },
  {
    value: '553',
    label: 'Nancee',
  },
  {
    value: '554',
    label: 'Josi',
  },
  {
    value: '555',
    label: 'Aguste',
  },
  {
    value: '556',
    label: 'Tedman',
  },
  {
    value: '557',
    label: 'Flossi',
  },
  {
    value: '558',
    label: 'Daffi',
  },
  {
    value: '559',
    label: 'Alair',
  },
  {
    value: '560',
    label: 'Hetty',
  },
  {
    value: '561',
    label: 'Liva',
  },
  {
    value: '562',
    label: 'Juliet',
  },
  {
    value: '563',
    label: 'Ainslie',
  },
  {
    value: '564',
    label: 'Ellie',
  },
  {
    value: '565',
    label: 'Hunfredo',
  },
  {
    value: '566',
    label: 'Eadmund',
  },
  {
    value: '567',
    label: 'Stephi',
  },
  {
    value: '568',
    label: 'Humfrid',
  },
  {
    value: '569',
    label: 'Lazare',
  },
  {
    value: '570',
    label: 'Conway',
  },
  {
    value: '571',
    label: 'Nichole',
  },
  {
    value: '572',
    label: 'Arch',
  },
  {
    value: '573',
    label: 'Anatola',
  },
  {
    value: '574',
    label: 'Janine',
  },
  {
    value: '575',
    label: 'Maribelle',
  },
  {
    value: '576',
    label: 'Joby',
  },
  {
    value: '577',
    label: 'Andonis',
  },
  {
    value: '578',
    label: 'Yurik',
  },
  {
    value: '579',
    label: 'Nanice',
  },
  {
    value: '580',
    label: 'Caron',
  },
  {
    value: '581',
    label: 'Glenine',
  },
  {
    value: '582',
    label: 'Delbert',
  },
  {
    value: '583',
    label: 'Odilia',
  },
  {
    value: '584',
    label: 'Agna',
  },
  {
    value: '585',
    label: 'Ashely',
  },
  {
    value: '586',
    label: 'Ruby',
  },
  {
    value: '587',
    label: 'Abigael',
  },
  {
    value: '588',
    label: 'Torey',
  },
  {
    value: '589',
    label: 'Elsey',
  },
  {
    value: '590',
    label: 'Jamie',
  },
  {
    value: '591',
    label: 'Hilarius',
  },
  {
    value: '592',
    label: 'Inge',
  },
  {
    value: '593',
    label: 'Justin',
  },
  {
    value: '594',
    label: 'Clarey',
  },
  {
    value: '595',
    label: 'Annabell',
  },
  {
    value: '596',
    label: 'Winny',
  },
  {
    value: '597',
    label: 'Hercules',
  },
  {
    value: '598',
    label: 'Clovis',
  },
  {
    value: '599',
    label: 'Pippo',
  },
  {
    value: '600',
    label: 'Eveleen',
  },
  {
    value: '601',
    label: 'Ingrim',
  },
  {
    value: '602',
    label: 'Nikolai',
  },
  {
    value: '603',
    label: 'Laryssa',
  },
  {
    value: '604',
    label: 'Cazzie',
  },
  {
    value: '605',
    label: 'Kristian',
  },
  {
    value: '606',
    label: 'Terry',
  },
  {
    value: '607',
    label: 'Gale',
  },
  {
    value: '608',
    label: 'Carlynn',
  },
  {
    value: '609',
    label: 'Linnet',
  },
  {
    value: '610',
    label: 'Jenine',
  },
  {
    value: '611',
    label: 'Cesaro',
  },
  {
    value: '612',
    label: 'Matilda',
  },
  {
    value: '613',
    label: 'Bernardine',
  },
  {
    value: '614',
    label: 'Conrado',
  },
  {
    value: '615',
    label: 'Debee',
  },
  {
    value: '616',
    label: 'Caryl',
  },
  {
    value: '617',
    label: 'Mureil',
  },
  {
    value: '618',
    label: 'Marissa',
  },
  {
    value: '619',
    label: 'Oates',
  },
  {
    value: '620',
    label: 'Ali',
  },
  {
    value: '621',
    label: 'Gayelord',
  },
  {
    value: '622',
    label: 'Noak',
  },
  {
    value: '623',
    label: 'Jarrod',
  },
  {
    value: '624',
    label: 'Euphemia',
  },
  {
    value: '625',
    label: 'Etti',
  },
  {
    value: '626',
    label: 'Audrye',
  },
  {
    value: '627',
    label: 'Shannon',
  },
  {
    value: '628',
    label: 'Gussi',
  },
  {
    value: '629',
    label: 'Annabelle',
  },
  {
    value: '630',
    label: 'Duncan',
  },
  {
    value: '631',
    label: 'Cherish',
  },
  {
    value: '632',
    label: 'Wade',
  },
  {
    value: '633',
    label: 'Ari',
  },
  {
    value: '634',
    label: 'Amii',
  },
  {
    value: '635',
    label: 'Mariska',
  },
  {
    value: '636',
    label: 'Paul',
  },
  {
    value: '637',
    label: 'Leicester',
  },
  {
    value: '638',
    label: 'Abbot',
  },
  {
    value: '639',
    label: 'Keven',
  },
  {
    value: '640',
    label: 'Raquela',
  },
  {
    value: '641',
    label: 'Isahella',
  },
  {
    value: '642',
    label: 'Randie',
  },
  {
    value: '643',
    label: 'Cherie',
  },
  {
    value: '644',
    label: 'Shandeigh',
  },
  {
    value: '645',
    label: 'Muriel',
  },
  {
    value: '646',
    label: 'Tad',
  },
  {
    value: '647',
    label: 'Giordano',
  },
  {
    value: '648',
    label: 'Monty',
  },
  {
    value: '649',
    label: 'Eyde',
  },
  {
    value: '650',
    label: 'Consuelo',
  },
  {
    value: '651',
    label: 'Mortimer',
  },
  {
    value: '652',
    label: 'Ina',
  },
  {
    value: '653',
    label: 'Suzanne',
  },
  {
    value: '654',
    label: 'Jolie',
  },
  {
    value: '655',
    label: 'Teresina',
  },
  {
    value: '656',
    label: 'Carlye',
  },
  {
    value: '657',
    label: 'Cassius',
  },
  {
    value: '658',
    label: 'Jada',
  },
  {
    value: '659',
    label: 'Ludvig',
  },
  {
    value: '660',
    label: 'Raffaello',
  },
  {
    value: '661',
    label: 'Alessandra',
  },
  {
    value: '662',
    label: 'Doe',
  },
  {
    value: '663',
    label: 'Jaynell',
  },
  {
    value: '664',
    label: 'Stern',
  },
  {
    value: '665',
    label: 'Wanda',
  },
  {
    value: '666',
    label: 'Tabor',
  },
  {
    value: '667',
    label: 'Nilson',
  },
  {
    value: '668',
    label: 'Dorris',
  },
  {
    value: '669',
    label: 'Teirtza',
  },
  {
    value: '670',
    label: 'Granger',
  },
  {
    value: '671',
    label: 'Berenice',
  },
  {
    value: '672',
    label: 'Rosella',
  },
  {
    value: '673',
    label: 'Estel',
  },
  {
    value: '674',
    label: 'Masha',
  },
  {
    value: '675',
    label: 'Beck',
  },
  {
    value: '676',
    label: 'Jessamyn',
  },
  {
    value: '677',
    label: 'Freeland',
  },
  {
    value: '678',
    label: 'Vally',
  },
  {
    value: '679',
    label: 'Niels',
  },
  {
    value: '680',
    label: 'Stearn',
  },
  {
    value: '681',
    label: 'Lianna',
  },
  {
    value: '682',
    label: 'Gallagher',
  },
  {
    value: '683',
    label: 'Adela',
  },
  {
    value: '684',
    label: 'Cass',
  },
  {
    value: '685',
    label: 'Kelsy',
  },
  {
    value: '686',
    label: 'Armin',
  },
  {
    value: '687',
    label: 'Davina',
  },
  {
    value: '688',
    label: 'Hersch',
  },
  {
    value: '689',
    label: 'Codee',
  },
  {
    value: '690',
    label: 'Gayle',
  },
  {
    value: '691',
    label: 'Dosi',
  },
  {
    value: '692',
    label: 'Lorry',
  },
  {
    value: '693',
    label: 'Archie',
  },
  {
    value: '694',
    label: 'Hallie',
  },
  {
    value: '695',
    label: 'Drew',
  },
  {
    value: '696',
    label: 'Marcus',
  },
  {
    value: '697',
    label: 'Gussie',
  },
  {
    value: '698',
    label: 'Geoffrey',
  },
  {
    value: '699',
    label: 'Margaux',
  },
  {
    value: '700',
    label: 'Sargent',
  },
  {
    value: '701',
    label: 'Roy',
  },
  {
    value: '702',
    label: 'Marcus',
  },
  {
    value: '703',
    label: 'Corny',
  },
  {
    value: '704',
    label: 'Charley',
  },
  {
    value: '705',
    label: 'Odelinda',
  },
  {
    value: '706',
    label: 'Durward',
  },
  {
    value: '707',
    label: 'Regina',
  },
  {
    value: '708',
    label: 'Nickey',
  },
  {
    value: '709',
    label: 'Bancroft',
  },
  {
    value: '710',
    label: 'Vin',
  },
  {
    value: '711',
    label: 'Emmy',
  },
  {
    value: '712',
    label: 'Barclay',
  },
  {
    value: '713',
    label: 'Brena',
  },
  {
    value: '714',
    label: 'Evie',
  },
  {
    value: '715',
    label: 'Erroll',
  },
  {
    value: '716',
    label: 'Adamo',
  },
  {
    value: '717',
    label: 'Basil',
  },
  {
    value: '718',
    label: 'Berke',
  },
  {
    value: '719',
    label: 'Otis',
  },
  {
    value: '720',
    label: 'Bary',
  },
  {
    value: '721',
    label: 'Lucretia',
  },
  {
    value: '722',
    label: 'Miran',
  },
  {
    value: '723',
    label: 'Ruthi',
  },
  {
    value: '724',
    label: 'Justinn',
  },
  {
    value: '725',
    label: 'Mavis',
  },
  {
    value: '726',
    label: 'Joell',
  },
  {
    value: '727',
    label: 'Maximilianus',
  },
  {
    value: '728',
    label: 'Wenonah',
  },
  {
    value: '729',
    label: 'Ken',
  },
  {
    value: '730',
    label: 'Earl',
  },
  {
    value: '731',
    label: 'Bartolomeo',
  },
  {
    value: '732',
    label: 'Woodman',
  },
  {
    value: '733',
    label: 'Silvia',
  },
  {
    value: '734',
    label: 'Guy',
  },
  {
    value: '735',
    label: 'Jeri',
  },
  {
    value: '736',
    label: 'Sumner',
  },
  {
    value: '737',
    label: 'Ethelind',
  },
  {
    value: '738',
    label: 'Dewitt',
  },
  {
    value: '739',
    label: 'Inger',
  },
  {
    value: '740',
    label: 'Tamqrah',
  },
  {
    value: '741',
    label: 'Melita',
  },
  {
    value: '742',
    label: 'Myrah',
  },
  {
    value: '743',
    label: 'Nikolai',
  },
  {
    value: '744',
    label: 'Courtnay',
  },
  {
    value: '745',
    label: 'Cassandra',
  },
  {
    value: '746',
    label: 'Maryanna',
  },
  {
    value: '747',
    label: 'Abeu',
  },
  {
    value: '748',
    label: 'Hermie',
  },
  {
    value: '749',
    label: 'Gussie',
  },
  {
    value: '750',
    label: 'Niall',
  },
  {
    value: '751',
    label: 'Lyssa',
  },
  {
    value: '752',
    label: 'Connie',
  },
  {
    value: '753',
    label: 'Matthaeus',
  },
  {
    value: '754',
    label: 'Kristan',
  },
  {
    value: '755',
    label: 'Chrisse',
  },
  {
    value: '756',
    label: 'Charla',
  },
  {
    value: '757',
    label: 'Waite',
  },
  {
    value: '758',
    label: 'Aleece',
  },
  {
    value: '759',
    label: 'Freeland',
  },
  {
    value: '760',
    label: 'Ashley',
  },
  {
    value: '761',
    label: 'Trever',
  },
  {
    value: '762',
    label: 'Gertrude',
  },
  {
    value: '763',
    label: 'Gunther',
  },
  {
    value: '764',
    label: 'Kandace',
  },
  {
    value: '765',
    label: 'Gui',
  },
  {
    value: '766',
    label: 'Averil',
  },
  {
    value: '767',
    label: 'Udell',
  },
  {
    value: '768',
    label: 'Dorri',
  },
  {
    value: '769',
    label: 'Kennan',
  },
  {
    value: '770',
    label: 'Petra',
  },
  {
    value: '771',
    label: 'Baudoin',
  },
  {
    value: '772',
    label: 'Shandee',
  },
  {
    value: '773',
    label: 'Jakie',
  },
  {
    value: '774',
    label: 'Ximenez',
  },
  {
    value: '775',
    label: 'Ringo',
  },
  {
    value: '776',
    label: 'Westbrooke',
  },
  {
    value: '777',
    label: 'Evy',
  },
  {
    value: '778',
    label: 'Janek',
  },
  {
    value: '779',
    label: 'Page',
  },
  {
    value: '780',
    label: 'Bronny',
  },
  {
    value: '781',
    label: 'Hailey',
  },
  {
    value: '782',
    label: 'Chase',
  },
  {
    value: '783',
    label: 'Wilt',
  },
  {
    value: '784',
    label: 'Taber',
  },
  {
    value: '785',
    label: 'Alexandre',
  },
  {
    value: '786',
    label: 'Helenelizabeth',
  },
  {
    value: '787',
    label: 'Hamel',
  },
  {
    value: '788',
    label: 'Doria',
  },
  {
    value: '789',
    label: 'Damita',
  },
  {
    value: '790',
    label: 'Cherianne',
  },
  {
    value: '791',
    label: 'Dianna',
  },
  {
    value: '792',
    label: 'Ermin',
  },
  {
    value: '793',
    label: 'Mollie',
  },
  {
    value: '794',
    label: 'Carroll',
  },
  {
    value: '795',
    label: 'Lee',
  },
  {
    value: '796',
    label: 'Timotheus',
  },
  {
    value: '797',
    label: 'Melinde',
  },
  {
    value: '798',
    label: 'Gavin',
  },
  {
    value: '799',
    label: 'Tirrell',
  },
  {
    value: '800',
    label: 'Abbe',
  },
  {
    value: '801',
    label: 'Casandra',
  },
  {
    value: '802',
    label: 'Harold',
  },
  {
    value: '803',
    label: 'Costanza',
  },
  {
    value: '804',
    label: 'Max',
  },
  {
    value: '805',
    label: 'Francyne',
  },
  {
    value: '806',
    label: 'Ransell',
  },
  {
    value: '807',
    label: 'Raquela',
  },
  {
    value: '808',
    label: 'Molli',
  },
  {
    value: '809',
    label: 'Dasi',
  },
  {
    value: '810',
    label: 'Ronna',
  },
  {
    value: '811',
    label: 'Aubrette',
  },
  {
    value: '812',
    label: 'Sherri',
  },
  {
    value: '813',
    label: 'Shelby',
  },
  {
    value: '814',
    label: 'Bartolemo',
  },
  {
    value: '815',
    label: 'Verile',
  },
  {
    value: '816',
    label: 'Park',
  },
  {
    value: '817',
    label: 'Rudolf',
  },
  {
    value: '818',
    label: 'Thatcher',
  },
  {
    value: '819',
    label: 'Tansy',
  },
  {
    value: '820',
    label: 'Lona',
  },
  {
    value: '821',
    label: 'Cairistiona',
  },
  {
    value: '822',
    label: 'Kerrie',
  },
  {
    value: '823',
    label: 'Darb',
  },
  {
    value: '824',
    label: 'Olivier',
  },
  {
    value: '825',
    label: 'Melamie',
  },
  {
    value: '826',
    label: 'Isabeau',
  },
  {
    value: '827',
    label: 'Tilda',
  },
  {
    value: '828',
    label: 'Kelley',
  },
  {
    value: '829',
    label: 'Vanna',
  },
  {
    value: '830',
    label: 'Konstance',
  },
  {
    value: '831',
    label: 'Jourdan',
  },
  {
    value: '832',
    label: 'Vale',
  },
  {
    value: '833',
    label: 'Sholom',
  },
  {
    value: '834',
    label: 'Lynelle',
  },
  {
    value: '835',
    label: 'Andras',
  },
  {
    value: '836',
    label: 'Jewelle',
  },
  {
    value: '837',
    label: 'Michele',
  },
  {
    value: '838',
    label: 'Raye',
  },
  {
    value: '839',
    label: 'Issiah',
  },
  {
    value: '840',
    label: 'Zandra',
  },
  {
    value: '841',
    label: 'Stephine',
  },
  {
    value: '842',
    label: 'Kare',
  },
  {
    value: '843',
    label: 'Clari',
  },
  {
    value: '844',
    label: 'Dory',
  },
  {
    value: '845',
    label: 'Jenifer',
  },
  {
    value: '846',
    label: 'Johnnie',
  },
  {
    value: '847',
    label: 'Denise',
  },
  {
    value: '848',
    label: 'Casper',
  },
  {
    value: '849',
    label: 'Barron',
  },
  {
    value: '850',
    label: 'Malissia',
  },
  {
    value: '851',
    label: 'Albert',
  },
  {
    value: '852',
    label: 'Viola',
  },
  {
    value: '853',
    label: 'Raoul',
  },
  {
    value: '854',
    label: 'Zarah',
  },
  {
    value: '855',
    label: 'Lyndell',
  },
  {
    value: '856',
    label: 'Morna',
  },
  {
    value: '857',
    label: 'Paule',
  },
  {
    value: '858',
    label: 'Randee',
  },
  {
    value: '859',
    label: 'Odille',
  },
  {
    value: '860',
    label: 'Elie',
  },
  {
    value: '861',
    label: 'Linea',
  },
  {
    value: '862',
    label: 'Andres',
  },
  {
    value: '863',
    label: 'Kahaleel',
  },
  {
    value: '864',
    label: 'Erick',
  },
  {
    value: '865',
    label: 'Flory',
  },
  {
    value: '866',
    label: 'Crystal',
  },
  {
    value: '867',
    label: 'Onfroi',
  },
  {
    value: '868',
    label: 'Zora',
  },
  {
    value: '869',
    label: 'Jenna',
  },
  {
    value: '870',
    label: 'Beilul',
  },
  {
    value: '871',
    label: 'Nickolas',
  },
  {
    value: '872',
    label: 'Billy',
  },
  {
    value: '873',
    label: 'Harman',
  },
  {
    value: '874',
    label: 'Gaspard',
  },
  {
    value: '875',
    label: 'Rosa',
  },
  {
    value: '876',
    label: 'Georgianna',
  },
  {
    value: '877',
    label: 'Bertrand',
  },
  {
    value: '878',
    label: 'Ignacius',
  },
  {
    value: '879',
    label: 'Trueman',
  },
  {
    value: '880',
    label: 'Herold',
  },
  {
    value: '881',
    label: 'Jarret',
  },
  {
    value: '882',
    label: 'Natalina',
  },
  {
    value: '883',
    label: 'Norah',
  },
  {
    value: '884',
    label: 'Pia',
  },
  {
    value: '885',
    label: 'Bradan',
  },
  {
    value: '886',
    label: 'Christen',
  },
  {
    value: '887',
    label: 'Bunny',
  },
  {
    value: '888',
    label: 'Hunter',
  },
  {
    value: '889',
    label: 'Patrizius',
  },
  {
    value: '890',
    label: 'Onofredo',
  },
  {
    value: '891',
    label: 'Lorilyn',
  },
  {
    value: '892',
    label: 'Aurea',
  },
  {
    value: '893',
    label: 'Brandise',
  },
  {
    value: '894',
    label: 'Jarad',
  },
  {
    value: '895',
    label: 'Emylee',
  },
  {
    value: '896',
    label: 'Genovera',
  },
  {
    value: '897',
    label: 'Harmon',
  },
  {
    value: '898',
    label: 'Benedetta',
  },
  {
    value: '899',
    label: 'Enos',
  },
  {
    value: '900',
    label: 'Warren',
  },
  {
    value: '901',
    label: 'Donella',
  },
  {
    value: '902',
    label: 'Avram',
  },
  {
    value: '903',
    label: 'Delaney',
  },
  {
    value: '904',
    label: 'Madeline',
  },
  {
    value: '905',
    label: 'George',
  },
  {
    value: '906',
    label: 'Carin',
  },
  {
    value: '907',
    label: 'Thane',
  },
  {
    value: '908',
    label: 'Lurleen',
  },
  {
    value: '909',
    label: 'Carolee',
  },
  {
    value: '910',
    label: 'Ninetta',
  },
  {
    value: '911',
    label: 'Rhys',
  },
  {
    value: '912',
    label: 'Gaspard',
  },
  {
    value: '913',
    label: 'Irvine',
  },
  {
    value: '914',
    label: 'Patsy',
  },
  {
    value: '915',
    label: 'Anthony',
  },
  {
    value: '916',
    label: 'Lari',
  },
  {
    value: '917',
    label: 'Sergei',
  },
  {
    value: '918',
    label: 'Marielle',
  },
  {
    value: '919',
    label: 'Cleve',
  },
  {
    value: '920',
    label: 'Sela',
  },
  {
    value: '921',
    label: 'Durant',
  },
  {
    value: '922',
    label: 'Tremayne',
  },
  {
    value: '923',
    label: 'Roby',
  },
  {
    value: '924',
    label: 'Aleda',
  },
  {
    value: '925',
    label: 'Hubey',
  },
  {
    value: '926',
    label: 'Ulberto',
  },
  {
    value: '927',
    label: 'Rodolfo',
  },
  {
    value: '928',
    label: 'Guillermo',
  },
  {
    value: '929',
    label: 'Smith',
  },
  {
    value: '930',
    label: 'Sigrid',
  },
  {
    value: '931',
    label: 'Kasper',
  },
  {
    value: '932',
    label: 'Quinton',
  },
  {
    value: '933',
    label: 'Gherardo',
  },
  {
    value: '934',
    label: 'Shea',
  },
  {
    value: '935',
    label: 'Aurel',
  },
  {
    value: '936',
    label: 'Emelyne',
  },
  {
    value: '937',
    label: 'Valida',
  },
  {
    value: '938',
    label: 'Sim',
  },
  {
    value: '939',
    label: 'Karel',
  },
  {
    value: '940',
    label: 'Margareta',
  },
  {
    value: '941',
    label: 'Matteo',
  },
  {
    value: '942',
    label: 'Ryley',
  },
  {
    value: '943',
    label: 'Hilliard',
  },
  {
    value: '944',
    label: 'Bondie',
  },
  {
    value: '945',
    label: 'Rebecka',
  },
  {
    value: '946',
    label: 'Miguel',
  },
  {
    value: '947',
    label: 'Mattias',
  },
  {
    value: '948',
    label: 'Aubert',
  },
  {
    value: '949',
    label: 'Malena',
  },
  {
    value: '950',
    label: 'Alley',
  },
  {
    value: '951',
    label: 'Scot',
  },
  {
    value: '952',
    label: 'Foster',
  },
  {
    value: '953',
    label: 'Cora',
  },
  {
    value: '954',
    label: 'Karolina',
  },
  {
    value: '955',
    label: 'Lindsay',
  },
  {
    value: '956',
    label: 'Erskine',
  },
  {
    value: '957',
    label: 'Alvinia',
  },
  {
    value: '958',
    label: 'Effie',
  },
  {
    value: '959',
    label: 'Bethina',
  },
  {
    value: '960',
    label: 'Bartholemy',
  },
  {
    value: '961',
    label: 'Giulio',
  },
  {
    value: '962',
    label: 'Christabel',
  },
  {
    value: '963',
    label: 'Ximenes',
  },
  {
    value: '964',
    label: 'Walliw',
  },
  {
    value: '965',
    label: 'Devi',
  },
  {
    value: '966',
    label: 'Clemmy',
  },
  {
    value: '967',
    label: 'Doralin',
  },
  {
    value: '968',
    label: 'Dominique',
  },
  {
    value: '969',
    label: 'Urbanus',
  },
  {
    value: '970',
    label: 'Nataline',
  },
  {
    value: '971',
    label: 'Reinhard',
  },
  {
    value: '972',
    label: 'Waiter',
  },
  {
    value: '973',
    label: 'Selle',
  },
  {
    value: '974',
    label: 'Magda',
  },
  {
    value: '975',
    label: 'Gilbertina',
  },
  {
    value: '976',
    label: 'Dav',
  },
  {
    value: '977',
    label: 'Katina',
  },
  {
    value: '978',
    label: 'Clarence',
  },
  {
    value: '979',
    label: 'Gareth',
  },
  {
    value: '980',
    label: 'Sherwin',
  },
  {
    value: '981',
    label: 'Noelle',
  },
  {
    value: '982',
    label: 'Nell',
  },
  {
    value: '983',
    label: 'Prisca',
  },
  {
    value: '984',
    label: 'Garald',
  },
  {
    value: '985',
    label: 'Bennie',
  },
  {
    value: '986',
    label: 'Marigold',
  },
  {
    value: '987',
    label: 'Karoly',
  },
  {
    value: '988',
    label: 'Mignon',
  },
  {
    value: '989',
    label: 'Laetitia',
  },
  {
    value: '990',
    label: 'Laura',
  },
  {
    value: '991',
    label: 'Inger',
  },
  {
    value: '992',
    label: 'Obadiah',
  },
  {
    value: '993',
    label: 'Farly',
  },
  {
    value: '994',
    label: 'Kristoffer',
  },
  {
    value: '995',
    label: 'Van',
  },
  {
    value: '996',
    label: 'Biddie',
  },
  {
    value: '997',
    label: 'Raimundo',
  },
  {
    value: '998',
    label: 'Claudette',
  },
  {
    value: '999',
    label: 'Jonell',
  },
  {
    value: '1000',
    label: 'Jasper',
  },
]

export const MultiSelectVirtualScrollerExample = () => {
  return (
    <CMultiSelect options={users} label="Users" text="Please select your user." virtualScroller />
  )
}
```

## External Data

One of the key features of React Multi Select component is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once. To load external data into a React MultiSelect, you can use the Fetch API to the data source.

Here is an example of how you might use React Multi Select with external data:

```html
import React, { useState } from 'react'
import { CMultiSelect, useDebouncedCallback } from '@coreui/react-pro'
import type { Option } from '@coreui/react-pro/src/components/multi-select/types'

export const MultiSelectExternalDataExample = () => {
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])

  const getUsers = async (name = '') => {
    setLoading(true)
    try {
      const response = await fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`)
      const result = await response.json()

      setUsers(
        result.records.map((record: Option) => ({
          value: record.id,
          label: record.first_name,
        }))
      )
    } catch (error) {
      console.error('Error fetching users:', error)
      setUsers([]) // Optionally handle an error state
    } finally {
      setLoading(false)
    }
  }

  // Use the debounced callback for API calls
  const debouncedGetUsers = useDebouncedCallback((value: string) => {
    getUsers(value)
  }, 300)

  return (
    <CMultiSelect
      label="Users"
      loading={loading}
      onFilterChange={debouncedGetUsers} // Debounce the actual API call
      // onFilterChange={(value) => getUsers(value)} // API call without debounce
      onShow={getUsers} // Triggers the getUsers function when the dropdown is shown
      options={users}
      text="Please select your user."
      search={{
        external: true,
        global: true,
      }}
      virtualScroller
    />
  )
}
```

This example requires the following import:

```jsx
import { useDebouncedCallback } from '@coreui/react-pro'
```

* `useDebouncedCallback` is a utility hook available in `@coreui/react-pro` that allows you to debounce a callback function, ensuring it is not called too frequently (e.g., when typing in a search field).
* In this case, it is used to debounce the API call made by `getUsers` to reduce the number of requests during rapid input changes.

To handle a large amount of data and improve performance, this example uses the `` component to show the options list.

## Accessibility

The CoreUI React Multi Select component is designed with accessibility in mind and follows WAI-ARIA guidelines to ensure it works well with assistive technologies like screen readers.

### Built-in Accessibility Features

The Multi Select component includes several accessibility features out of the box:

- **ARIA Roles**: Proper `combobox` and `listbox` roles for screen reader compatibility
- **ARIA States**: Dynamic `aria-expanded`, `aria-selected`, and `aria-disabled` attributes
- **Keyboard Navigation**: Full keyboard support with arrow keys, Enter, Space, and Escape
- **Focus Management**: Proper focus handling when opening/closing the dropdown
- **Screen Reader Labels**: Descriptive labels for interactive elements

### Customizing Accessibility Labels

You can customize the accessibility labels for better user experience:

```jsx
<CMultiSelect
  options={options}
  ariaCleanerLabel="Clear all selected items"
  ariaIndicatorLabel="Open options menu"
  placeholder="Choose your options..."
/>
```

### ARIA Attributes

The component automatically handles these ARIA attributes:

- `aria-expanded`: Indicates whether the dropdown is open or closed
- `aria-haspopup="listbox"`: Tells screen readers that the control opens a listbox
- `aria-multiselectable="true"`: Indicates multiple selections are allowed
- `aria-selected`: Shows which options are currently selected
- `aria-disabled`: Identifies disabled options
- `aria-owns`: Connects the input with the dropdown when using portal mode

### Keyboard Navigation

The Multi Select component supports full keyboard navigation:

| Key | Action |
| --- | --- |
| <kbd>Tab</kbd> | Navigate to/from the component |
| <kbd>Enter/Space</kbd> | Open dropdown or select focused option |
| <kbd>Arrow Up/Down</kbd> | Navigate through options |
| <kbd>Home</kbd> | Focus the first option |
| <kbd>End</kbd> | Focus the last option |
| <kbd>Escape</kbd> | Close the dropdown |
| <kbd>Backspace/Delete</kbd> | Remove last selected item (when search is empty) |

### Best Practices

For optimal accessibility, consider these recommendations:

1. **Always provide a label**: Use the `label` prop or associate with a `<label>` element
2. **Use descriptive placeholder text**: Help users understand what to select
3. **Provide clear option labels**: Ensure option text is descriptive and unique
4. **Consider color contrast**: Ensure sufficient contrast for visual indicators
5. **Test with screen readers**: Verify the component works with assistive technologies

```jsx
<CMultiSelect
  label="Select your preferred programming languages"
  placeholder="Choose languages..."
  options={[
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'py', label: 'Python' }
  ]}
  invalid={hasError}
  feedback="Please select at least one language"
/>
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CMultiSelect /&gt;](./api/#cmultiselect)


---

# React One Time Password (OTP) Input Component

> Create secure and user-friendly React.js one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.

## Example

The `` and `` components create secure **React OTP input fields** with automatic character navigation and validation. Perfect for two-factor authentication, SMS verification codes, and secure login flows.

```html
import React, { useState } from 'react'
import { CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordExample = () => {
  const [value, setValue] = useState('')

  return (
    <CForm>
      <div className="mb-3">
        <COneTimePassword label="Enter OTP Code" id="basicOTP" name="otp" onChange={setValue}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      {value && <div className="text-body-secondary small">Current value: {value}</div>}
    </CForm>
  )
}
```

## One-time password types

The one-time password input supports different input types for various use cases.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordTypesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Numeric OTP (default)" type="number">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Text OTP" type="text">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Masked OTP (hidden characters)" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
```

## Placeholders

Provide visual hints to users by setting placeholder text for OTP input fields. You can use a single character for all fields or specify different placeholders for each field.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPlaceholdersExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Single character placeholder" placeholder="0">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Different placeholders per field" placeholder="123456">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Letter placeholders" type="text" placeholder="ABCDEF">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
```

## Pre-filled values

Set initial values using the `value` prop.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPrefilledExample = () => {
  return (
    <COneTimePassword label="OTP with pre-filled value" defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
```

## Input modes

Control user input behavior with linear and non-linear modes.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordInputModesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Linear mode (sequential input)" linear={true}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Non-linear mode (free navigation)" linear={false}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
```

## Auto-submit

Enable automatic form submission when all one-time password fields are completed.

```html
import React from 'react'
import { CButton, CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordAutoSubmitExample = () => {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    console.log('Form submitted!')
    alert('Form submitted automatically!')
  }

  return (
    <CForm onSubmit={handleSubmit}>
      <div className="mb-3">
        <COneTimePassword label="Auto-submit OTP (fill all 6 digits)" autoSubmit>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <CButton type="submit" color="primary">
        Manual Submit
      </CButton>
    </CForm>
  )
}
```

## Custom layouts

Create custom one-time password layouts with separators and different field counts.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordCustomLayoutsExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="6-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">-</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="9-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="4-digit PIN" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
```

## 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.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordSizingExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Large OTP input" size="lg">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Default OTP input">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Small OTP input" size="sm">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
```

## Disabled state

Disable the entire one-time password input by adding the `disabled` prop.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordDisabledExample = () => {
  return (
    <COneTimePassword label="Disabled OTP" disabled defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
```

## Readonly state

Use the `readOnly` prop to make the one-time password input non-editable but still selectable.

```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordReadonlyExample = () => {
  return (
    <COneTimePassword label="Readonly OTP input" readOnly defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
```

## Accessibility

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:

```jsx
<COneTimePassword
  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 |
| --- | --- |
| <kbd>Arrow Right</kbd> | Move focus to next input field |
| <kbd>Arrow Left</kbd> | Move focus to previous input field |
| <kbd>Backspace</kbd> | Delete current character and move to previous field (if empty) |
| <kbd>Tab</kbd> | Move to next focusable element (respects linear mode) |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Move to previous focusable element |
| <kbd>Ctrl</kbd> + <kbd>V</kbd> / <kbd>Cmd</kbd> + <kbd>V</kbd> | Paste clipboard content and auto-fill fields |

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;COneTimePassword /&gt;](./api/#conetimepassword)
- [&lt;COneTimePasswordInput /&gt;](./api/#conetimepasswordinput)


---

# React Password Input Component

> A fully customizable React password input component with Bootstrap styling. Includes toggle visibility, validation, sizing options, and accessibility support.

## Example

The `` is a fully featured **React 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 React app.

```html
import React from 'react'
import { CForm } from '@coreui/react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputExample = () => {
  return (
    <CForm>
      <div className="mb-3">
        <CPasswordInput label="Password" placeholder="Enter your password" />
      </div>
      <div>
        <CPasswordInput
          label="Password with value"
          placeholder="Enter your password"
          defaultValue="Top secret"
        />
      </div>
    </CForm>
  )
}
```

## Sizing

Use the `size` prop to control the height and padding of the input. Available options:
- `size="sm"` – small input
- `size="lg"` – large input

```html
import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputSizingExample = () => {
  return (
    <>
      <CPasswordInput size="lg" placeholder="Large password input" aria-label="lg input example" />
      <CPasswordInput placeholder="Default password input" aria-label="default input example" />
      <CPasswordInput size="sm" placeholder="Small password input" aria-label="sm input example" />
    </>
  )
}
```

## Disabled

Add the `disabled` attribute to make the password input uneditable. This also dims the field to indicate it's inactive.

```html
import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputDisabledExample = () => {
  return (
    <>
      <CPasswordInput
        placeholder="Disabled password input"
        aria-label="Disabled password input example"
        disabled
      />
      <CPasswordInput
        placeholder="Disabled readonly password input"
        aria-label="Disabled password input example"
        disabled
        readOnly
      />
    </>
  )
}
```

## 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.

```html
import React from 'react'
import { CPasswordInput } from '@coreui/react-pro'

export const PasswordInputReadonlyExample = () => {
  return (
    <CPasswordInput
      placeholder="Readonly password input"
      aria-label="Readonly password input example"
      defaultValue="Readonly input here..."
      readOnly
    />
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CPasswordInput /&gt;](./api/#cpasswordinput)


---

# React Radio Components

> Create consistent cross-browser and cross-device radios with our React radio component.

## Approach

Browser default radios are replaced with the help of `<CFormCheck type="radio">`. Radios are for selecting one option from many.

## Radios

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioExample = () => {
  return (
    <>
      <CFormCheck
        type="radio"
        name="flexRadioDefault"
        id="flexRadioDefault1"
        label="Default radio"
      />
      <CFormCheck
        type="radio"
        name="flexRadioDefault"
        id="flexRadioDefault2"
        label="Checked radio"
        defaultChecked
      />
    </>
  )
}
```

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioDisabledExample = () => {
  return (
    <>
      <CFormCheck
        type="radio"
        name="flexRadioDisabled"
        id="flexRadioDisabled"
        label="Disabled radio"
        disabled
      />
      <CFormCheck
        type="radio"
        name="flexRadioDisabled"
        id="flexRadioCheckedDisabled"
        label="Disabled checked radio"
        defaultChecked
        disabled
      />
    </>
  )
}
```

## Default (stacked)

By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioStackedExample = () => {
  return (
    <>
      <CFormCheck
        type="radio"
        name="exampleRadios"
        id="exampleRadios1"
        value="option1"
        label="Default radio"
        defaultChecked
      />
      <CFormCheck
        type="radio"
        name="exampleRadios"
        id="exampleRadios2"
        value="option2"
        label="Second default radio"
      />
      <CFormCheck
        type="radio"
        name="exampleRadios"
        id="exampleRadios3"
        value="option3"
        label="Disabled radio"
        disabled
      />
    </>
  )
}
```

## Inline

Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioInlineExample = () => {
  return (
    <>
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox1"
        value="option1"
        label="1"
      />
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox2"
        value="option2"
        label="2"
      />
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox3"
        value="option3"
        label="3 (disabled)"
        disabled
      />
    </>
  )
}
```

## Reverse 

Put your radios on the opposite side by adding `reverse` boolean property.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioReverseExample = () => {
  return (
    <>
      <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
      <CFormCheck
        reverse
        type="radio"
        id="reverseOption2"
        value="option2"
        label="Disabled reverse radio"
        disabled
      />
    </>
  )
}
```

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioWithoutLabelsExample = () => {
  return <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
}
```

## Radio toggle buttons

Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option1"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option2"
        autoComplete="off"
        label="Radio"
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option3"
        autoComplete="off"
        label="Radio"
        disabled
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option4"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}
```

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="success-outlined"
        autoComplete="off"
        label="Radio"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'danger', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="danger-outlined"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormCheck /&gt;](./api/#cformcheck)


---

# React Range Component

> React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.

## Overview

Create custom `<input type="range">` controls with `<CFormRange>`. 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.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeExample = () => {
  return <CFormRange id="customRange1" label="Example range" />
}
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeDisabledExample = () => {
  return <CFormRange id="disabledRange" label="Disabled range" disabled />
}
```

## Min and max

Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeMinAndMaxExample = () => {
  return <CFormRange min={0} max={5} label="Example range" defaultValue="3" />
}
```

## 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}`.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeStepsExample = () => {
  return <CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" />
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormRange /&gt;](./api/#cformrange)


---

# React Range Slider Component

> Enhance your forms with our customizable React Range Slider component for advanced range selection.

## Overview

The **React Range Slider** component allows users to select a value or range of values within a predefined range. Unlike the standard `<input type="range">`, 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.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderExample = () => {
  return <CRangeSlider value={[25, 75]} labels={['Low', 'Medium', 'High']} />
}
```

## 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.

## Basic React Range Slider

Create a simple range slider with default settings.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderBasicExample = () => {
  return <CRangeSlider value={50} />
}
```

## Multiple handles

Enable multiple handles to allow the selection of a range or/and multiple values.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderMultipleHandlesExample = () => {
  return (
    <>
      <CRangeSlider className="mb-3" value={[20, 40]} />
      <CRangeSlider className="mb-3" value={[20, 40, 60]} />
      <CRangeSlider value={[20, 40, 60, 80]} />
    </>
  )
}
```

## Vertical Range Slider

Rotate the slider to a vertical orientation.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderVerticalExample = () => {
  return (
    <div className="d-flex">
      <CRangeSlider className="me-3" value={20} vertical />
      <CRangeSlider className="me-3" value={[20, 80]} vertical />
      <CRangeSlider value={[20, 80, 100]} vertical />
    </div>
  )
}
```

## Disabled

Disable the slider to prevent user interaction.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderDisabledExample = () => {
  return (
    <>
      <CRangeSlider className="mb-3" value={50} disabled />
      <CRangeSlider value={[50, 75]} disabled />
    </>
  )
}
```

## Min and max

React 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.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderMinAndMaxExample = () => {
  return (
    <>
      <CRangeSlider className="mb-3" min={-50} max={150} value={50} />
      <CRangeSlider min={-50} max={150} value={[50, 75]} />
    </>
  )
}
```

## 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"`.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderStepsExample = () => {
  return (
    <>
      <CRangeSlider className="mb-3" step={0.25} value={50} />
      <CRangeSlider step={0.25} value={[50, 75]} />
    </>
  )
}
```

## Distance

Sets the minimum distance between multiple slider handles by setting `distance` and ensures that the handles do not overlap or get too close.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderDistanceExample = () => {
  return <CRangeSlider distance={10} value={[50, 75]} />
}
```

## 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.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderLabelsExample = () => {
  return <CRangeSlider labels={['Start', 'Middle', 'End']} value={[30, 70]} />
}
```

### Labels customization

Labels can be configured as an array of strings or objects. When using objects, you can specify additional properties like `value`, `label`, `className`, and `style`.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderLabelsCustomizationExample = () => {
  return (
    <CRangeSlider
      min={-50}
      max={100}
      labels={[
        {
          value: -50,
          label: '-50°C',
          className: 'text-info',
        },
        {
          value: 0,
          label: '0°C',
          style: {
            fontWeight: 'bold',
          },
        },
        {
          value: 20,
          label: '20°C',
          className: ['text-warning'],
        },
        {
          value: 100,
          label: '100°C',
          className: 'text-danger',
        },
      ]}
      tooltipsFormat={(value) => `${value}°C`}
      value={[-10, 40]}
    />
  )
}
```

### 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`.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderLabelsClickableExample = () => {
  return (
    <CRangeSlider clickableLabels={false} labels={['Low', 'Medium', 'High']} value={[20, 80]} />
  )
}
```

## Tooltips

By default, tooltips display the current value of each handle. You can disable tooltips by setting `tooltips` to `false`

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderTooltipsExample = () => {
  return <CRangeSlider tooltips={false} value={[40, 60]} />
}
```

### Tooltips formatting

Customize the content of tooltips using the `tooltipsFormat` option. This can be a function that formats the tooltip text based on the current value.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderTooltipsFormatingExample = () => {
  return (
    <CRangeSlider
      max={1000}
      labels={[
        {
          value: 0,
          label: '$0',
        },
        {
          value: 250,
          label: '$250',
        },
        {
          value: 500,
          label: '$500',
        },
        {
          value: 1000,
          label: '$1000',
        },
      ]}
      tooltipsFormat={(value) => `$${value}`}
      value={[100, 350]}
    />
  )
}
```

## 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(s) 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.

```html
import React from 'react'
import { CRangeSlider } from '@coreui/react-pro'

export const RangeSliderTrackExample = () => {
  return (
    <>
      <CRangeSlider className="mb-3" track={false} value={50} />
      <CRangeSlider className="mb-3" track={false} value={[50, 75]} />
      <CRangeSlider track={false} value={[25, 50, 75]} />
    </>
  )
}
```

## Accessibility

The React.js 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.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CRangeSlider /&gt;](./api/#crangeslider)


---

# React Rating Component

> A React 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.

## How to use React Rating Component.

Embed the Rating component in your React application like this:

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingExample = () => {
  return <CRating value={3} />
}
```

## 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.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingAllowClearExample = () => {
  return <CRating allowClear value={3} />
}
```

This allows the selected rating to be deselected, effectively resetting the rating to a state where no value is selected.

## Resettable

Our React Rating component allows users to assign and reset a star rating within a user interface. In the example below, we use the `CButton` component to clear the selected value by passing `null`.

```html
import React, { useState } from 'react'
import { CButton } from '@coreui/react'
import { CRating } from '@coreui/react-pro'

export const RatingResettableExample = () => {
  const [currentValue, setCurrentValue] = useState<number | null>(3)

  return (
    <div className="d-flex align-items-center">
      <CRating onChange={(value) => setCurrentValue(value)} value={currentValue} />
      <CButton className="ms-3" color="primary" onClick={() => setCurrentValue(null)}>
        reset
      </CButton>
    </div>
  )
}
```

## Read only

Set the React rating component to read-only by adding `readOnly` property. This disables interaction, preventing users from changing the displayed rating value.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingReadOnlyExample = () => {
  return <CRating readOnly value={3} />
}
```

## Disabled

Add the `disabled` boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingDisabledExample = () => {
  return <CRating disabled value={3} />
}
```

## Tooltips

Enable descriptive text on hover by adding `tooltips` prop. This provides immediate feedback or guidance as the user interacts with the rating items.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingTooltipsExample = () => {
  return <CRating tooltips value={3} />
}
```

For custom messages, provide an array of labels corresponding to each rating value to enhance the user's understanding of each rating level.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingTooltips2Example = () => {
  return <CRating tooltips={['Very bad', 'Bad', 'Meh', 'Good', 'Very good']} value={3} />
}
```

## Sizes

Larger or smaller react rating component? Add `size="lg"` or `size="sm"` for additional sizes.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingSizesExample = () => {
  return (
    <>
      <CRating size="sm" value={3} />
      <CRating value={3} />
      <CRating size="lg" value={3} />
    </>
  )
}
```

## 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.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingPrecisionExample = () => {
  return <CRating precision={0.25} value={3} />
}
```

## Number of items

Control the total number of rating items displayed by using `itemCount` property. You can create a React rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'

export const RatingNumberOfItemsExample = () => {
  return (
    <>
      <CRating itemCount={20} value={5} />
      <CRating itemCount={3} value={1} />
    </>
  )
}
```

## Custom icons

Customize the React rating component with your choice of SVG icons by assigning new values to the `activeIcon` and `icon` properties in the JavaScript options. 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.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'
import CIcon from '@coreui/icons-react'
import { cilStar } from '@coreui/icons'
import { cisStar } from '@coreui/icons-pro'

export const RatingCustomIconsExample = () => {
  return (
    <CRating
      activeIcon={<CIcon icon={cisStar} customClassName=" " />}
      icon={<CIcon icon={cilStar} customClassName=" " />}
      value={3}
    />
  )
}
```

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.

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'
import CIcon from '@coreui/icons-react'
import { cilHeart } from '@coreui/icons'

export const RatingCustomIcons2Example = () => {
  return (
    <CRating
      activeIcon={<CIcon icon={cilHeart} customClassName="text-danger" />}
      icon={<CIcon icon={cilHeart} customClassName=" " />}
      value={3}
    />
  )
}
```

For a more dynamic experience, define different icons for each rating value, enhancing the visual feedback:

```html
import React from 'react'
import { CRating } from '@coreui/react-pro'
import CIcon from '@coreui/icons-react'
import { cilMeh, cilMoodBad, cilMoodGood, cilMoodVeryBad, cilMoodVeryGood } from '@coreui/icons'

export const RatingCustomIcons3Example = () => {
  const icons = {
    1: <CIcon icon={cilMoodVeryBad} customClassName=" " />,
    2: <CIcon icon={cilMoodBad} customClassName=" " />,
    3: <CIcon icon={cilMeh} customClassName=" " />,
    4: <CIcon icon={cilMoodGood} customClassName=" " />,
    5: <CIcon icon={cilMoodVeryGood} customClassName=" " />,
  }

  const activeIcons = {
    1: <CIcon icon={cilMoodVeryBad} customClassName="text-danger-emphasis" />,
    2: <CIcon icon={cilMoodBad} customClassName="text-danger" />,
    3: <CIcon icon={cilMeh} customClassName="text-warning" />,
    4: <CIcon icon={cilMoodGood} customClassName="text-success" />,
    5: <CIcon icon={cilMoodVeryGood} customClassName="text-success-emphasis" />,
  }

  return (
    <CRating
      activeIcon={activeIcons}
      highlightOnlySelected
      icon={icons}
      tooltips={['Very bad', 'Bad', 'Meh', 'Good', 'Very good']}
      value={3}
    />
  )
}
```

## Custom feedback

The React 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.

```html
import React, { useState } from 'react'
import { CBadge } from '@coreui/react'
import { CRating } from '@coreui/react-pro'

export const RatingCustomFeedbackExample = () => {
  const RATING_LABELS: string[] = ['Very bad', 'Bad', 'Meh', 'Good', 'Very good']
  const [currentValue, setCurrentValue] = useState<number>(3)
  const [label, setLabel] = useState<string>(RATING_LABELS[currentValue - 1])

  const handleChange = (value: number | null) => {
    if (value) {
      setCurrentValue(value)
      setLabel(RATING_LABELS[value - 1])
    }
  }

  const handleHover = (value: number | null) => {
    if (value) {
      setLabel(RATING_LABELS[value - 1])
    } else {
      setLabel(RATING_LABELS[currentValue - 1])
    }
  }

  return (
    <div className="d-flex align-items-center">
      <div className="text-body-secondary me-3">{currentValue} / 5</div>
      <CRating
        className="d-inline-flex"
        onChange={handleChange}
        onHover={handleHover}
        value={currentValue}
      />
      {label && (
        <CBadge className="ms-3" color="dark">
          {label}
        </CBadge>
      )}
    </div>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CRating /&gt;](./api/#crating)


---

# React Select Component

> React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.

## Default

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectExample = () => {
  return (
    <CFormSelect
      aria-label="Default select example"
      options={[
        { label: 'Open this select menu' },
        { label: 'One', value: '1' },
        { label: 'Two', value: '2' },
        { label: 'Three', value: '3', disabled: true },
      ]}
    />
  )
}
```

You can also add options manually

```jsx 
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
```

## Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizingExample = () => {
  return (
    <>
      <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CFormSelect>
      <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CFormSelect>
    </>
  )
}
```

The `multiple` attribute is also supported:

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizing2Example = () => {
  return (
    <CFormSelect size="lg" multiple aria-label="Multiple select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

As is the `htmlSize` property:

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizing3Example = () => {
  return (
    <CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

## Disabled

Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectDisabledExample = () => {
  return (
    <CFormSelect
      aria-label="Default select example"
      options={[
        'Open this select menu',
        { label: 'One', value: '1' },
        { label: 'Two', value: '2' },
        { label: 'Three', value: '3', disabled: true },
      ]}
    />
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormSelect /&gt;](./api/#cformselect)
- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
- [&lt;CFormLabel /&gt;](./api/#cformlabel)
- [&lt;CFormText /&gt;](./api/#cformtext)


---

# React Stepper Component – Multi-Step Form Wizard for React

> Build multi-step forms and wizards easily with the React Stepper component. Create advanced form flows with custom indicators, validation, and flexible layouts for your React applications.

The React Stepper component helps you build intuitive, multi-step form experiences (Form Wizards) for your React applications. It supports horizontal and vertical layouts, built-in form validation, custom indicators, and seamless integration with any React form library.

If you need a Form Wizard in React, or a fully customizable React Stepper, this component is a perfect solution.

## Example

This example shows a simple multi-step form wizard built using the React Stepper component. Each step defines its content and optionally references a form for validation. The `steps` prop is used to configure the wizard, while the `onStepChange` prop tracks the currently active step. Internal step validation can be managed through provided form references (`formRef`). Use this setup when you need a basic horizontal stepper without advanced customizations.

```html
import React, { useId, useRef, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'
import { CPasswordInput, CStepper } from '@coreui/react-pro'
import type { StepperRef } from '@coreui/react-pro/src/components/stepper/types'

export const StepperExample = () => {
  const stepperRef = useRef<StepperRef>(null)
  const uid = useId()
  const [currentStep, setCurrentStep] = useState(1)
  const [finish, setFinish] = useState(false)

  const steps = [
    {
      label: 'Step 1',
      content: (
        <CForm className="row g-3">
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Łukasz" label="First name" />
          </CCol>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Holeczek" label="Last name" />
          </CCol>
          <CCol md={4}>
            <CFormLabel htmlFor={`validationCustomUsername-${uid}-01`}>Username</CFormLabel>
            <CInputGroup>
              <CInputGroupText id={`inputGroupPrependFeedback-${uid}`}>@</CInputGroupText>
              <CFormInput
                type="text"
                id={`validationCustomUsername-${uid}-01`}
                aria-describedby={`inputGroupPrependFeedback-${uid}`}
              />
            </CInputGroup>
          </CCol>
        </CForm>
      ),
    },
    {
      label: 'Step 2',
      content: (
        <CForm className="row g-3">
          <CCol md={6}>
            <CFormInput type="text" label="City" />
          </CCol>
          <CCol md={3}>
            <CFormSelect label="State">
              <option disabled>Choose...</option>
              <option>...</option>
            </CFormSelect>
          </CCol>
          <CCol md={3}>
            <CFormInput type="text" label="Zip" />
          </CCol>
        </CForm>
      ),
    },
    {
      label: 'Step 3',
      content: (
        <CForm className="row g-3 needs-validation">
          <CCol md={6}>
            <CFormInput type="email" label="Email" />
          </CCol>
          <CCol md={6}>
            <CPasswordInput label="Password" />
          </CCol>
          <CCol xs={12}>
            <CFormCheck type="checkbox" label="Agree to terms and conditions" />
          </CCol>
        </CForm>
      ),
    },
  ]
  return (
    <>
      <CStepper
        steps={steps}
        onFinish={() => setFinish(true)}
        onReset={() => setFinish(false)}
        onStepChange={setCurrentStep}
        ref={stepperRef}
      />
      {finish && <div>All steps are complete—you're finished.</div>}
      <div className="d-flex gap-2 mt-4">
        {!finish && currentStep > 1 && (
          <CButton color="secondary" onClick={() => stepperRef.current?.prev()}>
            Previous
          </CButton>
        )}
        {!finish && currentStep < steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.next()}>
            Next
          </CButton>
        )}
        {!finish && currentStep === steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.finish()}>
            Finish
          </CButton>
        )}
        {finish && (
          <CButton color="danger" onClick={() => stepperRef.current?.reset()}>
            Reset
          </CButton>
        )}
      </div>
    </>
  )
}
```

## Vertical indicator layout

In this example, 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.

```html
import React from 'react'
import { CStepper } from '@coreui/react-pro'

export const StepperVerticalIndicatorLayoutExample = () => {
  return <CStepper steps={['Step 1', 'Step 2', 'Step 3']} stepButtonLayout="vertical" />
}
```

## Vertical layout

This example shows a fully vertical multi-step form wizard created with the React 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.

```html
import React, { useId, useRef, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'
import { CPasswordInput, CStepper } from '@coreui/react-pro'
import type { StepperRef } from '@coreui/react-pro/src/components/stepper/types'

export const StepperVerticalLayoutExample = () => {
  const stepperRef = useRef<StepperRef>(null)
  const uid = useId()
  const [currentStep, setCurrentStep] = useState(1)
  const [finish, setFinish] = useState(false)

  const steps = [
    {
      label: 'Step 1',
      content: (
        <CForm className="row g-3 py-3">
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Łukasz" label="First name" />
          </CCol>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Holeczek" label="Last name" />
          </CCol>
          <CCol md={4}>
            <CFormLabel htmlFor={`validationCustomUsername-${uid}-01`}>Username</CFormLabel>
            <CInputGroup>
              <CInputGroupText id={`inputGroupPrependFeedback-${uid}`}>@</CInputGroupText>
              <CFormInput
                type="text"
                id={`validationCustomUsername-${uid}-01`}
                aria-describedby={`inputGroupPrependFeedback-${uid}`}
              />
            </CInputGroup>
          </CCol>
        </CForm>
      ),
    },
    {
      label: 'Step 2',
      content: (
        <CForm className="row g-3  py-3">
          <CCol md={6}>
            <CFormInput type="text" label="City" />
          </CCol>
          <CCol md={3}>
            <CFormSelect label="State">
              <option disabled>Choose...</option>
              <option>...</option>
            </CFormSelect>
          </CCol>
          <CCol md={3}>
            <CFormInput type="text" label="Zip" />
          </CCol>
        </CForm>
      ),
    },
    {
      label: 'Step 3',
      content: (
        <CForm className="row g-3 pt-3">
          <CCol md={6}>
            <CFormInput type="email" label="Email" />
          </CCol>
          <CCol md={6}>
            <CPasswordInput label="Password" />
          </CCol>
          <CCol xs={12}>
            <CFormCheck type="checkbox" label="Agree to terms and conditions" />
          </CCol>
        </CForm>
      ),
    },
  ]

  return (
    <>
      <CStepper
        layout="vertical"
        steps={steps}
        onFinish={() => setFinish(true)}
        onReset={() => setFinish(false)}
        onStepChange={setCurrentStep}
        ref={stepperRef}
      />
      <div className="d-flex gap-2 mt-4">
        {!finish && currentStep > 1 && (
          <CButton color="secondary" onClick={() => stepperRef.current?.prev()}>
            Previous
          </CButton>
        )}
        {!finish && currentStep < steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.next()}>
            Next
          </CButton>
        )}
        {!finish && currentStep === steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.finish()}>
            Finish
          </CButton>
        )}
        {finish && (
          <CButton color="danger" onClick={() => stepperRef.current?.reset()}>
            Reset
          </CButton>
        )}
      </div>
    </>
  )
}
```

## Linear Stepper (Form Wizard)

By default, the React Stepper Component behaves as a linear wizard: users must complete each step sequentially before moving to the next one.  
When `linear` mode is enabled (`linear={true}`), users cannot skip steps. They must finish the current form validation successfully to unlock the next step.

Use a Linear React Stepper when you need a guided and controlled experience, such as:

- Checkout processes
- Registration wizards
- Multistep forms with required validation

```html
import React from 'react'
import { CStepper } from '@coreui/react-pro'

export const StepperLinearExample = () => {
  return <CStepper steps={['Step 1', 'Step 2', 'Step 3']} />
}
```

This ensures data integrity and improves the user experience by keeping the flow focused.

## Non-linear Stepper (Optional Steps)

You can configure the React 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 React 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

```html
import React from 'react'
import { CStepper } from '@coreui/react-pro'

export const StepperNonLinearExample = () => {
  return <CStepper linear={false} steps={['Step 1', 'Step 2', 'Step 3']} />
}
```

In non-linear mode, all steps are accessible unless explicitly disabled.

## Form Validation

The React Stepper component natively supports step-by-step form validation. When the `validation` prop is enabled (it is `true` by default), users must complete each form properly before moving to the next step. If a form inside a step is invalid, validation messages are shown, and navigation is blocked. 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.

### Browser default validation 

This example shows a stepper with native browser validation enabled:

```html
import React, { useId, useRef, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'
import { CPasswordInput, CStepper } from '@coreui/react-pro'
import type { StepperRef } from '@coreui/react-pro/src/components/stepper/types'

export const StepperValidationExample = () => {
  const stepperRef = useRef<StepperRef>(null)
  const formStep1Ref = useRef<HTMLFormElement>(null)
  const formStep2Ref = useRef<HTMLFormElement>(null)
  const formStep3Ref = useRef<HTMLFormElement>(null)

  const uid = useId()
  const [currentStep, setCurrentStep] = useState(1)
  const steps = [
    {
      label: 'Step 1',
      content: (
        <CForm className="row g-3" ref={formStep1Ref}>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Łukasz" label="First name" required />
          </CCol>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Holeczek" label="Last name" required />
          </CCol>
          <CCol md={4}>
            <CFormLabel htmlFor={`validationCustomUsername-${uid}-01`}>Username</CFormLabel>
            <CInputGroup>
              <CInputGroupText id={`inputGroupPrependFeedback-${uid}`}>@</CInputGroupText>
              <CFormInput
                type="text"
                id={`validationCustomUsername-${uid}-01`}
                aria-describedby={`inputGroupPrependFeedback-${uid}`}
                required
              />
            </CInputGroup>
          </CCol>
        </CForm>
      ),
      formRef: formStep1Ref,
    },
    {
      label: 'Step 2',
      content: (
        <CForm className="row g-3" ref={formStep2Ref}>
          <CCol md={6}>
            <CFormInput type="text" label="City" />
          </CCol>
          <CCol md={3}>
            <CFormSelect label="State">
              <option disabled>Choose...</option>
              <option>...</option>
            </CFormSelect>
          </CCol>
          <CCol md={3}>
            <CFormInput type="text" label="Zip" />
          </CCol>
        </CForm>
      ),
      formRef: formStep2Ref,
    },
    {
      label: 'Step 3',
      content: (
        <CForm className="row g-3" ref={formStep3Ref}>
          <CCol md={6}>
            <CFormInput type="email" label="Email" required />
          </CCol>
          <CCol md={6}>
            <CPasswordInput label="Password" required />
          </CCol>
          <CCol xs={12}>
            <CFormCheck type="checkbox" label="Agree to terms and conditions" />
          </CCol>
        </CForm>
      ),
      formRef: formStep3Ref,
    },
  ]
  return (
    <>
      <CStepper steps={steps} onStepChange={setCurrentStep} ref={stepperRef} />
      <div className="d-flex gap-2 mt-4">
        {currentStep > 1 && (
          <CButton color="secondary" onClick={() => stepperRef.current?.prev()}>
            Previous
          </CButton>
        )}
        {currentStep < steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.next()}>
            Next
          </CButton>
        )}
        {currentStep === steps.length && (
          <>
            <CButton color="primary" onClick={() => stepperRef.current?.finish()}>
              Finish
            </CButton>
            <CButton color="danger" onClick={() => stepperRef.current?.reset()}>
              Reset
            </CButton>
          </>
        )}
      </div>
    </>
  )
}
```

### Custom validation style

Beyond basic HTML5 validation, you can define custom validation rules for each step using the `onStepValidationComplete` callback. This allows you to implement asynchronous validation (e.g., API checks) or complex form validation logic per step. In the example below, custom validation triggers additional UI feedback. Use `onStepValidationComplete` when you need precise control over step validation beyond the standard browser mechanisms.

```html
import React, { useId, useRef, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'
import { CPasswordInput, CStepper } from '@coreui/react-pro'
import type { StepperRef } from '@coreui/react-pro/src/components/stepper/types'

export const StepperCustomValidationExample = () => {
  const stepperRef = useRef<StepperRef>(null)
  const formStep1Ref = useRef<HTMLFormElement>(null)
  const formStep2Ref = useRef<HTMLFormElement>(null)
  const formStep3Ref = useRef<HTMLFormElement>(null)

  const uid = useId()
  const [currentStep, setCurrentStep] = useState(1)
  const [validationState, setValidationState] = useState(0)

  const steps = [
    {
      label: 'Step 1',
      content: (
        <CForm className="row g-3" ref={formStep1Ref} noValidate validated={validationState === 1}>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Łukasz" label="First name" required />
          </CCol>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Holeczek" label="Last name" required />
          </CCol>
          <CCol md={4}>
            <CFormLabel htmlFor={`validationCustomUsername-${uid}-01`}>Username</CFormLabel>
            <CInputGroup>
              <CInputGroupText id={`inputGroupPrependFeedback-${uid}`}>@</CInputGroupText>
              <CFormInput
                type="text"
                id={`validationCustomUsername-${uid}-01`}
                aria-describedby={`inputGroupPrependFeedback-${uid}`}
                required
              />
            </CInputGroup>
          </CCol>
        </CForm>
      ),
      formRef: formStep1Ref,
    },
    {
      label: 'Step 2',
      content: (
        <CForm className="row g-3" ref={formStep2Ref} noValidate validated={validationState === 2}>
          <CCol md={6}>
            <CFormInput type="text" label="City" />
          </CCol>
          <CCol md={3}>
            <CFormSelect label="State">
              <option disabled>Choose...</option>
              <option>...</option>
            </CFormSelect>
          </CCol>
          <CCol md={3}>
            <CFormInput type="text" label="Zip" />
          </CCol>
        </CForm>
      ),
      formRef: formStep2Ref,
    },
    {
      label: 'Step 3',
      content: (
        <CForm className="row g-3" ref={formStep3Ref} noValidate validated={validationState === 3}>
          <CCol md={6}>
            <CFormInput type="email" label="Email" required />
          </CCol>
          <CCol md={6}>
            <CPasswordInput label="Password" required />
          </CCol>
          <CCol xs={12}>
            <CFormCheck type="checkbox" label="Agree to terms and conditions" />
          </CCol>
        </CForm>
      ),
      formRef: formStep3Ref,
    },
  ]
  return (
    <>
      <CStepper
        steps={steps}
        onStepChange={setCurrentStep}
        onStepValidationComplete={({ stepNumber }) => setValidationState(stepNumber)}
        ref={stepperRef}
      />
      <div className="d-flex gap-2 mt-4">
        {currentStep > 1 && (
          <CButton color="secondary" onClick={() => stepperRef.current?.prev()}>
            Previous
          </CButton>
        )}
        {currentStep < steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.next()}>
            Next
          </CButton>
        )}
        {currentStep === steps.length && (
          <>
            <CButton color="primary" onClick={() => stepperRef.current?.finish()}>
              Finish
            </CButton>
            <CButton color="danger" onClick={() => stepperRef.current?.reset()}>
              Reset
            </CButton>
          </>
        )}
      </div>
    </>
  )
}
```

### Skip validation 

To completely skip form validation and allow free navigation between steps, add `validation={false}` to the React stepper component:

```html
import React, { useId, useRef, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'
import { CPasswordInput, CStepper } from '@coreui/react-pro'
import type { StepperRef } from '@coreui/react-pro/src/components/stepper/types'

export const StepperSkipValidationExample = () => {
  const stepperRef = useRef<StepperRef>(null)
  const formStep1Ref = useRef<HTMLFormElement>(null)
  const formStep2Ref = useRef<HTMLFormElement>(null)
  const formStep3Ref = useRef<HTMLFormElement>(null)

  const uid = useId()
  const [currentStep, setCurrentStep] = useState(1)
  const steps = [
    {
      label: 'Step 1',
      content: (
        <CForm className="row g-3" ref={formStep1Ref} noValidate>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Łukasz" label="First name" required />
          </CCol>
          <CCol md={4}>
            <CFormInput type="text" defaultValue="Holeczek" label="Last name" required />
          </CCol>
          <CCol md={4}>
            <CFormLabel htmlFor={`validationCustomUsername-${uid}-01`}>Username</CFormLabel>
            <CInputGroup>
              <CInputGroupText id={`inputGroupPrependFeedback-${uid}`}>@</CInputGroupText>
              <CFormInput
                type="text"
                id={`validationCustomUsername-${uid}-01`}
                aria-describedby={`inputGroupPrependFeedback-${uid}`}
                required
              />
            </CInputGroup>
          </CCol>
        </CForm>
      ),
      formRef: formStep1Ref,
    },
    {
      label: 'Step 2',
      content: (
        <CForm className="row g-3" ref={formStep2Ref} noValidate>
          <CCol md={6}>
            <CFormInput type="text" label="City" />
          </CCol>
          <CCol md={3}>
            <CFormSelect label="State">
              <option disabled>Choose...</option>
              <option>...</option>
            </CFormSelect>
          </CCol>
          <CCol md={3}>
            <CFormInput type="text" label="Zip" />
          </CCol>
        </CForm>
      ),
      formRef: formStep2Ref,
    },
    {
      label: 'Step 3',
      content: (
        <CForm className="row g-3" ref={formStep3Ref} noValidate>
          <CCol md={6}>
            <CFormInput type="email" label="Email" required />
          </CCol>
          <CCol md={6}>
            <CPasswordInput label="Password" required />
          </CCol>
          <CCol xs={12}>
            <CFormCheck type="checkbox" label="Agree to terms and conditions" />
          </CCol>
        </CForm>
      ),
      formRef: formStep3Ref,
    },
  ]
  return (
    <>
      <CStepper steps={steps} onStepChange={setCurrentStep} validation={false} ref={stepperRef} />
      <div className="d-flex gap-2 mt-4">
        {currentStep > 1 && (
          <CButton color="secondary" onClick={() => stepperRef.current?.prev()}>
            Previous
          </CButton>
        )}
        {currentStep < steps.length && (
          <CButton color="primary" onClick={() => stepperRef.current?.next()}>
            Next
          </CButton>
        )}
        {currentStep === steps.length && (
          <>
            <CButton color="primary" onClick={() => stepperRef.current?.finish()}>
              Finish
            </CButton>
            <CButton color="danger" onClick={() => stepperRef.current?.reset()}>
              Reset
            </CButton>
          </>
        )}
      </div>
    </>
  )
}
```

## 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:

<div className="table-api table-responsive border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Function</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><kbd>ArrowLeft</kbd> / <kbd>ArrowUp</kbd></td>
        <td>Moves focus to previous step.</td>
      </tr>
      <tr>
        <td><kbd>ArrowRight</kbd> / <kbd>ArrowDown</kbd></td>
        <td>Moves focus to next step.</td>
      </tr>
      <tr>
        <td><kbd>Home</kbd> / <kbd>End</kbd></td>
        <td>Jumps focus to first or last step</td>
      </tr>
    </tbody>
  </table>
</div>

## API

Full API documentation for the CStepper component, including all available props, customization options, and integration tips for building advanced multi-step forms and wizards in React.

- [&lt;CStepper /&gt;](./api/#cstepper)


---

# React Switch Components

> Create consistent cross-browser and cross-device switch component.

## About

React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".

When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.

## Example

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchExample = () => {
  return (
    <>
      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
      <CFormSwitch
        label="Checked switch checkbox input"
        id="formSwitchCheckChecked"
        defaultChecked
      />
      <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
      <CFormSwitch
        label="Disabled checked switch checkbox input"
        id="formSwitchCheckCheckedDisabled"
        defaultChecked
        disabled
      />
    </>
  )
}
```

## Sizing

Larger or smaller react switches? Add `size="lg"` or `size="xl"` for additional sizes.

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchSizingExample = () => {
  return (
    <>
      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal" />
      <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
      <CFormSwitch
        size="xl"
        label="Extra large switch checkbox input"
        id="formSwitchCheckDefaultXL"
      />
    </>
  )
}
```

## Reverse 

Put your switches on the opposite side by adding `reverse` boolean property.

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchReverseExample = () => {
  return (
    <>
      <CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch" />
      <CFormSwitch
        reverse
        type="radio"
        id="reverseFormSwitch2"
        label="Disabled reverse switch"
        disabled
      />
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormSwitch /&gt;](./api/#cformswitch)


---

# React Form Textarea Component

> React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.

## Example

```html
import React from 'react'
import { CForm, CFormTextarea } from '@coreui/react'

export const FormTextareaExample = () => {
  return (
    <CForm>
      <CFormTextarea
        id="exampleFormControlTextarea1"
        label="Example textarea"
        rows={3}
        text="Must be 8-20 words long."
      ></CFormTextarea>
    </CForm>
  )
}
```

If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.

```jsx
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
```

## Disabled

Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaDisabledExample = () => {
  return (
    <CFormTextarea
      className="mb-3"
      placeholder="Disabled textarea"
      aria-label="Disabled textarea example"
      disabled
    ></CFormTextarea>
  )
}
```

## Readonly

Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaReadonlyExample = () => {
  return (
    <CFormTextarea
      placeholder="Readonly textarea"
      aria-label="Readonly textarea example"
      disabled
      readOnly
    ></CFormTextarea>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormTextarea /&gt;](./api/#cformtextarea)
- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
- [&lt;CFormLabel /&gt;](./api/#cformlabel)
- [&lt;CFormText /&gt;](./api/#cformtext)


---

# React Time Picker Component

> React Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.

## Example

To create a basic React Time Picker, use:

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={4}>
        <CTimePicker label="Time" locale="en-US" />
      </CCol>
      <CCol sm={6} lg={4}>
        <CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />
      </CCol>
    </CRow>
  )
}
```

## Sizing

Set heights using `size` property like `size="lg"` and `size="sm"`.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerSizingExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CCol lg={5}>
          <CTimePicker locale="en-US" size="lg" />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CCol lg={4}>
          <CTimePicker locale="en-US" />
        </CCol>
      </CRow>
      <CRow>
        <CCol lg={3}>
          <CTimePicker locale="en-US" size="sm" />
        </CCol>
      </CRow>
    </>
  )
}
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerDisabledExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker disabled locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Readonly

Add the `inputReadOnly` boolean attribute to prevent modification of the input's value.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerReadonlyExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker inputReadOnly locale="en-US" />
      </CCol>
    </CRow>
  )
}
```

## Custom formats

### Disable minutes and seconds

Customize React Time Picker to display only hours, or hours and minutes by disabling minutes/seconds.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerDisableMinutesAndSecondsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6} lg={4}>
        <CTimePicker label="Only hours and minutes" locale="en-US" seconds={false} />
      </CCol>
      <CCol sm={6} lg={4}>
        <CTimePicker label="Only hours" locale="en-US" minutes={false} seconds={false} />
      </CCol>
    </CRow>
  )
}
```

### Custom hours, minutes and seconds

Tailor the React Time Picker to your needs by specifying custom values for hours, minutes, and seconds. Use arrays to define selectable options or functions for dynamic filtering. The example below demonstrates setting specific hour options, minute intervals, and a condition for seconds only to include values less than 20.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerCustomHoursMinutesAndSecondsExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker
          locale="en-US"
          hours={[1, 3, 5, 7]}
          minutes={[0, 15, 30, 45]}
          seconds={(s) => s < 20}
        />
      </CCol>
    </CRow>
  )
}
```

In this configuration, the React TimePicker restricts hours to a predefined set, minutes to quarter intervals, and seconds to values under 20, offering a high degree of customization for precise time selection scenarios.

## Locale

Tailor the React Time Picker to match different locales, offering an inclusive user experience across diverse languages. Automatically adapt or set specific locales to meet your application's needs.

### Auto

Our Time Picker component automatically detects and adapts to the user's locale, ensuring a localized experience without explicit configuration.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocaleAutoExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker />
      </CCol>
    </CRow>
  )
}
```

### Chinese

Specify the locale to Chinese (`zh-CN`) for users in China, enhancing usability with a familiar format and language.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocaleChineseExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker placeholder="入住日期" locale="zh-CN" />
      </CCol>
    </CRow>
  )
}
```

### Japanese

Set the Time Picker's locale to Japanese (`ja`) to cater to Japanese users, presenting date and time in a localized format.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocaleJapaneseExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker placeholder="日付を選択" locale="ja" />
      </CCol>
    </CRow>
  )
}
```

### Korean

Configure the locale to Korean (`ko`) for a tailored experience in Korea, offering date and time selection in the local language.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocaleKoreanExample = () => {
  return (
    <CRow>
      <CCol sm={6} lg={4}>
        <CTimePicker placeholder="날짜 선택" locale="ko" />
      </CCol>
    </CRow>
  )
}
```

This approach ensures that our React TimePicker component is versatile and adaptable, providing a seamless and intuitive interface for users worldwide.

## Right to left support

RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss.

### Hebrew

Optimize the Time Picker for Hebrew-speaking users with RTL layout. Set the locale to Hebrew (`he-IL`) and apply RTL direction to align with Hebrew script.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocaleHebrewExample = () => {
  return (
    <CRow dir="rtl">
      <CCol sm={6} lg={4}>
        <CTimePicker placeholder="בחר תאריך" locale="he-IL" />
      </CCol>
    </CRow>
  )
}
```

### Persian

Adapt the Time Picker for Persian-speaking audiences by enabling RTL layout. Customize the locale to Persian (`fa-IR`) and utilize RTL directionality for seamless integration.

```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CTimePicker } from '@coreui/react-pro'

export const TimePickerLocalePersianExample = () => {
  return (
    <CRow dir="rtl">
      <CCol sm={6} lg={4}>
        <CTimePicker placeholder="تاریخ شروع" locale="fa-IR" />
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CTimePicker /&gt;](./api/#ctimepicker)


---

# React Form Layout

> Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

## Forms

Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` 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>`s within a `<CForm>` 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 `<CForm>`.

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/bootstrap/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.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutFormGridExample = () => {
  return (
    <CRow>
      <CCol xs>
        <CFormInput placeholder="First name" aria-label="First name" />
      </CCol>
      <CCol xs>
        <CFormInput placeholder="Last name" aria-label="Last name" />
      </CCol>
    </CRow>
  )
}
```

## Gutters

By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutGuttersExample = () => {
  return (
    <CRow className="g-3">
      <CCol xs>
        <CFormInput placeholder="First name" aria-label="First name" />
      </CCol>
      <CCol xs>
        <CFormInput placeholder="Last name" aria-label="Last name" />
      </CCol>
    </CRow>
  )
}
```

More complex layouts can also be created with the grid system.

```html
import React from 'react'
import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormSelect } from '@coreui/react'

export const LayoutGutters2Example = () => {
  return (
    <CForm className="row g-3">
      <CCol md={6}>
        <CFormInput type="email" id="inputEmail4" label="Email" />
      </CCol>
      <CCol md={6}>
        <CFormInput type="password" id="inputPassword4" label="Password" />
      </CCol>
      <CCol xs={12}>
        <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St" />
      </CCol>
      <CCol xs={12}>
        <CFormInput
          id="inputAddress2"
          label="Address 2"
          placeholder="Apartment, studio, or floor"
        />
      </CCol>
      <CCol md={6}>
        <CFormInput id="inputCity" label="City" />
      </CCol>
      <CCol md={4}>
        <CFormSelect id="inputState" label="State">
          <option>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={2}>
        <CFormInput id="inputZip" label="Zip" />
      </CCol>
      <CCol xs={12}>
        <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Sign in
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## 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 `.col-form-label` to your `<CFormLabel>`s 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.

```html
import React from 'react'
import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const LayoutHorizontalFormExample = () => {
  return (
    <CForm>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="email" id="inputEmail3" />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword3" />
        </CCol>
      </CRow>
      <fieldset className="row mb-3">
        <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
        <CCol sm={10}>
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios1"
            value="option1"
            label="First radio"
            defaultChecked
          />
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios2"
            value="option2"
            label="Second radio"
          />
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios3"
            value="option3"
            label="Third disabled radio"
            disabled
          />
        </CCol>
      </fieldset>
      <CRow className="mb-3">
        <div className="col-sm-10 offset-sm-2">
          <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
        </div>
      </CRow>
      <CButton color="primary" type="submit">
        Sign in
      </CButton>
    </CForm>
  )
}
```

### Horizontal form label sizing

Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const LayoutHorizontalFormLabelSizingExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="email"
            className="form-control form-control-sm"
            id="colFormLabelSm"
            placeholder="col-form-label-sm"
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
        </CCol>
      </CRow>
      <CRow>
        <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="email"
            className="form-control form-control-lg"
            id="colFormLabelLg"
            placeholder="col-form-label-lg"
          />
        </CCol>
      </CRow>
    </>
  )
}
```

## Column sizing

As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. 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 `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutColumnSizingExample = () => {
  return (
    <CRow className="g-3">
      <CCol sm={7}>
        <CFormInput placeholder="City" aria-label="City" />
      </CCol>
      <CCol sm>
        <CFormInput placeholder="State" aria-label="State" />
      </CCol>
      <CCol sm>
        <CFormInput placeholder="Zip" aria-label="Zip" />
      </CCol>
    </CRow>
  )
}
```

## Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol 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.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutAutoSizingExample = () => {
  return (
    <CForm className="row gy-2 gx-3 align-items-center">
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
          Name
        </CFormLabel>
        <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
      </CCol>
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="autoSizingInputGroup" placeholder="Username" />
        </CInputGroup>
      </CCol>
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
          Preference
        </CFormLabel>
        <CFormSelect id="autoSizingSelect">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
      <CCol xs="auto">
        <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```

You can then remix that once again with size-specific column classes.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutAutoSizing2Example = () => {
  return (
    <CForm className="row gx-3 gy-2 align-items-center">
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
          Name
        </CFormLabel>
        <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
      </CCol>
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
        </CInputGroup>
      </CCol>
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
          Preference
        </CFormLabel>
        <CFormSelect id="specificSizeSelect">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
      <CCol xs="auto">
        <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## Inline forms

Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutInlineFormsExample = () => {
  return (
    <CForm className="row row-cols-lg-auto g-3 align-items-center">
      <CCol xs={12}>
        <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
        </CInputGroup>
      </CCol>

      <CCol xs={12}>
        <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
          Preference
        </CFormLabel>
        <CFormSelect id="inlineFormSelectPref">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>

      <CCol xs={12}>
        <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
      </CCol>

      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```


---

# React Form Validation

> Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

## Example

For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. 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.

```html
import React, { FormEvent, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormFeedback,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationExample = () => {
  const [validated, setValidated] = useState(false)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }

    setValidated(true)
  }

  return (
    <CForm
      className="row g-3 needs-validation"
      noValidate
      validated={validated}
      onSubmit={handleSubmit}
    >
      <CCol md={4}>
        <CFormInput
          type="text"
          defaultValue="Mark"
          feedbackValid="Looks good!"
          id="validationCustom01"
          label="First name"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          defaultValue="Otto"
          feedbackValid="Looks good!"
          id="validationCustom02"
          label="First name"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            type="text"
            aria-describedby="inputGroupPrependFeedback"
            feedbackValid="Please choose a username."
            id="validationCustomUsername"
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput
          type="text"
          aria-describedby="validationCustom03Feedback"
          feedbackInvalid="Please provide a valid city."
          id="validationCustom03"
          label="City"
          required
        />
      </CCol>
      <CCol md={3}>
        <CFormSelect
          aria-describedby="validationCustom04Feedback"
          feedbackInvalid="Please select a valid state."
          id="validationCustom04"
          label="State"
          required
        >
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput
          type="text"
          aria-describedby="validationCustom05Feedback"
          feedbackInvalid="Please provide a valid zip."
          id="validationCustom05"
          label="Zip"
          required
        />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          required
        />
        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. 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.

```html
import React from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationBrowserDefaultsExample = () => {
  return (
    <CForm className="row g-3">
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationDefault01"
          label="First name"
          defaultValue="Mark"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationDefault02"
          label="Last name"
          defaultValue="Otto"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
        <CInputGroup>
          <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
          <CFormInput
            type="text"
            id="validationDefaultUsername"
            defaultValue=""
            aria-describedby="inputGroupPrepend02"
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput type="text" id="validationDefault03" label="City" required />
      </CCol>
      <CCol md={3}>
        <CFormSelect id="validationDefault04" label="State">
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput type="text" id="validationDefault05" label="Zip" required />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          required
        />
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## Custom validation

In case you require custom or server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties.

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).

```html
import React from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormFeedback,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationCustomExample = () => {
  return (
    <CForm className="row g-3">
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationServer01"
          label="Email"
          feedback="Looks good!"
          defaultValue="name@surname.com"
          valid
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationServer02"
          label="Repeat email"
          feedback="Looks good!"
          defaultValue="name@surname.com"
          valid
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
          <CFormInput
            type="text"
            id="validationServerUsername"
            feedback="Please choose a username."
            defaultValue=""
            aria-describedby="inputGroupPrepend03"
            invalid
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput
          type="text"
          id="validationServer03"
          label="City"
          feedback="Please provide a valid city."
          invalid
          required
        />
      </CCol>
      <CCol md={3}>
        <CFormSelect
          id="validationServer04"
          label="State"
          feedback="Please provide a valid city."
          invalid
        >
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput
          type="text"
          id="validationServer05"
          label="zip"
          feedback="Please provide a valid zip."
          invalid
          required
        />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          invalid
          required
        />
        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## Supported elements

Validation styles are available for the following form controls and components:

- `<CFormCheck>`s
- `<CFormInput>`s
- `<CFormSelect>`s
- `<CFormTextarea>`s

```html
import React from 'react'
import { CButton, CForm, CFormCheck, CFormInput, CFormSelect, CFormTextarea } from '@coreui/react'

export const ValidationSupportedElementsExample = () => {
  return (
    <CForm validated={true}>
      <div className="mb-3">
        <CFormTextarea
          feedbackInvalid="Please enter a message in the textarea."
          id="validationTextarea"
          label="Textarea"
          placeholder="Required example textarea"
          required
        ></CFormTextarea>
      </div>
      <CFormCheck
        className="mb-3"
        id="validationFormCheck1"
        label="Check this checkbox"
        feedbackInvalid="Example invalid feedback text"
        required
      />
      <CFormCheck
        type="radio"
        name="radio-stacked"
        id="validationFormCheck2"
        label="Check this checkbox"
        required
      />
      <CFormCheck
        className="mb-3"
        type="radio"
        name="radio-stacked"
        id="validationFormCheck3"
        label="Or toggle this other radio"
        feedbackInvalid="More example invalid feedback text"
        required
      />
      <div className="mb-3">
        <CFormSelect
          feedbackInvalid="Example invalid select feedback"
          aria-label="select example"
          required
        >
          <option selected value="">
            Open this select menu
          </option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="validationTextarea"
          feedbackInvalid="Example invalid form file feedback"
          aria-label="file example"
          required
        />
      </div>
      <div className="mb-3">
        <CButton type="submit" color="primary" disabled>
          Submit form
        </CButton>
      </div>
    </CForm>
  )
}
```

## 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.

```html
import React, { FormEvent, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationTooltipsExample = () => {
  const [validated, setValidated] = useState(false)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }

    setValidated(true)
  }

  return (
    <CForm
      className="row g-3 needs-validation"
      noValidate
      validated={validated}
      onSubmit={handleSubmit}
    >
      <CCol md={4} className="position-relative">
        <CFormInput
          type="text"
          defaultValue="Mark"
          feedbackValid="Looks good!"
          id="validationTooltip01"
          label="First name"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={4} className="position-relative">
        <CFormInput
          type="text"
          defaultValue="Otto"
          feedbackValid="Looks good!"
          id="validationTooltip02"
          label="First name"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={4} className="position-relative">
        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
          <CFormInput
            type="text"
            aria-describedby="inputGroupPrependFeedback"
            feedbackInvalid="Please choose a username."
            id="validationTooltipUsername"
            required
            tooltipFeedback
          />
        </CInputGroup>
      </CCol>
      <CCol md={6} className="position-relative">
        <CFormInput
          type="text"
          aria-describedby="validationTooltip03Feedback"
          feedbackInvalid="Please provide a valid city."
          id="validationTooltip03"
          label="City"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={3} className="position-relative">
        <CFormSelect
          aria-describedby="validationTooltip04Feedback"
          feedbackInvalid="Please select a valid state."
          id="validationTooltip04"
          label="State"
          required
          tooltipFeedback
        >
          <option selected disabled value="">
            Choose...
          </option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3} className="position-relative">
        <CFormInput
          type="text"
          aria-describedby="validationTooltip05Feedback"
          feedbackInvalid="Please provide a valid zip."
          id="validationTooltip05"
          label="Zip"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol xs={12} className="position-relative">
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```


---

# React Accordion Component

> Build vertically collapsing accordions in combination with our React Accordion component.

## How to use React Accordion component.

Click the accordions below to expand/collapse the accordion content.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionExample = () => {
  return (
    <CAccordion activeItemKey={2}>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

### 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.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionFlushExample = () => {
  return (
    <CAccordion flush>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

### Always open

Add `alwaysOpen` property to make react accordion items stay open when another item is opened.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionAlwaysOpenExample = () => {
  return (
    <CAccordion alwaysOpen activeItemKey={2}>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAccordion /&gt;](./api/#caccordion)
- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)


---

# React Alert Component

> React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.

## How to use React Alert Component.

React 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).

```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertExample = () => {
  return (
    <>
      <CAlert color="primary">A simple primary alert—check it out!</CAlert>
      <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
      <CAlert color="success">A simple success alert—check it out!</CAlert>
      <CAlert color="danger">A simple danger alert—check it out!</CAlert>
      <CAlert color="warning">A simple warning alert—check it out!</CAlert>
      <CAlert color="info">A simple info alert—check it out!</CAlert>
      <CAlert color="light">A simple light alert—check it out!</CAlert>
      <CAlert color="dark">A simple dark alert—check it out!</CAlert>
    </>
  )
}
```

> ### Live example
> 
> Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
> 
> ```html
import React, { useState } from 'react'
import { CAlert, CButton } from '@coreui/react'

export const AlertLiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
        A simple primary alert—check it out!
      </CAlert>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Show live alert
      </CButton>
    </>
  )
}
```
> 
> ### Link color
> 
> Use the `` component to immediately give matching colored links inside any react alert component.
> 
> ```html
import React from 'react'
import { CAlert, CAlertLink } from '@coreui/react'

export const AlertLinkColorExample = () => {
  return (
    <>
      <CAlert color="primary">
        A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="secondary">
        A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="success">
        A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="danger">
        A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="warning">
        A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="info">
        A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
      <CAlert color="light">
        A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
      <CAlert color="dark">
        A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
    </>
  )
}
```
> 
> ### Additional content
> 
> React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
> 
> ```html
import React from 'react'
import { CAlert, CAlertHeading } from '@coreui/react'

export const AlertAdditionalContentExample = () => {
  return (
    <CAlert color="success">
      <CAlertHeading as="h4">Well done!</CAlertHeading>
      <p>
        Aww yeah, you successfully read this important alert message. This example text is going to
        run a bit longer so that you can see how spacing within an alert works with this kind of
        content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
      </p>
    </CAlert>
  )
}
```
> 
> ### Icons
> 
> Similarly, you can use [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex) and [CoreUI Icons](https://coreui.io/icons/) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertIcons1Example = () => {
  return (
    <CAlert color="primary" className="d-flex align-items-center">
      <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
        <rect
          width="32"
          height="176"
          x="240"
          y="176"
          fill="var(--ci-primary-color, currentColor)"
          className="ci-primary"
        ></rect>
        <rect
          width="32"
          height="32"
          x="240"
          y="384"
          fill="var(--ci-primary-color, currentColor)"
          className="ci-primary"
        ></rect>
        <path
          fill="var(--ci-primary-color, currentColor)"
          d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
          className="ci-primary"
        ></path>
      </svg>
      <div>An example alert with an icon</div>
    </CAlert>
  )
}
```
> 
> Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://coreui.io/icons/).
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'

export const AlertIcons2Example = () => {
  return (
    <>
      <CAlert color="primary" className="d-flex align-items-center">
        <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example alert with an icon</div>
      </CAlert>
      <CAlert color="success" className="d-flex align-items-center">
        <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example success alert with an icon</div>
      </CAlert>
      <CAlert color="warning" className="d-flex align-items-center">
        <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example warning alert with an icon</div>
      </CAlert>
      <CAlert color="danger" className="d-flex align-items-center">
        <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example danger alert with an icon</div>
      </CAlert>
    </>
  )
}
```
> 
> ### Solid
> 
> Use `variant="solid"` to change contextual colors to solid.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertSolidExample = () => {
  return (
    <>
      <CAlert color="primary" variant="solid">
        A simple solid primary alert—check it out!
      </CAlert>
      <CAlert color="secondary" variant="solid">
        A simple solid secondary alert—check it out!
      </CAlert>
      <CAlert color="success" variant="solid">
        A simple solid success alert—check it out!
      </CAlert>
      <CAlert color="danger" variant="solid">
        A simple solid danger alert—check it out!
      </CAlert>
      <CAlert color="warning" variant="solid">
        A simple solid warning alert—check it out!
      </CAlert>
      <CAlert color="info" variant="solid">
        A simple solid info alert—check it out!
      </CAlert>
      <CAlert color="light" variant="solid" className="text-high-emphasis">
        A simple solid light alert—check it out!
      </CAlert>
      <CAlert color="dark" variant="solid">
        A simple solid dark alert—check it out!
      </CAlert>
    </>
  )
}
```
> 
> ### Dismissing
> 
> React Alert component can also be easily dismissed. Just add the `dismissible` prop.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertDismissingExample = () => {
  return (
    <CAlert
      color="warning"
      dismissible
      onClose={() => {
        alert('👋 Well, hi there! Thanks for dismissing me.')
      }}
    >
      <strong>Go right ahead</strong> and click that dismiss over there on the right.
    </CAlert>
  )
}
```
> 
> 
> When an alert is dismissed, the element is completely removed from the page structure. If a
> keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
> depending on the browser, reset to the start of the page/document.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAlert /&gt;](./api/#calert)
- [&lt;CAlertHeading /&gt;](./api/#calertheading)
- [&lt;CAlertLink /&gt;](./api/#calertlink)


---

# React Avatar Component

> The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.

## Image avatars

Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarImage = () => {
  return (
    <>
      <CAvatar src={'/assets/img/avatars/1.jpg'} />
      <CAvatar src={'/assets/img/avatars/2.jpg'} />
      <CAvatar src={'/assets/img/avatars/3.jpg'} />
    </>
  )
}
```

## Letter avatars

Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarLetter = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white">
        CUI
      </CAvatar>
      <CAvatar color="secondary">CUI</CAvatar>
      <CAvatar color="warning" textColor="white">
        CUI
      </CAvatar>
    </>
  )
}
```

## Icons avatars 

Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarIcon = () => {
  return (
    <>
      <CAvatar color="info" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
      <CAvatar color="success" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
      <CAvatar color="danger" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
    </>
  )
}
```

## Rounded avatars

Use the `shape="rounded"` prop to make react avatars squared with rounded corners.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarRounded = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white" shape="rounded">
        CUI
      </CAvatar>
      <CAvatar color="secondary" shape="rounded">
        CUI
      </CAvatar>
      <CAvatar color="warning" textColor="white" shape="rounded">
        CUI
      </CAvatar>
    </>
  )
}
```

## Square avatars

Use the `shape="rounded-0"` prop to make react avatars squared.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarSquare = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white" shape="rounded-0">
        CUI
      </CAvatar>
      <CAvatar color="secondary" shape="rounded-0">
        CUI
      </CAvatar>
      <CAvatar color="warning" textColor="white" shape="rounded-0">
        CUI
      </CAvatar>
    </>
  )
}
```

## Sizes

Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarSizes = () => {
  return (
    <>
      <CAvatar color="secondary" size="xl">
        CUI
      </CAvatar>
      <CAvatar color="secondary" size="lg">
        CUI
      </CAvatar>
      <CAvatar color="secondary" size="md">
        CUI
      </CAvatar>
      <CAvatar color="secondary">CUI</CAvatar>
      <CAvatar color="secondary" size="sm">
        CUI
      </CAvatar>
    </>
  )
}
```

## Avatars with status

Add a status indicator to avatars using the `status` property to show online or offline status.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarWithStatus = () => {
  return (
    <>
      <CAvatar src={'/assets/img/avatars/1.jpg'} status="success" />
      <CAvatar color="secondary" status="danger">
        CUI
      </CAvatar>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAvatar /&gt;](./api/#cavatar)


---

# React Badge Component

> React badge component is small count and labeling component.

## How to use React Badge Component.

React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeExample = () => {
  return (
    <>
      <h1>
        Example heading <CBadge color="secondary">New</CBadge>
      </h1>
      <h2>
        Example heading <CBadge color="secondary">New</CBadge>
      </h2>
      <h3>
        Example heading <CBadge color="secondary">New</CBadge>
      </h3>
      <h4>
        Example heading <CBadge color="secondary">New</CBadge>
      </h4>
      <h5>
        Example heading <CBadge color="secondary">New</CBadge>
      </h5>
      <h6>
        Example heading <CBadge color="secondary">New</CBadge>
      </h6>
    </>
  )
}
```

React badges can be used as part of links or buttons to provide a counter.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge2Example = () => {
  return (
    <CButton color="primary">
      Notifications <CBadge color="secondary">4</CBadge>
    </CButton>
  )
}
```

Remark that depending on how you use them, react badges may be complicated for users of screen readers and related assistive technologies.

Unless the context is clear, consider including additional context with a visually hidden piece of additional text.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge3Example = () => {
  return (
    <CButton color="primary">
      Profile <CBadge color="secondary">9</CBadge>
      <span className="visually-hidden">unread messages</span>
    </CButton>
  )
}
```

### Positioned

Use `position` prop to modify a component and position it in the corner of a link or button.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositionedExample = () => {
  return (
    <>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="top-start" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="top-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <br />
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="bottom-start" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="bottom-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
    </>
  )
}
```

You can also create more generic indicators without a counter using a few more utilities.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositioned2Example = () => {
  return (
    <CButton color="primary" className="position-relative">
      Profile
      <CBadge
        className="border border-light p-2"
        color="danger"
        position="top-end"
        shape="rounded-circle"
      >
        <span className="visually-hidden">New alerts</span>
      </CBadge>
    </CButton>
  )
}
```

## Contextual variations

Add any of the below-mentioned `color` props to modify the presentation of a react badge.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextualVariations = () => {
  return (
    <>
      <CBadge color="primary">primary</CBadge>
      <CBadge color="success">success</CBadge>
      <CBadge color="danger">danger</CBadge>
      <CBadge color="warning">warning</CBadge>
      <CBadge color="info">info</CBadge>
      <CBadge textBgColor="light">light</CBadge>
      <CBadge color="dark">dark</CBadge>
    </>
  )
}
```

You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextual2Variations = () => {
  return (
    <>
      <CBadge textBgColor="primary">primary</CBadge>
      <CBadge textBgColor="success">success</CBadge>
      <CBadge textBgColor="danger">danger</CBadge>
      <CBadge textBgColor="warning">warning</CBadge>
      <CBadge textBgColor="info">info</CBadge>
      <CBadge textBgColor="light">light</CBadge>
      <CBadge textBgColor="dark">dark</CBadge>
    </>
  )
}
```

## Pill badges

Apply the `shape="rounded-pill"` prop to make badges rounded.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgePillExample = () => {
  return (
    <>
      <CBadge color="primary" shape="rounded-pill">
        primary
      </CBadge>
      <CBadge color="success" shape="rounded-pill">
        success
      </CBadge>
      <CBadge color="danger" shape="rounded-pill">
        danger
      </CBadge>
      <CBadge color="warning" shape="rounded-pill">
        warning
      </CBadge>
      <CBadge color="info" shape="rounded-pill">
        info
      </CBadge>
      <CBadge textBgColor="light" shape="rounded-pill">
        light
      </CBadge>
      <CBadge color="dark" shape="rounded-pill">
        dark
      </CBadge>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CBadge /&gt;](./api/#cbadge)


---

# React Breadcrumb Component

> React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.

## How to use React Breadcrumb Component.

The react 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.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbExample = () => {
  return (
    <>
      <CBreadcrumb>
        <CBreadcrumbItem active>Home</CBreadcrumbItem>
      </CBreadcrumb>

      <CBreadcrumb>
        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
        <CBreadcrumbItem active>Library</CBreadcrumbItem>
      </CBreadcrumb>

      <CBreadcrumb>
        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
        <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
        <CBreadcrumbItem active>Data</CBreadcrumbItem>
      </CBreadcrumb>
    </>
  )
}
```

## 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 `--cui-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.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividersExample = () => {
  return (
    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' } as React.CSSProperties}>
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

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.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividers2Example = () => {
  return (
    <CBreadcrumb
      style={
        {
          '--cui-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='%236c757d'/%3E%3C/svg%3E")`,
        } as React.CSSProperties
      }
    >
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

```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;`.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividers3Example = () => {
  return (
    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' } as React.CSSProperties}>
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

```scss
$breadcrumb-divider: none;
```

## Accessibility

Since react 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 `<nav>` element. You should also add an `aria-current="page"` to the last item of the set to show that it represents the current page. **CoreUI for React.js automatically add all of this labels to breadcrumb's components.**

For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CBreadcrumb /&gt;](./api/#cbreadcrumb)
- [&lt;CBreadcrumbItem /&gt;](./api/#cbreadcrumbitem)


---

# React Button Component

> React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.

## How to use React Button Component.

CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonExample = () => {
  return (
    <>
      <CButton color="primary">Primary</CButton>
      <CButton color="secondary">Secondary</CButton>
      <CButton color="success">Success</CButton>
      <CButton color="danger">Danger</CButton>
      <CButton color="warning">Warning</CButton>
      <CButton color="info">Info</CButton>
      <CButton color="light">Light</CButton>
      <CButton color="dark">Dark</CButton>
      <CButton color="link">Link</CButton>
    </>
  )
}
```

> ## Disable text wrapping
> 
> If you don't want the react button text to wrap, you can add the `.text-nowrap` className to the ``. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
> 
> ## Button components
> 
> The `` component are designed for `` , `` or `` elements (though some browsers may apply a slightly different rendering).
> 
> If you're using `` component as `` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonComponentsExample = () => {
  return (
    <>
      <CButton as="a" color="primary" href="#" role="button">
        Link
      </CButton>
      <CButton type="submit" color="primary">
        Button
      </CButton>
      <CButton as="input" type="button" color="primary" value="Input" />
      <CButton as="input" type="submit" color="primary" value="Submit" />
      <CButton as="input" type="reset" color="primary" value="Reset" />
    </>
  )
}
```
> 
> ## Outline buttons
> 
> ### Base outline style
> 
> The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonOutlineBaseClassExample = () => {
  return (
    <>
      <CButton variant="outline">Base outline button</CButton>
      <CButton variant="outline" active>
        Active state
      </CButton>
      <CButton variant="outline" disabled>
        Disabled state
      </CButton>
    </>
  )
}
```
> 
> These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.
> 
> ### Themed outline variants
> 
> If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonOutlineExample = () => {
  return (
    <>
      <CButton color="primary" variant="outline">
        Primary
      </CButton>
      <CButton color="secondary" variant="outline">
        Secondary
      </CButton>
      <CButton color="success" variant="outline">
        Success
      </CButton>
      <CButton color="danger" variant="outline">
        Danger
      </CButton>
      <CButton color="warning" variant="outline">
        Warning
      </CButton>
      <CButton color="info" variant="outline">
        Info
      </CButton>
      <CButton color="light" variant="outline">
        Light
      </CButton>
      <CButton color="dark" variant="outline">
        Dark
      </CButton>
    </>
  )
}
```
> 
> These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.
> 
> 
> Some of the button styles use a relatively light foreground color, and should only be used on a
> dark background in order to have sufficient contrast.

## Ghost buttons

### Base ghost style

Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.

They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonGhostBaseClassExample = () => {
  return (
    <>
      <CButton variant="ghost">Base ghost button</CButton>
      <CButton variant="ghost" active>
        Active state
      </CButton>
      <CButton variant="ghost" disabled>
        Disabled state
      </CButton>
    </>
  )
}
```

To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonGhostExample = () => {
  return (
    <>
      <CButton color="primary" variant="ghost">
        Primary
      </CButton>
      <CButton color="secondary" variant="ghost">
        Secondary
      </CButton>
      <CButton color="success" variant="ghost">
        Success
      </CButton>
      <CButton color="danger" variant="ghost">
        Danger
      </CButton>
      <CButton color="warning" variant="ghost">
        Warning
      </CButton>
      <CButton color="info" variant="ghost">
        Info
      </CButton>
      <CButton color="light" variant="ghost">
        Light
      </CButton>
      <CButton color="dark" variant="ghost">
        Dark
      </CButton>
    </>
  )
}
```

## Sizes

Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizesExample = () => {
  return (
    <>
      <CButton color="primary" size="lg">
        Large button
      </CButton>
      <CButton color="secondary" size="lg">
        Large button
      </CButton>
    </>
  )
}
```

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizes2Example = () => {
  return (
    <>
      <CButton color="primary" size="sm">
        Small button
      </CButton>
      <CButton color="secondary" size="sm">
        Small button
      </CButton>
    </>
  )
}
```

You can even roll your own custom sizing with CSS variables:

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizes3Example = () => {
  const customVars = {
    '--cui-btn-padding-y': '.25rem',
    '--cui-btn-padding-x': '.5rem',
    '--cui-btn-font-size': '.75rem',
  } as React.CSSProperties

  return (
    <CButton color="primary" size="sm" style={customVars}>
      Custom button
    </CButton>
  )
}
```

## Shapes

### Pill buttons

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonShapePillExample = () => {
  return (
    <>
      <CButton color="primary" className="rounded-pill">
        Primary
      </CButton>
      <CButton color="secondary" className="rounded-pill">
        Secondary
      </CButton>
      <CButton color="success" className="rounded-pill">
        Success
      </CButton>
      <CButton color="danger" className="rounded-pill">
        Danger
      </CButton>
      <CButton color="warning" className="rounded-pill">
        Warning
      </CButton>
      <CButton color="info" className="rounded-pill">
        Info
      </CButton>
      <CButton color="light" className="rounded-pill">
        Light
      </CButton>
      <CButton color="dark" className="rounded-pill">
        Dark
      </CButton>
      <CButton color="link" className="rounded-pill">
        Link
      </CButton>
    </>
  )
}
```

### Square buttons

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonShapeSquareExample = () => {
  return (
    <>
      <CButton color="primary" className="rounded-0">
        Primary
      </CButton>
      <CButton color="secondary" className="rounded-0">
        Secondary
      </CButton>
      <CButton color="success" className="rounded-0">
        Success
      </CButton>
      <CButton color="danger" className="rounded-0">
        Danger
      </CButton>
      <CButton color="warning" className="rounded-0">
        Warning
      </CButton>
      <CButton color="info" className="rounded-0">
        Info
      </CButton>
      <CButton color="light" className="rounded-0">
        Light
      </CButton>
      <CButton color="dark" className="rounded-0">
        Dark
      </CButton>
      <CButton color="link" className="rounded-0">
        Link
      </CButton>
    </>
  )
}
```

## Disabled state

Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonDisabledExample = () => {
  return (
    <>
      <CButton color="primary" disabled>
        Primary button
      </CButton>
      <CButton color="secondary" disabled>
        Button
      </CButton>
      <CButton color="primary" variant="outline" disabled>
        Primary button
      </CButton>
      <CButton color="secondary" variant="outline" disabled>
        Button
      </CButton>
    </>
  )
}
```

Disabled buttons using the `<a>` component act a little different:

`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonDisabled2Example = () => {
  return (
    <>
      <CButton as="a" href="#" color="primary" disabled>
        Primary link
      </CButton>
      <CButton as="a" href="#" color="secondary" disabled>
        Link
      </CButton>
    </>
  )
}
```

The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

## Block buttons

Create buttons that span the full width of a parent—by using utilities.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlockExample = () => {
  return (
    <div className="d-grid gap-2">
      <CButton color="primary">Button</CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock2Example = () => {
  return (
    <div className="d-grid gap-2 d-md-block">
      <CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
    </div>
  )
}
```

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock3Example = () => {
  return (
    <div className="d-grid gap-2 col-6 mx-auto">
      <CButton color="primary">Button</CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock4Example = () => {
  return (
    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
      <CButton color="primary" className="me-md-2">
        Button
      </CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

## Toggle states

Add the `toggle` boolean prop to create simple on/off toggle buttons. A toggle button manages its own state: on click it flips the `.active` class and the `aria-pressed` attribute. Seed the initial state with the `active` prop.

> Visually, these toggle buttons are identical to the [checkbox toggle buttons](https://coreui.io/react/docs/forms/checks-radios/#checkbox-toggle-buttons). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonToggleExample = () => {
  return (
    <>
      <div className="d-flex gap-1 mb-3">
        <CButton toggle>Toggle button</CButton>
        <CButton toggle active>
          Active toggle button
        </CButton>
        <CButton toggle disabled>
          Disabled toggle button
        </CButton>
      </div>
      <div className="d-flex gap-1">
        <CButton color="primary" toggle>
          Toggle button
        </CButton>
        <CButton color="primary" toggle active>
          Active toggle button
        </CButton>
        <CButton color="primary" toggle disabled>
          Disabled toggle button
        </CButton>
      </div>
    </>
  )
}
```

Toggle links behave the same way:

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonToggleLinkExample = () => {
  return (
    <>
      <div className="d-flex gap-1 mb-3">
        <CButton as="a" href="#" role="button" toggle>
          Toggle link
        </CButton>
        <CButton as="a" href="#" role="button" toggle active>
          Active toggle link
        </CButton>
        <CButton as="a" role="button" toggle disabled>
          Disabled toggle link
        </CButton>
      </div>
      <div className="d-flex gap-1">
        <CButton as="a" color="primary" href="#" role="button" toggle>
          Toggle link
        </CButton>
        <CButton as="a" color="primary" href="#" role="button" toggle active>
          Active toggle link
        </CButton>
        <CButton as="a" color="primary" role="button" toggle disabled>
          Disabled toggle link
        </CButton>
      </div>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CButton /&gt;](./api/#cbutton)


---

# React Button Group Component

> React button group component allows to group a series of buttons and power them with JavaScript.

## How to use React Button Group Component.

Wrap a series of `<CButton>` components in `<CButtonGroup>`.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic example">
      <CButton color="primary">Left</CButton>
      <CButton color="primary">Middle</CButton>
      <CButton color="primary">Right</CButton>
    </CButtonGroup>
  )
}
```

> Ensure the correct role and provide a label}>
> For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
> 
> Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.

These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroup2Example = () => {
  return (
    <CButtonGroup>
      <CButton href="#" color="primary" active>
        Active link
      </CButton>
      <CButton href="#" color="primary">
        Link
      </CButton>
      <CButton href="#" color="primary">
        Link
      </CButton>
    </CButtonGroup>
  )
}
```

## Mixed styles

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupMixedStylesExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic mixed styles example">
      <CButton color="danger">Left</CButton>
      <CButton color="warning">Middle</CButton>
      <CButton color="success">Right</CButton>
    </CButtonGroup>
  )
}
```

## Outlined styles

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupOutlinedStylesExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic outlined example">
      <CButton color="primary" variant="outline">
        Left
      </CButton>
      <CButton color="primary" variant="outline">
        Middle
      </CButton>
      <CButton color="primary" variant="outline">
        Right
      </CButton>
    </CButtonGroup>
  )
}
```

## Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

```html
import React from 'react'
import { CButtonGroup, CFormCheck } from '@coreui/react'

export const ButtonGroupCheckboxAndRadioExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck1"
        autoComplete="off"
        label="Checkbox 1"
      />
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck2"
        autoComplete="off"
        label="Checkbox 2"
      />
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck3"
        autoComplete="off"
        label="Checkbox 3"
      />
    </CButtonGroup>
  )
}
```

```html
import React from 'react'
import { CButtonGroup, CFormCheck } from '@coreui/react'

export const ButtonGroupCheckboxAndRadio2Example = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio1"
        autoComplete="off"
        label="Radio 1"
      />
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio2"
        autoComplete="off"
        label="Radio 2"
      />
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio3"
        autoComplete="off"
        label="Radio 3"
      />
    </CButtonGroup>
  )
}
```

## Button toolbar

Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.

```html
import React from 'react'
import { CButton, CButtonGroup, CButtonToolbar } from '@coreui/react'

export const ButtonToolbarExample = () => {
  return (
    <CButtonToolbar role="toolbar" aria-label="Toolbar with button groups">
      <CButtonGroup className="me-2" role="group" aria-label="First group">
        <CButton color="primary">1</CButton>
        <CButton color="primary">2</CButton>
        <CButton color="primary">3</CButton>
        <CButton color="primary">4</CButton>
      </CButtonGroup>
      <CButtonGroup className="me-2" role="group" aria-label="Second group">
        <CButton color="secondary">5</CButton>
        <CButton color="secondary">6</CButton>
        <CButton color="secondary">7</CButton>
      </CButtonGroup>
      <CButtonGroup className="me-2" role="group" aria-label="Third group">
        <CButton color="info">8</CButton>
      </CButtonGroup>
    </CButtonToolbar>
  )
}
```

Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CButtonToolbar,
  CFormInput,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const ButtonToolbar2Example = () => {
  return (
    <>
      <CButtonToolbar className="mb-3" role="toolbar" aria-label="Toolbar with button groups">
        <CButtonGroup className="me-2" role="group" aria-label="First group">
          <CButton color="secondary" variant="outline">
            1
          </CButton>
          <CButton color="secondary" variant="outline">
            2
          </CButton>
          <CButton color="secondary" variant="outline">
            3
          </CButton>
          <CButton color="secondary" variant="outline">
            4
          </CButton>
        </CButtonGroup>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </CInputGroup>
      </CButtonToolbar>
      <CButtonToolbar
        className="justify-content-between"
        role="group"
        aria-label="Toolbar with button groups"
      >
        <CButtonGroup className="me-2" role="group" aria-label="First group">
          <CButton color="secondary" variant="outline">
            1
          </CButton>
          <CButton color="secondary" variant="outline">
            2
          </CButton>
          <CButton color="secondary" variant="outline">
            3
          </CButton>
          <CButton color="secondary" variant="outline">
            4
          </CButton>
        </CButtonGroup>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </CInputGroup>
      </CButtonToolbar>
    </>
  )
}
```

## Sizing

Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupSizingExample = () => {
  return (
    <>
      <CButtonGroup size="lg" role="group" aria-label="Large button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
      <br />
      <CButtonGroup role="group" aria-label="Default button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
      <br />
      <CButtonGroup size="sm" role="group" aria-label="Small button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
    </>
  )
}
```

## Nesting

Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const ButtonGroupNestingExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Button group with nested dropdown">
      <CButton color="primary">1</CButton>
      <CButton color="primary">2</CButton>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </CButtonGroup>
  )
}
```

## Vertical variation

Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CCol,
  CFormCheck,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CRow,
} from '@coreui/react'

export const ButtonGroupVerticalExample = () => {
  return (
    <CRow>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
        </CButtonGroup>
      </CCol>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </CButtonGroup>
      </CCol>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio1"
            autoComplete="off"
            label="Radio 1"
            defaultChecked
          />
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio2"
            autoComplete="off"
            label="Radio 2"
          />
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio3"
            autoComplete="off"
            label="Radio 3"
          />
        </CButtonGroup>
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CButtonGroup /&gt;](./api/#cbuttongroup)
- [&lt;CButtonToolbar /&gt;](./api/#cbuttontoolbar)


---

# React Calendar Component

> The React Calendar Component is a versatile, customizable tool for creating responsive calendars in React, supporting day, month, and year selection, and global locales.

## Example

Explore the React Calendar component's basic usage through sample code snippets demonstrating its core functionality.

### Days

Select specific days using the React Calendar component. The example below shows basic usage.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarDaysExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="en-US" startDate="2024/02/13" />
    </div>
  )
}
```

### Weeks

Set the `selectionType` to `week` to enable selection of entire week. You can also add `showWeekNumber` to show week numbers.

CalendarWeeksExample

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarWeeksExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        className="border rounded"
        locale="en-US"
        selectionType="week"
        showWeekNumber
        startDate="2024W15"
        onStartDateChange={(date) => console.log(date)}
      />
    </div>
  )
}
```

### Months

Set the `selectionType` property to `month` to enable selection of entire months.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarMonthsExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        className="border rounded"
        locale="en-US"
        selectionType="month"
        startDate="2024-2"
      />
    </div>
  )
}
```

### Quarters

Set the `selectionType` property to `quarter` to enable quarters range selection.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarQuartersExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        className="border rounded"
        locale="en-US"
        selectionType="quarter"
        startDate="2024Q1"
        onStartDateChange={(date) => console.log(date)}
      />
    </div>
  )
}
```

### Years

Set the `selectionType` property to `year` to enable years range selection.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarYearsExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="en-US" selectionType="year" startDate="2024" />
    </div>
  )
}
```

## Multiple calendar panels

Display multiple calendar panels side by side by setting the `calendars` property. This can be useful for selecting ranges or comparing dates across different months.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarMultipleCalendarPanelsExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar calendars={2} className="border rounded" locale="en-US" />
    </div>
  )
}
```

## Range selection

Enable range selection to allow users to pick a start and end date. This example shows how to configure the React Calendar component to handle date ranges.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarRangeSelectionExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        calendars={2}
        className="border rounded"
        locale="en-US"
        range
        startDate="2022/08/23"
        endDate="2022/09/08"
      />
    </div>
  )
}
```

## Disabled dates

The React Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the `disabledDates` prop. It accepts:

- A single `Date` or an array of `Date` objects.
- A function or an array of functions that take a `Date` object as an argument and return a boolean indicating whether the date should be disabled.
- A mixed array of `Date` objects and functions.

To disable certain dates, you can provide them in an array. For date ranges, use nested arrays, where each inner array indicates a start date and an end date for that range:

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarDisabledDatesExample = () => {
  const calendarDate = new Date(2022, 2, 1)
  const disabledDates = [
    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
    new Date(2022, 1, 1),
    new Date(2022, 2, 1),
    new Date(2022, 2, 16),
    new Date(2022, 3, 16),
    [new Date(2022, 4, 2), new Date(2022, 4, 8)],
    [new Date(2022, 5, 1), new Date(2022, 6, 31)],
  ]
  const maxDate = new Date(2022, 12, 0)
  const minDate = new Date(2022, 1, 1)

  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        calendarDate={calendarDate}
        calendars={2}
        className="border rounded"
        disabledDates={disabledDates}
        locale="en-US"
        maxDate={maxDate}
        minDate={minDate}
        range
      />
    </div>
  )
}
```

### Disabling weekends

You can disable weekends by passing a function to the `disabledDates` prop. Here's how to do it:

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

const disableWeekends = (date: Date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}

export const CalendarDisablingWeekendsExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        calendars={2}
        className="border rounded"
        disabledDates={disableWeekends}
        locale="en-US"
        range
      />
    </div>
  )
}
```

In the example above:

- `disableWeekends` is a function that checks if a date falls on a Saturday (`6`) or a Sunday (`0`).
- The `disabledDates` prop is set to the `disableWeekends` function, which ensures that all weekends are disabled in the calendar.

This prop takes an array and applies custom logic to determine which dates should be disabled.

### Combining functions and specific dates

You can also combine specific dates and functions in the `disabledDates` array. For instance:

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

const disableWeekends = (date: Date) => {
  const day = date.getDay()
  return day === 0 || day === 6
}

export const CalendarCombiningFunctionsAndSpecificDatesExample = () => {
  const specificDates = [new Date(2024, 10, 25), new Date(2024, 11, 4), new Date(2024, 11, 12)] // Specific disabled dates

  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        calendarDate={new Date(2024, 10, 1)}
        calendars={2}
        className="border rounded"
        disabledDates={[disableWeekends, ...specificDates]}
        locale="en-US"
        range
      />
    </div>
  )
}
```

In this example:

- `disableWeekends` disables weekends as before.
- `specificDates` is an array of specific dates to disable.
- The `disabledDates` prop combines both, allowing you to disable weekends and specific dates simultaneously.

## Locale

The CoreUI React Calendar allows users to display dates in non-English locales, making it suitable for international applications.

### Auto

By default, the Calendar component uses the browser's default locale. However, you can easily configure it to use a different locale supported by the JavaScript Internationalization API. This feature helps create inclusive and accessible applications for a diverse audience.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarAutoLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" />
    </div>
  )
}
```

### Chinese

Here is an example of the React Calendar component with Chinese locale settings.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarChineseLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="zh-CN" />
    </div>
  )
}
```

### Japanese

Below is an example of the Calendar component with Japanese locale settings.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarJapaneseLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="ja" />
    </div>
  )
}
```

### Korean

Here is an example of the Calendar component with Korean locale settings.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarKoreanLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="ko" />
    </div>
  )
}
```

## Right to left support

RTL support is built-in and can be explicitly controlled through the `$enable-rtl` variables in scss.

### Hebrew

Example of the Calendar component with RTL support, using the Hebrew locale.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarHebrewLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center" dir="rtl">
      <CCalendar className="border rounded" locale="he-IL" />
    </div>
  )
}
```

### Persian

Example of the React Calendar component with Persian locale settings.

```html
import React from 'react'
import { CCalendar } from '@coreui/react-pro'

export const CalendarPersianLocaleExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CCalendar className="border rounded" locale="fa-IR" />
    </div>
  )
}
```

## Custom cell rendering

The React Calendar component provides powerful customization options through render props that allow you to completely control how calendar cells are displayed. These render functions are particularly useful when you need to add custom content, styling, or data to calendar cells.

### Render props

The component supports four render props, one for each view type:

- `renderDayCell={(date, meta) => ReactNode}` - Customize day cells in the days view
- `renderMonthCell={(date, meta) => ReactNode}` - Customize month cells in the months view
- `renderQuarterCell={(date, meta) => ReactNode}` - Customize quarter cells in the quarters view
- `renderYearCell={(date, meta) => ReactNode}` - Customize year cells in the years view

Each render function receives two parameters:

1. `date` - A JavaScript Date object representing the cell's date
2. `meta` - An object containing cell state information:
   - `isDisabled` - Whether the cell is disabled
   - `isInRange` - Whether the cell is within a selected range (range selection only)
   - `isSelected` - Whether the cell is selected
   - For `renderDayCell` only:
     - `isInCurrentMonth` - Whether the day belongs to the current month
     - `isToday` - Whether the day is today

The render functions should return a React node (JSX) that will be displayed inside the cell.

### Format options

In addition to custom rendering, you can control the display format of calendar elements using format props:

- `dayFormat` - Controls how day numbers are displayed (`'numeric'` or `'2-digit'`)
- `monthFormat` - Controls how month names are displayed (`'long'`, `'narrow'`, `'short'`, `'numeric'`, or `'2-digit'`)
- `yearFormat` - Controls how year numbers are displayed (`'numeric'` or `'2-digit'`)
- `weekdayFormat` - Controls how weekday names are displayed (number for character length, or `'long'`, `'narrow'`, `'short'`)

These format options use the JavaScript `Intl.DateTimeFormat` API and respect the `locale` prop.

### Pricing calendar with custom cells

This example demonstrates advanced usage of custom cell rendering to display pricing data across different calendar views. It uses `renderDayCell` to show daily prices, `renderMonthCell` to display monthly price ranges, and `renderYearCell` to show annual price ranges. The data is fetched from an external API and cached for performance.

```html
import React, { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
import { CCalendar } from '@coreui/react-pro'

type View = 'days' | 'months' | 'years'

interface PriceRange {
  min: number
  max: number
}

const toISODate = (date: Date) => date.toISOString().slice(0, 10)

const monthKey = (year: number, monthIndex: number) =>
  `${year}-${String(monthIndex + 1).padStart(2, '0')}-01`

const yearKey = (year: number) => `${year}-01-01`

const getDateRangeForView = (date: Date, view: View) => {
  const y = date.getFullYear()
  const m = date.getMonth()

  switch (view) {
    case 'days': {
      return { startDate: new Date(y, m, 1), endDate: new Date(y, m + 2, 0) }
    }
    case 'months': {
      return { startDate: new Date(y, 0, 1), endDate: new Date(y, 11, 31) }
    }
    case 'years': {
      const startYear = Math.floor(y / 12) * 12
      return { startDate: new Date(startYear, 0, 1), endDate: new Date(startYear + 11, 11, 31) }
    }
  }
}

const Cell = ({
  date,
  price,
  isSelected,
  isInCurrentMonth,
  view,
}: {
  date: ReactNode
  price: ReactNode
  isSelected: boolean
  isInCurrentMonth?: boolean
  view?: View
}) => (
  <div className="py-1">
    <div>{date}</div>
    <div
      className={
        isSelected
          ? 'text-reset'
          : view === 'days' && !isInCurrentMonth
            ? 'text-body-tertiary opacity-75'
            : 'text-body-tertiary'
      }
      style={{ fontSize: '0.75rem' }}
    >
      {price}
    </div>
  </div>
)

export const CalendarPricingWithCustomCellsExample = () => {
  const [calendarDate, setCalendarDate] = useState(() => new Date(2025, 0, 1))

  const [dayPrices, setDayPrices] = useState<Record<string, number>>({})
  const [monthRanges, setMonthRanges] = useState<Record<string, PriceRange>>({})
  const [yearRanges, setYearRanges] = useState<Record<string, PriceRange>>({})

  // request de-dupe
  const fetchedKeysRef = useRef(new Set<string>())
  const inFlightRef = useRef(new Set<string>())

  const fetchPricingData = useCallback(
    async (startDate: Date, endDate: Date, view: View, limit = 400) => {
      const start = toISODate(startDate)
      const end = toISODate(endDate)
      const requestKey = `${view}:${start}:${end}:${limit}`

      if (fetchedKeysRef.current.has(requestKey) || inFlightRef.current.has(requestKey)) {
        return
      }

      inFlightRef.current.add(requestKey)

      try {
        const res = await fetch(
          `https://apitest.coreui.io/demos/daily-rates.php?start_date=${start}&end_date=${end}&view=${view}&limit=${limit}`
        )
        const data = await res.json()

        fetchedKeysRef.current.add(requestKey)

        switch (view) {
          case 'days': {
            setDayPrices((prev) => ({ ...prev, ...data }))
            break
          }

          case 'months': {
            setMonthRanges((prev) => ({ ...prev, ...data }))
            break
          }

          default: {
            setYearRanges((prev) => ({ ...prev, ...data }))
            break
          }
        }
      } catch (error) {
        console.error('Error fetching pricing data:', error)
      } finally {
        inFlightRef.current.delete(requestKey)
      }
    },
    []
  )

  const requestFor = useCallback(
    (date: Date, view: View) => {
      const { startDate, endDate } = getDateRangeForView(date, view)
      fetchPricingData(startDate, endDate, view)
    },
    [fetchPricingData]
  )

  useEffect(() => {
    requestFor(calendarDate, 'days')
  }, [calendarDate, requestFor])

  const onCalendarDateChange = useCallback(
    (date: Date, view: View) => {
      setCalendarDate(date)
      requestFor(date, view ?? 'days')
    },
    [requestFor]
  )

  const onViewChanged = useCallback(
    (view: View) => {
      requestFor(calendarDate, view)
    },
    [calendarDate, requestFor]
  )

  return (
    <div className="d-flex justify-content-center">
      <CCalendar
        calendarDate={calendarDate}
        calendars={2}
        className="border rounded"
        locale="en-US"
        minDate={new Date(2022, 0, 1)}
        maxDate={new Date(2025, 11, 31)}
        range={true}
        renderDayCell={(date: Date, meta: any) => {
          const price = dayPrices[toISODate(date)]
          return (
            <Cell
              date={date.toLocaleDateString('en-US', { day: '2-digit' })}
              price={price ? `$${price}` : '-'}
              isSelected={!!meta?.isSelected}
              isInCurrentMonth={!!meta?.isInCurrentMonth}
              view="days"
            />
          )
        }}
        renderMonthCell={(date: Date, meta: any) => {
          const range = monthRanges[monthKey(date.getFullYear(), date.getMonth())]
          return (
            <Cell
              date={date.toLocaleDateString('en-US', { month: 'short' })}
              price={range ? `$${range.min}-$${range.max}` : '-'}
              isSelected={!!meta?.isSelected}
            />
          )
        }}
        renderYearCell={(date: Date, meta: any) => {
          const range = yearRanges[yearKey(date.getFullYear())]
          return (
            <Cell
              date={date.getFullYear()}
              price={range ? `$${range.min}-$${range.max}` : '-'}
              isSelected={!!meta?.isSelected}
            />
          )
        }}
        onCalendarDateChange={onCalendarDateChange}
        onViewChanged={onViewChanged}
      />
    </div>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCalendar /&gt;](./api/#ccalendar)


---

# React Callout Component

> React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.

## Examples

Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).

```html
import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutExample = () => {
  return (
    <>
      <CCallout color="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="secondary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="warning">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="info">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="light">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout color="dark">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCallout /&gt;](./api/#ccallout)


---

# React Card Component

> React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.

## About

A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.

## Example

Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/bootstrap/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Content types

CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.

### Body

The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.

```html
import React from 'react'
import { CCard, CCardBody } from '@coreui/react'

export const CardBodyExample = () => {
  return (
    <CCard>
      <CCardBody>This is some text within a card body.</CCardBody>
    </CCard>
  )
}
```

### Titles, text, and links

Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.

Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.

```html
import React from 'react'
import { CCard, CCardBody, CCardLink, CCardSubtitle, CCardText, CCardTitle } from '@coreui/react'

export const CardTitleExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
        <CCardLink href="#">Card link</CCardLink>
        <CCardLink href="#">Another link</CCardLink>
      </CCardBody>
    </CCard>
  )
}
```

### Images

`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'

export const CardImagesExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
      </CCardBody>
    </CCard>
  )
}
```

### List groups

Create lists of content in a card with a flush list group.

```html
import React from 'react'
import { CCard, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroupsExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardHeader, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroups2Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardHeader>Header</CCardHeader>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardFooter, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroups3Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
      <CCardFooter>Footer</CCardFooter>
    </CCard>
  )
}
```

### Kitchen sink

Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardImage,
  CCardLink,
  CCardText,
  CCardTitle,
  CListGroup,
  CListGroupItem,
} from '@coreui/react'

export const CardKitchenSinkExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
      </CCardBody>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
      <CCardBody>
        <CCardLink href="#">Card link</CCardLink>
        <CCardLink href="#">Another link</CCardLink>
      </CCardBody>
    </CCard>
  )
}
```

### Header and footer

Add an optional header and/or footer within a card.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'

export const CardHeaderExample = () => {
  return (
    <CCard>
      <CCardHeader>Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

Card headers can be styled by adding ex. `as="h5"`.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'

export const CardHeader2Example = () => {
  return (
    <CCard>
      <CCardHeader as="h5">Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader } from '@coreui/react'

export const CardHeader3Example = () => {
  return (
    <CCard>
      <CCardHeader>Quote</CCardHeader>
      <CCardBody>
        <blockquote className="blockquote mb-0">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
          <footer className="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </footer>
        </blockquote>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardFooter,
  CCardHeader,
  CCardText,
  CCardTitle,
} from '@coreui/react'

export const CardHeaderAndFooterExample = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
      <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
    </CCard>
  )
}
```

## Sizing

Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.

### Using grid markup

Using the grid, wrap cards in columns and rows as needed.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardSizingExample = () => {
  return (
    <CRow>
      <CCol sm={6}>
        <CCard>
          <CCardBody>
            <CCardTitle>Special title treatment</CCardTitle>
            <CCardText>
              With supporting text below as a natural lead-in to additional content.
            </CCardText>
            <CButton color="primary" href="#">
              Go somewhere
            </CButton>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm={6}>
        <CCard>
          <CCardBody>
            <CCardTitle>Special title treatment</CCardTitle>
            <CCardText>
              With supporting text below as a natural lead-in to additional content.
            </CCardText>
            <CButton color="primary" href="#">
              Go somewhere
            </CButton>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

### Using utilities

Use some of [available sizing utilities](https://coreui.io/bootstrap/docs/utilities/sizing/) to rapidly set a card's width.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardSizing2Example = () => {
  return (
    <>
      <CCard className="w-75 mb-3">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="w-50">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
    </>
  )
}
```

### Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardSizing3Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Text alignment

You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/bootstrap/docs/utilities/text/#text-alignment).

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardTextAlignmentExample = () => {
  return (
    <>
      <CCard className="mb-3" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="mb-3 text-center" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="text-end" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
    </>
  )
}
```

## Navigation

Add some navigation to a `<CCardHeader>` with our `<CNav>` component.

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCardText,
  CCardTitle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const CardNavigationExample = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>
        <CNav variant="tabs" className="card-header-tabs">
          <CNavItem>
            <CNavLink href="#" active>
              Active
            </CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#">Link</CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#" disabled>
              Disabled
            </CNavLink>
          </CNavItem>
        </CNav>
      </CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCardText,
  CCardTitle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const CardNavigation2Example = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>
        <CNav variant="pills" className="card-header-pills">
          <CNavItem>
            <CNavLink href="#" active>
              Active
            </CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#">Link</CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#" disabled>
              Disabled
            </CNavLink>
          </CNavItem>
        </CNav>
      </CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Images

Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.

### Image caps

Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardImageCapsExample = () => {
  return (
    <>
      <CCard className="mb-3">
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard className="mb-3">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
        <CCardImage orientation="bottom" src={'/assets/img/react.jpg'} />
      </CCard>
    </>
  )
}
```

### Image overlays

Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.

```html
import React from 'react'
import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'

export const CardImageOverlaysExample = () => {
  return (
    <CCard className="mb-3 bg-dark text-white">
      <CCardImage src={'/assets/img/react.jpg'} />
      <CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.
        </CCardText>
        <CCardText>Last updated 3 mins ago</CCardText>
      </CCardImageOverlay>
    </CCard>
  )
}
```

## Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardImageHorizontalExample = () => {
  return (
    <CCard className="mb-3" style={{ maxWidth: '540px' }}>
      <CRow className="g-0">
        <CCol md={4}>
          <CCardImage src={'/assets/img/react400.jpg'} />
        </CCol>
        <CCol md={8}>
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
            <CCardText>
              <small className="text-body-secondary">Last updated 3 mins ago</small>
            </CCardText>
          </CCardBody>
        </CCol>
      </CRow>
    </CCard>
  )
}
```

## Card styles

Cards include various options for customizing their backgrounds, borders, and color.

### Background and color

Use `color` property to change the appearance of a card.

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesBackgroundAndColorExample = () => {
  const colors = [
    { color: 'primary' },
    { color: 'secondary' },
    { color: 'success' },
    { color: 'danger' },
    { color: 'warning' },
    { color: 'info' },
    { color: 'light' },
    { color: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard textBgColor={item.color} className="mb-3">
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

### Border

Use [border utilities](https://coreui.io/bootstrap/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesBorderExample = () => {
  const colors = [
    { color: 'primary', textColor: 'primary' },
    { color: 'secondary', textColor: 'secondary' },
    { color: 'success', textColor: 'success' },
    { color: 'danger', textColor: 'danger' },
    { color: 'warning', textColor: 'warning' },
    { color: 'info', textColor: 'info' },
    { color: 'dark', textColor: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

### Top border

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesTopBorderExample = () => {
  const colors = [
    { color: 'primary', textColor: 'primary' },
    { color: 'secondary', textColor: 'secondary' },
    { color: 'success', textColor: 'success' },
    { color: 'danger', textColor: 'danger' },
    { color: 'warning', textColor: 'warning' },
    { color: 'info', textColor: 'info' },
    { color: 'dark', textColor: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard
            textColor={item.textColor}
            className={`mb-3 border-top-${item.color} border-top-3`}
          >
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

## Card layout

In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.

### Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.

```html
import React from 'react'
import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardGroupsExample = () => {
  return (
    <CCardGroup>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This card has supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This card has even longer content than the first to show that equal height
            action.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
    </CCardGroup>
  )
}
```

When using card groups with footers, their content will automatically line up.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardGroup,
  CCardImage,
  CCardText,
  CCardTitle,
} from '@coreui/react'

export const CardGroups2Example = () => {
  return (
    <CCardGroup>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This card has supporting text below as a natural lead-in to additional content.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This card has even longer content than the first to show that equal height
            action.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
    </CCardGroup>
  )
}
```

### Grid cards

Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 2}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGridExample = () => {
  return (
    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGrid2Example = () => {
  return (
    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardGrid3Example = () => {
  return (
    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This card has supporting text below as a natural lead-in to additional content.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This card has even longer content than the first to show that equal height
              action.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

Just like with card groups, card footers will automatically line up.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGrid4Example = () => {
  return (
    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This card has supporting text below as a natural lead-in to additional content.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This card has even longer content than the first to show that equal height
              action.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCard /&gt;](./api/#ccard)
- [&lt;CCardBody /&gt;](./api/#ccardbody)
- [&lt;CCardFooter /&gt;](./api/#ccardfooter)
- [&lt;CCardGroup /&gt;](./api/#ccardgroup)
- [&lt;CCardHeader /&gt;](./api/#ccardheader)
- [&lt;CCardImage /&gt;](./api/#ccardimage)
- [&lt;CCardImageOverlay /&gt;](./api/#ccardimageoverlay)
- [&lt;CCardLink /&gt;](./api/#ccardlink)
- [&lt;CCardSubtitle /&gt;](./api/#ccardsubtitle)
- [&lt;CCardText /&gt;](./api/#ccardtext)
- [&lt;CCardTitle /&gt;](./api/#ccardtitle)


---

# React Carousel Component

> React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.

## How it works

The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.

In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

## Example

Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.

### Slides only

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselSlidesOnlyExample = () => {
  return (
    <CCarousel>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With controls

Adding in the previous and next controls by `controls` property.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithControlsExample = () => {
  return (
    <CCarousel controls>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithIndicatorsExample = () => {
  return (
    <CCarousel controls indicators>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With captions

You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/bootstrap/docs/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.

```html
import React from 'react'
import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithCaptionsExample = () => {
  return (
    <CCarousel controls indicators>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
    </CCarousel>
  )
}
```

### Crossfade

Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselCrossfadeExample = () => {
  return (
    <CCarousel controls transition="crossfade">
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

## Dark variant

Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.

```html
import React from 'react'
import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'

export const CarouselDarkVariantExample = () => {
  return (
    <CCarousel controls indicators dark>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
    </CCarousel>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCarousel /&gt;](./api/#ccarousel)
- [&lt;CCarouselCaption /&gt;](./api/#ccarouselcaption)
- [&lt;CCarouselItem /&gt;](./api/#ccarouselitem)


---

# React Chart.js Component

> React wrapper for Chart.js 4.x, the most popular charting library.

## Installation

If you want to use our Chart.js React wrapper you have to install an additional package.

### Npm

```bash
npm install @coreui/react-chartjs
```

### Yarn

```bash
yarn add @coreui/react-chartjs
```

## Chart Types

### Line Chart

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
[Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartLineExample = () => {
  const chartRef = useRef<Chart<'line'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales?.x) {
          if (options.scales.x.grid) {
            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.x.ticks) {
            options.scales.x.ticks.color = getStyle('--cui-body-color')
          }
        }

        if (options.scales?.y) {
          if (options.scales.y.grid) {
            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.y.ticks) {
            options.scales.y.ticks.color = getStyle('--cui-body-color')
          }
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'line'> = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(220, 220, 220, 0.2)',
        borderColor: 'rgba(220, 220, 220, 1)',
        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
        pointBorderColor: '#fff',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
        fill: true,
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
        pointBorderColor: '#fff',
        data: [50, 12, 28, 29, 7, 25, 12, 70, 60],
        fill: true,
      },
    ],
  }

  const options: ChartOptions<'line'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      x: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        type: 'category',
      },
      y: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        beginAtZero: true,
      },
    },
  }

  return <CChart type="line" data={data} options={options} ref={chartRef} />
}
```

### Bar Chart

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartBarExample = () => {
  const chartRef = useRef<Chart<'bar'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales?.x) {
          if (options.scales.x.grid) {
            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.x.ticks) {
            options.scales.x.ticks.color = getStyle('--cui-body-color')
          }
        }

        if (options.scales?.y) {
          if (options.scales.y.grid) {
            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.y.ticks) {
            options.scales.y.ticks.color = getStyle('--cui-body-color')
          }
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'bar'> = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'], // 9 labels
    datasets: [
      {
        label: 'GitHub Commits',
        backgroundColor: '#f87979',
        borderColor: '#f87979',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
      },
    ],
  }

  const options: ChartOptions<'bar'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      x: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        type: 'category',
      },
      y: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        beginAtZero: true,
      },
    },
  }

  return <CChart type="bar" data={data} options={options} ref={chartRef} />
}
```

### Radar Chart

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartRadarExample = () => {
  const chartRef = useRef<Chart<'radar'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales?.r) {
          if (options.scales.r.grid) {
            options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.r.ticks) {
            options.scales.r.ticks.color = getStyle('--cui-body-color')
          }
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'radar'> = {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(220, 220, 220, 0.2)',
        borderColor: 'rgba(220, 220, 220, 1)',
        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
        data: [65, 59, 90, 81, 56, 55, 40],
        fill: true,
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(151, 187, 205, 1)',
        data: [28, 48, 40, 19, 96, 27, 100],
        fill: true,
      },
    ],
  }

  const options: ChartOptions<'radar'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      r: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        angleLines: {
          color: getStyle('--cui-border-color-translucent'),
        },
        pointLabels: {
          color: getStyle('--cui-body-color'),
        },
        beginAtZero: true,
      },
    },
  }

  return <CChart type="radar" data={data} options={options} ref={chartRef} />
}
```

### Doughnut and Pie Charts

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartDoughnutAndPieExample = () => {
  const chartRef = useRef<Chart<'doughnut'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'doughnut'> = {
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10],
      },
    ],
  }

  const options: ChartOptions<'doughnut'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
  }

  return <CChart type="doughnut" data={data} options={options} ref={chartRef} />
}
```

### Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartPolarAreaExample = () => {
  const chartRef = useRef<Chart<'polarArea'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales?.r?.grid) {
          options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'polarArea'> = {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
    datasets: [
      {
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
      },
    ],
  }

  const options: ChartOptions<'polarArea'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      r: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        angleLines: {
          color: getStyle('--cui-border-color-translucent'),
        },
        pointLabels: {
          color: getStyle('--cui-body-color'),
        },
        beginAtZero: true,
      },
    },
  }

  return <CChart type="polarArea" data={data} options={options} ref={chartRef} />
}
```

### Bubble Chart

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartBubbleExample = () => {
  const chartRef = useRef<Chart<'bubble'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance

        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales?.x) {
          if (options.scales.x.grid) {
            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.x.ticks) {
            options.scales.x.ticks.color = getStyle('--cui-body-color')
          }
        }

        if (options.scales?.y) {
          if (options.scales.y.grid) {
            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
          }
          if (options.scales.y.ticks) {
            options.scales.y.ticks.color = getStyle('--cui-body-color')
          }
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'bubble'> = {
    datasets: [
      {
        label: 'First Dataset',
        data: [
          { x: 20, y: 30, r: 15 },
          { x: 40, y: 10, r: 10 },
        ],
        backgroundColor: 'rgb(255, 99, 132)',
      },
    ],
  }

  const options: ChartOptions<'bubble'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      x: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        type: 'linear',
        position: 'bottom',
      },
      y: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        beginAtZero: true,
      },
    },
  }

  return <CChart type="bubble" data={data} options={options} ref={chartRef} />
}
```

### Scatter Chart

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)

```html
import React, { useEffect, useRef } from 'react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { Chart } from 'chart.js'
import type { ChartData, ChartOptions } from 'chart.js'

export const ChartScatterExample = () => {
  const chartRef = useRef<Chart<'scatter'> | null>(null)

  useEffect(() => {
    const handleColorSchemeChange = () => {
      const chartInstance = chartRef.current
      if (chartInstance) {
        const { options } = chartInstance
        if (options.plugins?.legend?.labels) {
          options.plugins.legend.labels.color = getStyle('--cui-body-color')
        }

        if (options.scales) {
          const xAxis = options.scales.x
          const yAxis = options.scales.y

          if (xAxis?.grid && xAxis?.ticks) {
            xAxis.grid.color = getStyle('--cui-border-color-translucent')
            xAxis.ticks.color = getStyle('--cui-body-color')
          }

          if (yAxis?.grid && yAxis?.ticks) {
            yAxis.grid.color = getStyle('--cui-border-color-translucent')
            yAxis.ticks.color = getStyle('--cui-body-color')
          }
        }

        chartInstance.update()
      }
    }

    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)

    return () => {
      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
    }
  }, [])

  const data: ChartData<'line'> = {
    datasets: [
      {
        label: 'Scatter Dataset',
        data: [
          { x: -10, y: 0 },
          { x: 0, y: 10 },
          { x: 10, y: 5 },
          { x: 0.5, y: 5.5 },
        ],
        backgroundColor: 'rgb(255, 99, 132)',
      },
    ],
  }

  const options: ChartOptions<'scatter'> = {
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
      },
      y: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
  }

  return <CChart type="scatter" data={data} options={options} ref={chartRef} />
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CChart /&gt;](./api/#cchart)


---

# React Chip Component

> React Chip component for CoreUI lets you build compact, interactive labels, tags, filters, and selections with icons, avatars, remove buttons, and keyboard support.

## Overview

The CoreUI **React Chip component** lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, removal, keyboard navigation, and theme-aware styling.

Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection.

- Chips are statically sized and do not scale with the parent element by default.
- Chips can have icons, avatars, and remove buttons.
- Chips can be active or disabled.
- Chips automatically gain focus when they are `selectable` or `removable`.
- Chips support keyboard navigation and selection in their container.

See examples of all of this in action below.

## When to use chips

Use the React Chip component when you need:

- Multi-select filters in search or form interfaces
- Removable tags for selected items or applied filters
- Keyboard-navigable selection groups
- Compact status indicators with icon or avatar support

## Basic chips

Use `CChip` for standalone chips.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Basic chip</CChip>
      <CChip>Basic chip 2</CChip>
      <CChip>Basic chip 3</CChip>
      <CChip>Basic chip 4</CChip>
    </div>
  )
}
```

## Outline chips

Use `variant="outline"` to remove all background images and colors on any chip.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipOutlineExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip variant="outline">Outline chip</CChip>
      <CChip variant="outline">Outline chip 2</CChip>
      <CChip variant="outline">Outline chip 3</CChip>
      <CChip variant="outline">Outline chip 4</CChip>
    </div>
  )
}
```

## Chips with icons

Wrap `CIcon` in a `<span className="chip-icon">` to render a leading icon.

```html
import React from 'react'
import { CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilInfo, cilUser } from '@coreui/icons'

export const ChipIconExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilUser} />
        </span>
        Chip with icon 1
      </CChip>
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilInfo} />
        </span>
        Chip with icon 2
      </CChip>
    </div>
  )
}
```

## Chips with avatars

Use `.chip-img` for an image-like avatar or combine `CChip` with `CAvatar`.

```html
import React from 'react'
import { CAvatar, CChip } from '@coreui/react'

export const ChipAvatarExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar
      </CChip>
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar 2
      </CChip>
      <CChip>
        <CAvatar color="primary" textColor="white">
          L
        </CAvatar>
        Chip with avatar 3
      </CChip>
      <CChip>
        <CAvatar color="success" textColor="white">
          L
        </CAvatar>
        Chip with avatar 4
      </CChip>
    </div>
  )
}
```

## Variants

Apply color variants to your chips. Chips are subtle by default as this allows for a clear themed active state.

```html
import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip color={color} clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip color={color} active tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}
```

```html
import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipOutlineVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip color={color} variant="outline" clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip color={color} variant="outline" active tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}
```

### Active state

Add `active` to make chips use the solid appearance. This is useful for toggle-style chip selections.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipActiveStateExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Default</CChip>
      <CChip active>Active</CChip>
      <CChip color="primary">Primary</CChip>
      <CChip color="primary" active>
        Active
      </CChip>
      <CChip color="success">Success</CChip>
      <CChip color="success" active>
        Active
      </CChip>
    </div>
  )
}
```

## Sizes

Use `size="sm"` or `size="lg"` for different sizes.

```html
import React from 'react'
import { CAvatar, CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilUser } from '@coreui/icons'

export const ChipSizesExample = () => {
  return (
    <>
      <div className="d-flex flex-wrap gap-1 mb-3">
        <CChip size="sm">Small</CChip>
        <CChip size="sm">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon
        </CChip>
        <CChip size="sm">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Small with avatar
        </CChip>
        <CChip size="sm">
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Small with avatar 2
        </CChip>
        <CChip size="sm" removable>
          Small removable
        </CChip>
      </div>

      <div className="d-flex flex-wrap gap-1 mb-3">
        <CChip>Default</CChip>
        <CChip>
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Default with icon 1
        </CChip>
        <CChip>
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Default with avatar
        </CChip>
        <CChip>
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Default with avatar1
        </CChip>
        <CChip removable>Default removable</CChip>
      </div>

      <div className="d-flex flex-wrap gap-1">
        <CChip size="lg">Large</CChip>
        <CChip size="lg">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon 1
        </CChip>
        <CChip size="lg">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Large with avatar
        </CChip>
        <CChip size="lg">
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Large with avatar 2
        </CChip>
        <CChip size="lg" removable>
          Large removable
        </CChip>
      </div>
    </>
  )
}
```

## Interactive chips

Use `selectable`, `removable`, `selected`, and `disabled` to match the interactive chip examples from CoreUI.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipInteractiveExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip selectable>Selectable</CChip>
      <CChip removable>Removable</CChip>
      <CChip selectable selected>
        Selected
      </CChip>
      <CChip disabled>Disabled</CChip>
    </div>
  )
}
```

To group chips and coordinate their selection — including filter chips with a leading check icon — wrap them in a [`CChipSet`](https://coreui.io/react/docs/components/chip-set/).

## Remove button

If `removable` is enabled, the remove button is rendered automatically.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipDismissButtonExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip removable selectable>
        Chip 1
      </CChip>
      <CChip removable selectable>
        Chip 2
      </CChip>
      <CChip removable selectable disabled>
        Chip 3
      </CChip>
      <CChip removable selectable>
        Chip 4
      </CChip>
    </div>
  )
}
```

## Keyboard behavior

A standalone chip handles its own selection and removal from the keyboard when it is `selectable` and/or `removable`. Roving focus between chips (arrow keys, `Home`/`End`) is provided by the parent [`CChipSet`](https://coreui.io/react/docs/components/chip-set/) container.

### When a chip is focused

| Key | Action |
| --- | --- |
| `Enter` / `Space` | Toggle selection (only when `selectable` is enabled) |
| `Backspace` / `Delete` | Close chip when `removable` is enabled |

When chips are grouped in a [`CChipSet`](https://coreui.io/react/docs/components/chip-set/), the arrow keys, `Home`, and `End` move focus between chips, and focus moves to a neighboring chip after one is removed.

### Mouse interaction

| Action | Effect |
| --- | --- |
| Click chip | Toggle selection (only when `selectable` is enabled) |
| Click remove | Close chip (only when `removable` is enabled) |

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CChip /&gt;](./api/#cchip)


---

# React Chip Set Component

> React Chip Set component groups chips into an accessible, keyboard-navigable container with single or multiple selection.

## Overview

The CoreUI **React Chip Set component** groups multiple [chips](https://coreui.io/react/docs/components/chip/) into a single container that manages roving focus, keyboard navigation, and selection. While an individual chip handles its own state (selection, removal), the chip set is responsible for everything that spans the whole group:

- Arrow-key navigation between chips, with `Home`/`End` jumping to the edges.
- Moving focus to a neighboring chip after one is removed.
- Single or multiple selection through the `selectionMode` prop.
- A flexible, wrapping layout with a configurable gap.

The chip set forwards `selectable`, `filter`, `removable`, `disabled`, `removeIcon`, `selectedIcon`, and `ariaRemoveLabel` to every chip it manages, so you set them once on the set. Each `CChip` is identified by its `value` prop.

## Basic chip set

Pass a `chips` array to render the chips from data. Each item is a string or an object with a `value`, an optional `label`, and any `CChip` props (so per-chip overrides work).

```html
import React from 'react'
import { CChipSet } from '@coreui/react'

export const ChipSetExample = () => {
  return <CChipSet chips={['Apple', 'Banana', 'Cherry', 'Date']} />
}
```

You can also compose `CChip` children instead of passing `chips`:

```jsx
<CChipSet>
  <CChip value="apple">Apple</CChip>
  <CChip value="banana">Banana</CChip>
  <CChip value="cherry">Cherry</CChip>
  <CChip value="date">Date</CChip>
</CChipSet>
```

## Selectable chips

Set `selectable` to make every chip in the set selectable. With the default `selectionMode` of `multiple`, any number of chips can be active at once — useful for filters. Use `selected` / `defaultSelected` / `onSelect` to control the selection.

```html
import React from 'react'
import { CChipSet } from '@coreui/react'

export const ChipSetSelectableExample = () => {
  return (
    <CChipSet
      selectable
      chips={['Design', 'Development', 'Marketing', 'Sales']}
      defaultSelected={['Development', 'Sales']}
    />
  )
}
```

### Single selection

Use `selectionMode="single"` to allow only one selected chip at a time — selecting a chip deselects its siblings. This is useful for choice chips.

```html
import React from 'react'
import { CChipSet } from '@coreui/react'

export const ChipSetSingleExample = () => {
  return (
    <CChipSet
      selectable
      selectionMode="single"
      chips={['Small', 'Medium', 'Large']}
      defaultSelected={['Small']}
    />
  )
}
```

## Filter chips

Set `filter` to turn the chips into filter chips. A check icon is shown on each selected chip and removed when it is deselected. `filter` implies `selectable`, so you don't need to set both.

```html
import React from 'react'
import { CChipSet } from '@coreui/react'

export const ChipSetFilterExample = () => {
  return (
    <CChipSet
      filter
      chips={['Design', 'Development', 'Marketing', 'Sales']}
      defaultSelected={['Development', 'Sales']}
    />
  )
}
```

Customize the check with the `selectedIcon` prop, the same way you customize the remove icon.

## Removable chips

Set `removable` to add a remove button to every chip. When a chip is removed, focus moves to a neighboring chip.

With `defaultChips` the set keeps the list **uncontrolled** and removes chips for you (`onRemove` just notifies):

```html
import React from 'react'
import { CChipSet } from '@coreui/react'

export const ChipSetRemovableExample = () => {
  return (
    <CChipSet
      removable
      defaultChips={[
        { value: 'filter-one', label: 'Filter one' },
        { value: 'filter-two', label: 'Filter two' },
        { value: 'filter-three', label: 'Filter three', disabled: true },
      ]}
    />
  )
}
```

For a **controlled** list use `chips` and drop the chip from your data in `onRemove`:

```jsx
const [chips, setChips] = useState(['Apple', 'Banana', 'Cherry'])

return (
  <CChipSet
    removable
    chips={chips}
    onRemove={(value) => setChips((prev) => prev.filter((chip) => chip !== value))}
  />
)
```

## Keyboard behavior

When a chip inside a chip set is focused:

| Key | Action |
| --- | --- |
| `Enter` / `Space` | Toggle selection of the focused chip (when `selectable` is enabled) |
| `Backspace` / `Delete` | Remove the focused chip (when `removable` is enabled) |
| `ArrowLeft` | Move focus to the previous chip |
| `ArrowRight` | Move focus to the next chip |
| `Home` | Move focus to the first chip |
| `End` | Move focus to the last chip |

Disabled chips are skipped while navigating. In right-to-left layouts the arrow keys are mirrored — `ArrowLeft` moves to the next chip and `ArrowRight` to the previous one — while `Home` and `End` always jump to the first and last chip.

## Accessibility

- The chip set manages roving focus, so the arrow keys move focus between chips rather than relying on the browser's default tab order.
- Add a descriptive `aria-label` to the chip set when the group has a meaningful role (e.g., "Applied filters").
- Selection state is reflected on each chip via `aria-selected`; see the [Chip](https://coreui.io/react/docs/components/chip/) accessibility notes.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CChipSet /&gt;](./api/#cchipset)
- [&lt;CChip /&gt;](https://coreui.io/react/docs/components/chip/api/#cchip)


---

# React Close Button Component

> A generic close button component for dismissing content like modals and alerts.

## Example

Provide an option to dismiss or close a component with `<CCloseButton>`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonExample = () => {
  return <CCloseButton />
}
```

## Disabled state

Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDisabledExample = () => {
  return <CCloseButton disabled />
}
```

## Dark variant

Add `dark` boolean property to the `<CCloseButton>`, to invert the close button. This uses the filter property to invert the background-image without overriding its value.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDarkExample = () => {
  return (
    <>
      <CCloseButton dark />
      <CCloseButton dark disabled />
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCloseButton /&gt;](./api/#cclosebutton)


---

# React Collapse Component

> React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.

## How it works

The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.

## Example

You can use a link or a button component.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        href="#"
        onClick={(event) => {
          event.preventDefault()
          setVisible(!visible)
        }}
      >
        Link
      </CButton>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Button
      </CButton>
      <CCollapse visible={visible}>
        <CCard className="mt-3">
          <CCardBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
            sapiente ea proident.
          </CCardBody>
        </CCard>
      </CCollapse>
    </>
  )
}
```

## Horizontal

The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseHorizontalExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        className="mb-3"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </CButton>
      <div style={{ minHeight: '120px' }}>
        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
          <CCard style={{ width: '300px' }}>
            <CCardBody>
              This is some placeholder content for a horizontal collapse. It's hidden by default and
              shown when triggered.
            </CCardBody>
          </CCard>
        </CCollapse>
      </div>
    </>
  )
}
```

## Multiple targets

A `<CButton>` can show and hide multiple elements.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'

export const CollapseMultipleTargetsExample = () => {
  const [visibleA, setVisibleA] = useState(false)
  const [visibleB, setVisibleB] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
        Toggle first element
      </CButton>
      <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
        Toggle second element
      </CButton>
      <CButton
        color="primary"
        onClick={() => {
          setVisibleA(!visibleA)
          setVisibleB(!visibleB)
        }}
      >
        Toggle both elements
      </CButton>
      <CRow>
        <CCol xs={6}>
          <CCollapse visible={visibleA}>
            <CCard className="mt-3">
              <CCardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
        <CCol xs={6}>
          <CCollapse visible={visibleB}>
            <CCard className="mt-3">
              <CCardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
      </CRow>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCollapse /&gt;](./api/#ccollapse)


---

# React Dropdown Component

> React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.

## Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

## Examples

Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or different element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your possible requirements.

### Single button

Here's how you can put them to work with either `<button>` elements:

```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownSingleButtonExample = () => {
  return (
    <CDropdown>
      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

And with `<a>` elements:

```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownSingleButton2Example = () => {
  return (
    <CDropdown>
      <CDropdownToggle href="#" color="secondary">
        Dropdown button
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

The best part is you can do this with any button variant, too:

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSingleButton3Example = () => {
  return (
    <>
      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
        <CDropdown variant="btn-group" key={index}>
          <CDropdownToggle color={color}>{color}</CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      ))}
    </>
  )
}
```

### Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `split` for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSplitButtonExample = () => {
  return (
    <>
      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
        <CDropdown variant="btn-group" key={index}>
          <CButton color={color}>{color}</CButton>
          <CDropdownToggle color={color} split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      ))}
    </>
  )
}
```

## Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSizingLargeExample = () => {
  return (
    <>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="secondary" size="lg">
          Large button
        </CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group">
        <CButton color="secondary" size="lg">
          Large split button
        </CButton>
        <CDropdownToggle color="secondary" size="lg" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSizingSmallExample = () => {
  return (
    <>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="secondary" size="sm">
          Small button
        </CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group">
        <CButton color="secondary" size="sm">
          Small split button
        </CButton>
        <CDropdownToggle color="secondary" size="sm" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

## Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by set `dark` property. No changes are required to the dropdown items.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDarkExample = () => {
  return (
    <CDropdown dark>
      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

And putting it to use in a navbar:

```html
import React from 'react'
import {
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
} from '@coreui/react'

export const DropdownDark2Example = () => {
  return (
    <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
        <CCollapse className="navbar-collapse" visible={true}>
          <CNavbarNav>
            <CDropdown dark as="li" variant="nav-item">
              <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownItem href="#">Something else here</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Separated link</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          </CNavbarNav>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}
```

## Directions

> Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.

### Centered

Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownCenteredExample = () => {
  return (
    <CDropdown variant="btn-group" direction="center">
      <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Dropup

Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropupExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropup">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group" direction="dropup">
        <CButton color="secondary">Small split button</CButton>
        <CDropdownToggle color="secondary" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

### Dropup centered

Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropupCenteredExample = () => {
  return (
    <CDropdown variant="btn-group" direction="dropup-center">
      <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Dropend

Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropendExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropend">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group" direction="dropend">
        <CButton color="secondary">Small split button</CButton>
        <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend" />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

### Dropstart

Trigger dropdown menus at the left of the elements by adding `direction="dropstart"` to the `<CDropdown>` component.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropstartExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropstart">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CButtonGroup>
        <CDropdown variant="btn-group" direction="dropstart">
          <CDropdownToggle color="secondary" split splitLabel="Toggle Dropstart" />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CButton color="secondary">Small split button</CButton>
      </CButtonGroup>
    </>
  )
}
```

## Menu items

Historically dropdown menu contents _had_ to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownMenuItemsExample = () => {
  return (
    <CDropdown>
      <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem as="button">Action</CDropdownItem>
        <CDropdownItem as="button">Another action</CDropdownItem>
        <CDropdownItem as="button">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem as="button">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.

```html
import React from 'react'
import { CDropdownItem, CDropdownItemPlain, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItems2Example = () => {
  return (
    <CDropdownMenu>
      <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Active

Set boolean property `active` to **style item as active**.

In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

```html
import React from 'react'
import { CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItemsActiveExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Regular link</CDropdownItem>
      <CDropdownItem href="#" active>
        Active link
      </CDropdownItem>
      <CDropdownItem href="#">Another link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Disabled

Add `disabled` boolean property to items in the dropdown to **style them as disabled**.

In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

```html
import React from 'react'
import { CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItemsDisabledExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Regular link</CDropdownItem>
      <CDropdownItem href="#" disabled>
        Disabled link
      </CDropdownItem>
      <CDropdownItem href="#">Another link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

## Menu alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.

> Heads up! Dropdowns are positioned thanks to Popper.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownMenuAlignmentExample = () => {
  return (
    <CDropdown alignment="end">
      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Responsive alignment

If you use responsive alignment, dynamic positioning is disabled.

To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownResponsiveAlignmentExample = () => {
  return (
    <CDropdown alignment="end">
      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownResponsiveAlignment2Example = () => {
  return (
    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
      <CDropdownToggle color="secondary">
        Right-aligned but left aligned when large screen
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

## Menu content

### Headers

Add a header to label sections of actions in any dropdown menu.

In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

```html
import React from 'react'
import { CDropdownHeader, CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentHeadersExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownHeader>Dropdown header</CDropdownHeader>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Dividers

Separate groups of related menu items with a divider.

In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

```html
import React from 'react'
import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentDividersExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider />
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Text

Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.

```html
import React from 'react'
import { CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentTextExample = () => {
  return (
    <CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
      <p>Some example text that's free-flowing within the dropdown menu.</p>
      <p className="mb-0">And this is more example text.</p>
    </CDropdownMenu>
  )
}
```

### Forms

Put a form within a dropdown menu, or make it into a dropdown menu.

```html
import React from 'react'
import {
  CButton,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
} from '@coreui/react'

export const DropdownMenuContentFormsExample = () => {
  return (
    <CDropdownMenu>
      <CForm className="px-4 py-4">
        <div className="mb-3">
          <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
          <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
        </div>
        <div className="mb-3">
          <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
          <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
        </div>
        <div className="mb-3">
          <CFormCheck id="dropdownCheck" label="Remember me" />
        </div>
        <CButton color="primary" type="submit">
          Sign in
        </CButton>
      </CForm>
      <CDropdownDivider />
      <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
      <CDropdownItem href="#">Forgot password?</CDropdownItem>
    </CDropdownMenu>
  )
}
```

## Dropdown options

Use `offset` to displace the dropdown from its default position. The value is a string with two numbers separated by a comma, e.g. `offset={[10, 20]}`. Use `portal` property to render dropdowns in `body` instead of the parent element. This helps to avoid any overflow or z-index issues.

```html
import React from 'react'
import { CButton, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownOptionsExample = () => {
  return (
    <div className="d-flex gap-1">
      <CDropdown offset={[10, 20]}>
        <CDropdownToggle color="secondary">Offset</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CDropdown portal>
        <CDropdownToggle color="secondary" aria-controls="dropdownMenuInPortal">
          Portal
        </CDropdownToggle>
        <CDropdownMenu id="dropdownMenuInPortal">
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CDropdown reference="parent">
        <CButton color="secondary">Reference</CButton>
        <CDropdownToggle color="secondary" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </div>
  )
}
```

### Auto close behavior

By default, dropdowns are closed when clicking outside of the dropdown menu or the toggle button. You can change this behavior with the `autoClose` property. Set `autoClose` to: 

- `true` - Close on clicks inside or outside of the React.js dropdown menu.
- `false` - Disable auto-close; close manually by setting the `visible={false}` (also not closed by `Escape`).
- `'inside'` - Close only when clicking inside the React.js dropdown menu.
- `'outside'` - Close only when clicking outside the React.js dropdown menu.

```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownOptionsAutoCloseBehaviorExample = () => {
  return (
    <div className="d-flex gap-1">
      <CDropdown>
        <CDropdownToggle color="secondary">Default dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CDropdown autoClose="inside">
        <CDropdownToggle color="secondary">Clickable inside</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CDropdown autoClose="outside">
        <CDropdownToggle color="secondary">Clickable outside</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CDropdown autoClose={false}>
        <CDropdownToggle color="secondary">Manual close</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </div>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CDropdown /&gt;](./api/#cdropdown)
- [&lt;CDropdownDivider /&gt;](./api/#cdropdowndivider)
- [&lt;CDropdownHeader /&gt;](./api/#cdropdownheader)
- [&lt;CDropdownItem /&gt;](./api/#cdropdownitem)
- [&lt;CDropdownItemPlain /&gt;](./api/#cdropdownitemplain)
- [&lt;CDropdownMenu /&gt;](./api/#cdropdownmenu)
- [&lt;CDropdownToggle /&gt;](./api/#cdropdowntoggle)


---

# React Focus Trap Component

> React Focus Trap component ensures keyboard navigation stays within a designated container element. Essential for creating accessible modal dialogs, dropdown menus, and overlay components that comply with WCAG 2.1 accessibility standards.

## Overview

The React Focus Trap component is an accessibility utility that constrains keyboard focus within a specific container element. When active, it prevents Tab and Shift+Tab navigation from leaving the trapped area, ensuring users stay within the intended interactive region. This is essential for modal dialogs, dropdown menus, and other overlay components that need to maintain focus for screen reader users and keyboard navigation compliance.

Focus traps are a critical accessibility pattern required by WCAG 2.1 guidelines for modal dialogs and temporary overlay content. By containing focus within the relevant UI section, focus traps help create predictable and accessible user experiences.

## Key Features

- **WCAG 2.1 Compliant**: Meets accessibility standards for focus management
- **Lightweight**: No extra DOM wrappers - uses ref forwarding
- **Flexible**: Works with any single React element that forwards refs
- **Smart Focus**: Configurable first focus target and automatic focus restoration
- **Event Callbacks**: Activation and deactivation event handlers

## Basic Usage

The most basic implementation wraps a single element and activates the focus trap:

```html
import React, { useState } from 'react'
import { CButton, CFocusTrap } from '@coreui/react'

export const FocusTrapBasicExample = () => {
  const [trapActive, setTrapActive] = useState(false)

  return (
    <div>
      <CButton color="primary" onClick={() => setTrapActive(!trapActive)}>
        {trapActive ? 'Deactivate' : 'Activate'} Focus Trap
      </CButton>

      <div className="mt-3 p-3 border rounded">
        <CFocusTrap active={trapActive}>
          <div className="p-3 bg-light border rounded">
            <h5>Focus Trapped Area</h5>
            <p>Tab and Shift+Tab will cycle within this area when active.</p>
            <div className="d-flex gap-2">
              <input type="text" className="form-control" placeholder="First input" />
              <input type="text" className="form-control" placeholder="Second input" />
              <CButton color="secondary">Button</CButton>
            </div>
          </div>
        </CFocusTrap>
      </div>

      <div className="mt-3 p-3 border rounded">
        <h5>Outside Trapped Area</h5>
        <p>These elements are not accessible via Tab when focus trap is active.</p>
        <input type="text" className="form-control mb-2" placeholder="Outside input" />
        <CButton color="warning">Outside Button</CButton>
      </div>
    </div>
  )
}
```

## CoreUI Components with Built-in Focus Trapping

Most CoreUI overlay components already include React Focus Trap internally, so you don't need to add it manually:

- **CModal** - Includes built-in focus trapping for modal dialogs
- **COffcanvas** - Has focus trapping for slide-out panels  
- **CDropdown** - Can be enhanced with focus trapping for better accessibility

For these components, focus trapping is handled automatically with proper focus restoration, escape key support, and WCAG 2.1 compliance.

### Modal Dialog with CModal

CModal includes built-in focus trapping, so you don't need to add CFocusTrap manually:

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const FocusTrapModalExample = () => {
  const [modalVisible, setModalVisible] = useState(false)

  return (
    <div>
      <CButton color="primary" onClick={() => setModalVisible(true)}>
        Open Contact Form
      </CButton>

      <CModal visible={modalVisible} onClose={() => setModalVisible(false)}>
        <CModalHeader closeButton>
          <CModalTitle>Contact Form</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <div className="mb-3">
            <label htmlFor="email" className="form-label">
              Email
            </label>
            <input
              type="email"
              id="email"
              className="form-control"
              placeholder="Enter your email"
            />
          </div>
          <div className="mb-3">
            <label htmlFor="message" className="form-label">
              Message
            </label>
            <textarea
              id="message"
              className="form-control"
              rows={3}
              placeholder="Enter your message"
            />
          </div>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setModalVisible(false)}>
            Cancel
          </CButton>
          <CButton color="primary">Send Message</CButton>
        </CModalFooter>
      </CModal>
    </div>
  )
}
```

### Enhanced Dropdown Menu

You can enhance CDropdown with CFocusTrap for improved keyboard accessibility:

```html
import React, { useState } from 'react'
import {
  CDropdown,
  CDropdownToggle,
  CDropdownMenu,
  CDropdownItem,
  CDropdownDivider,
  CFocusTrap,
} from '@coreui/react'

export const FocusTrapDropdownExample = () => {
  const [activeTrap, setActiveTrap] = useState(false)

  return (
    <div>
      <CDropdown onShow={() => setActiveTrap(true)} onHide={() => setActiveTrap(false)}>
        <CDropdownToggle color="secondary">Settings Dropdown</CDropdownToggle>

        <CFocusTrap
          active={activeTrap}
          focusFirstElement={true}
          restoreFocus={true}
          onActivate={() => console.log('Dropdown focus trap activated')}
          onDeactivate={() => console.log('Dropdown focus trap deactivated')}
        >
          <CDropdownMenu>
            <CDropdownItem href="#">Profile Settings</CDropdownItem>
            <CDropdownItem href="#">Account Settings</CDropdownItem>
            <CDropdownItem href="#">Notification Settings</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Sign Out</CDropdownItem>
          </CDropdownMenu>
        </CFocusTrap>
      </CDropdown>
    </div>
  )
}
```

### Sidebar Navigation with COffcanvas

COffcanvas includes built-in focus trapping for slide-out navigation panels:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  CListGroup,
  CListGroupItem,
  COffcanvas,
  COffcanvasHeader,
  COffcanvasTitle,
  COffcanvasBody,
} from '@coreui/react'

export const FocusTrapSidebarExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <div>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Open Navigation Sidebar
      </CButton>

      <COffcanvas
        placement="start"
        visible={visible}
        onHide={() => setVisible(false)}
        backdrop={true}
        scroll={false}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Main Navigation</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          <CListGroup className="mb-3">
            <CListGroupItem as="button" onClick={() => alert('Dashboard clicked')}>
              📊 Dashboard
            </CListGroupItem>
            <CListGroupItem as="button" onClick={() => alert('Users clicked')}>
              👥 Users
            </CListGroupItem>
            <CListGroupItem as="button" onClick={() => alert('Projects clicked')}>
              📁 Projects
            </CListGroupItem>
            <CListGroupItem as="button" onClick={() => alert('Settings clicked')}>
              ⚙️ Settings
            </CListGroupItem>
            <CListGroupItem as="button" onClick={() => alert('Reports clicked')}>
              📈 Reports
            </CListGroupItem>
          </CListGroup>

          <div className="mt-4 pt-3 border-top">
            <CButton
              color="outline-secondary"
              size="sm"
              onClick={() => setVisible(false)}
              className="me-2"
            >
              Close Sidebar
            </CButton>
            <CButton color="primary" size="sm" onClick={() => alert('Profile clicked')}>
              View Profile
            </CButton>
          </div>
        </COffcanvasBody>
      </COffcanvas>
    </div>
  )
}
```

## Focus Control Options

### Focus First Element vs Container

The `focusFirstElement` prop controls the initial focus behavior:

- `focusFirstElement={true}`: Focuses the first tabbable element (good for menus, forms)
- `focusFirstElement={false}`: Focuses the container element (good for panels, scrollable regions)

```html
import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CFocusTrap } from '@coreui/react'

export const FocusTrapFocusControlExample = () => {
  const [firstElementTrap, setFirstElementTrap] = useState(false)
  const [containerTrap, setContainerTrap] = useState(false)

  return (
    <div>
      <div className="row g-3">
        <div className="col-md-6">
          <CCard>
            <CCardHeader>
              <strong>focusFirstElement={true}</strong>
              <small className="text-muted ms-2">Good for forms and menus</small>
            </CCardHeader>
            <CCardBody>
              <CButton
                color="primary"
                size="sm"
                onClick={() => setFirstElementTrap(!firstElementTrap)}
                className="mb-3"
              >
                {firstElementTrap ? 'Deactivate' : 'Activate'} Trap
              </CButton>

              <CFocusTrap active={firstElementTrap} focusFirstElement={true}>
                <div className="p-3 border rounded bg-light">
                  <p className="mb-2">
                    <strong>First element receives focus</strong>
                  </p>
                  <input
                    type="text"
                    className="form-control mb-2"
                    placeholder="This gets focus first"
                  />
                  <input type="text" className="form-control mb-2" placeholder="Second input" />
                  <CButton color="secondary" size="sm">
                    Submit
                  </CButton>
                </div>
              </CFocusTrap>
            </CCardBody>
          </CCard>
        </div>

        <div className="col-md-6">
          <CCard>
            <CCardHeader>
              <strong>focusFirstElement={false}</strong>
              <small className="text-muted ms-2">Good for containers and panels</small>
            </CCardHeader>
            <CCardBody>
              <CButton
                color="primary"
                size="sm"
                onClick={() => setContainerTrap(!containerTrap)}
                className="mb-3"
              >
                {containerTrap ? 'Deactivate' : 'Activate'} Trap
              </CButton>

              <CFocusTrap active={containerTrap} focusFirstElement={false}>
                <div
                  className="p-3 border rounded bg-light"
                  tabIndex={-1} // Make container focusable
                  style={{ outline: containerTrap ? '2px solid #0d6efd' : 'none' }}
                >
                  <p className="mb-2">
                    <strong>Container receives focus</strong>
                  </p>
                  <p className="small text-muted mb-2">
                    The container itself is focused, useful for scrollable regions
                  </p>
                  <input type="text" className="form-control mb-2" placeholder="First input" />
                  <input type="text" className="form-control mb-2" placeholder="Second input" />
                  <CButton color="secondary" size="sm">
                    Submit
                  </CButton>
                </div>
              </CFocusTrap>
            </CCardBody>
          </CCard>
        </div>
      </div>
    </div>
  )
}
```

### Focus Restoration

The `restoreFocus` prop controls whether focus returns to the previously focused element when the trap deactivates. Focus on a button, then activate the trap. When you deactivate it, notice where focus returns based on the `restoreFocus` setting:

```html
import React, { useState } from 'react'
import { CButton, CFocusTrap } from '@coreui/react'

export const FocusTrapRestoreFocusExample = () => {
  const [restoreTrap, setRestoreTrap] = useState(false)
  const [noRestoreTrap, setNoRestoreTrap] = useState(false)

  return (
    <div>
      <div className="row g-3">
        <div className="col-md-6">
          <div className="border rounded p-3">
            <h5>restoreFocus=&#123;true&#125;</h5>
            <p className="text-muted small mb-3">
              Focus returns to the button that opened the trap
            </p>

            <CButton color="primary" onClick={() => setRestoreTrap(!restoreTrap)} className="mb-3">
              {restoreTrap ? 'Close Trap' : 'Open Trap (Restore Focus)'}
            </CButton>

            {restoreTrap && (
              <CFocusTrap active={true} restoreFocus={true} focusFirstElement={true}>
                <div className="p-3 border rounded bg-light">
                  <h6>Temporary Dialog</h6>
                  <p className="mb-2">Focus will return to the button when closed.</p>
                  <input type="text" className="form-control mb-2" placeholder="Enter some text" />
                  <div className="d-flex gap-2">
                    <CButton color="success" size="sm" onClick={() => setRestoreTrap(false)}>
                      Save & Close
                    </CButton>
                    <CButton color="secondary" size="sm" onClick={() => setRestoreTrap(false)}>
                      Cancel
                    </CButton>
                  </div>
                </div>
              </CFocusTrap>
            )}
          </div>
        </div>

        <div className="col-md-6">
          <div className="border rounded p-3">
            <h5>restoreFocus=&#123;false&#125;</h5>
            <p className="text-muted small mb-3">
              Focus goes to document body (or unpredictable location)
            </p>

            <CButton
              color="warning"
              onClick={() => setNoRestoreTrap(!noRestoreTrap)}
              className="mb-3"
            >
              {noRestoreTrap ? 'Close Trap' : 'Open Trap (No Restore)'}
            </CButton>

            {noRestoreTrap && (
              <CFocusTrap active={true} restoreFocus={false} focusFirstElement={true}>
                <div className="p-3 border rounded bg-light">
                  <h6>Navigation Change</h6>
                  <p className="mb-2">Focus won't return when closed.</p>
                  <input
                    type="text"
                    className="form-control mb-2"
                    placeholder="Enter destination"
                  />
                  <div className="d-flex gap-2">
                    <CButton color="primary" size="sm" onClick={() => setNoRestoreTrap(false)}>
                      Navigate
                    </CButton>
                    <CButton color="secondary" size="sm" onClick={() => setNoRestoreTrap(false)}>
                      Cancel
                    </CButton>
                  </div>
                </div>
              </CFocusTrap>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
```

## Event Handling

Use the `onActivate` and `onDeactivate` callbacks to trigger additional behavior such as screen reader announcements, analytics events, updating application state, or managing other UI components:

```html
import React, { useState, useCallback } from 'react'
import { CAlert, CButton, CFocusTrap } from '@coreui/react'

export const FocusTrapEventsExample = () => {
  const [isActive, setIsActive] = useState(false)
  const [events, setEvents] = useState<string[]>([])

  const addEvent = useCallback((event: string) => {
    const timestamp = new Date().toLocaleTimeString()
    setEvents((prev) => [`${timestamp}: ${event}`, ...prev.slice(0, 4)])
  }, [])

  const handleActivate = useCallback(() => {
    addEvent('Focus trap activated')
    // You could also trigger screen reader announcements here
  }, [addEvent])

  const handleDeactivate = useCallback(() => {
    addEvent('Focus trap deactivated')
    // You could also trigger analytics events or cleanup here
  }, [addEvent])

  return (
    <div>
      <div className="mb-3">
        <CButton color="primary" onClick={() => setIsActive(!isActive)}>
          {isActive ? 'Deactivate' : 'Activate'} Focus Trap
        </CButton>
      </div>

      <div className="row g-3">
        <div className="col-md-8">
          <CFocusTrap
            active={isActive}
            onActivate={handleActivate}
            onDeactivate={handleDeactivate}
            focusFirstElement={true}
          >
            <div className={`p-3 border rounded ${isActive ? 'bg-light border-primary' : ''}`}>
              <h5>Interactive Content</h5>
              <p className="mb-3">
                This area demonstrates event callbacks when the focus trap activates/deactivates.
              </p>

              <div className="mb-3">
                <label htmlFor="username" className="form-label">
                  Username
                </label>
                <input
                  type="text"
                  id="username"
                  className="form-control"
                  placeholder="Enter username"
                />
              </div>

              <div className="mb-3">
                <label htmlFor="email" className="form-label">
                  Email
                </label>
                <input type="email" id="email" className="form-control" placeholder="Enter email" />
              </div>

              <div className="d-flex gap-2">
                <CButton color="success">Submit</CButton>
                <CButton color="secondary" onClick={() => setIsActive(false)}>
                  Close
                </CButton>
              </div>
            </div>
          </CFocusTrap>
        </div>

        <div className="col-md-4">
          <div className="border rounded p-3">
            <h6>Event Log</h6>
            {events.length === 0 ? (
              <p className="text-muted small">No events yet</p>
            ) : (
              <div>
                {events.map((event, index) => (
                  <CAlert key={index} color="info" className="small py-2 mb-1">
                    {event}
                  </CAlert>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
```

## Conditional Focus Trapping

Focus traps can be conditionally activated based on application state:

```html
import React, { useState } from 'react'
import { CButton, CFocusTrap, CFormCheck } from '@coreui/react'

export const FocusTrapConditionalExample = () => {
  const [mode, setMode] = useState<'view' | 'edit'>('view')
  const [enableTrap, setEnableTrap] = useState(true)

  return (
    <div>
      <div className="mb-3 d-flex gap-3 align-items-center">
        <CButton
          color={mode === 'edit' ? 'success' : 'primary'}
          onClick={() => setMode(mode === 'edit' ? 'view' : 'edit')}
        >
          {mode === 'edit' ? 'Save Changes' : 'Edit Content'}
        </CButton>

        <CFormCheck
          id="trapToggle"
          checked={enableTrap}
          onChange={(e) => setEnableTrap(e.target.checked)}
          label="Enable focus trap in edit mode"
        />
      </div>

      <div className="row g-3">
        <div className="col-md-8">
          <CFocusTrap active={mode === 'edit' && enableTrap}>
            <div
              className={`border rounded p-3 ${mode === 'edit' ? 'bg-warning bg-opacity-10 border-warning' : 'bg-light'}`}
            >
              <h5>Content Editor</h5>

              {mode === 'edit' ? (
                <div>
                  <p className="mb-3 text-muted">
                    Edit mode active - focus is {enableTrap ? 'trapped' : 'not trapped'} within this
                    container
                  </p>

                  <div className="mb-3">
                    <label htmlFor="title" className="form-label">
                      Title
                    </label>
                    <input
                      type="text"
                      id="title"
                      className="form-control"
                      defaultValue="Sample Title"
                    />
                  </div>

                  <div className="mb-3">
                    <label htmlFor="content" className="form-label">
                      Content
                    </label>
                    <textarea
                      id="content"
                      className="form-control"
                      rows={4}
                      defaultValue="This is some sample content that can be edited."
                    />
                  </div>

                  <div className="mb-3">
                    <CFormCheck id="published" label="Published" defaultChecked />
                  </div>

                  <div className="d-flex gap-2">
                    <CButton color="success" onClick={() => setMode('view')}>
                      Save Changes
                    </CButton>
                    <CButton color="secondary" onClick={() => setMode('view')}>
                      Cancel
                    </CButton>
                  </div>
                </div>
              ) : (
                <div>
                  <p className="mb-3 text-muted">View mode - content is read-only</p>

                  <h6>Sample Title</h6>
                  <p>This is some sample content that can be edited.</p>

                  <div className="d-flex align-items-center">
                    <span className="badge bg-success me-2">Published</span>
                    <CButton color="primary" size="sm" onClick={() => setMode('edit')}>
                      Edit
                    </CButton>
                  </div>
                </div>
              )}
            </div>
          </CFocusTrap>
        </div>

        <div className="col-md-4">
          <div className="border rounded p-3">
            <h6>Outside Content</h6>
            <p className="text-muted small mb-3">
              These elements show the focus trap behavior when editing.
            </p>

            <input
              type="text"
              className="form-control mb-2"
              placeholder="External input"
              disabled={mode === 'edit' && enableTrap}
            />

            <CButton color="outline-primary" size="sm" disabled={mode === 'edit' && enableTrap}>
              External Action
            </CButton>

            {mode === 'edit' && enableTrap && (
              <div className="mt-2">
                <small className="text-muted">
                  ⚠️ These elements are not accessible via Tab while focus is trapped
                </small>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
```

## Usage Guidelines

### When to Use Focus Traps

- **Modal Dialogs**: Always use focus traps for modal dialogs and overlays
- **Dropdown Menus**: Implement focus traps for keyboard-navigable dropdown menus
- **Slide-out Panels**: Use focus traps for temporary navigation panels or sidebars
- **Custom Overlays**: Any overlay content that should contain keyboard focus

### Accessibility Best Practices

1. **Always include focusable elements** within the trapped container
2. **Use `restoreFocus={true}`** for temporary overlays like modals and dropdowns
3. **Include proper ARIA attributes** on the container (`role="dialog"`, `aria-modal="true"`)
4. **Provide escape mechanisms** like Escape key handling or close buttons
5. **Test with keyboard navigation** to ensure proper focus flow

### Container Requirements

The child element must meet these requirements:

- **Single element**: Cannot be a fragment or multiple elements
- **Ref forwarding**: Must properly forward refs to a DOM element  
- **Focusable content**: Should contain elements that can receive focus

```jsx
// ✅ Good - Single element with proper ref forwarding
<CFocusTrap active={true}>
  <div tabIndex={-1}>Content with focusable elements</div>
</CFocusTrap>

// ❌ Bad - Multiple children
<CFocusTrap active={true}>
  <div>First</div>
  <div>Second</div>
</CFocusTrap>

// ❌ Bad - Fragment
<CFocusTrap active={true}>
  <>
    <div>Content</div>
  </>
</CFocusTrap>
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the React.js Focus Trap component.

- [&lt;CFocusTrap /&gt;](./api/#cfocustrap)


---

# React Footer Component

> React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.

## Example

```jsx preview demo
<CFooter>
  <div>
    <CLink href="https://coreui.io">CoreUI</CLink>
    <span>&copy; 2026 creativeLabs.</span>
  </div>
  <div>
    <span>Powered by</span>
    <CLink href="https://coreui.io">CoreUI</CLink>
  </div>
</CFooter>
```

## Customizing

### CSS variables

React footers use local CSS variables on `.footer` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-footer-min-height: #{$footer-min-height};
--cui-footer-padding-x: #{$footer-padding-x};
--cui-footer-padding-y: #{$footer-padding-y};
--cui-footer-color: #{$footer-color};
--cui-footer-bg: #{$footer-bg};
--cui-footer-border-color: #{$footer-border-color};
--cui-footer-border: #{$footer-border-width} solid var(--cui-footer-border-color);
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-footer-color': '#333',
  '--cui-footer-bg': '#f8f9fa',
}

return <CFooter style={customVars} />
```

### SASS variables

```scss
$footer-min-height:    3rem !default;
$footer-padding-y:     $spacer * .5 !default;
$footer-padding-x:     $spacer !default;
$footer-bg:            var(--cui-tertiary-bg) !default;
$footer-color:         var(--cui-body-color) !default;
$footer-border-width:  var(--cui-border-width) !default;
$footer-border-color:  var(--cui-border-color) !default;
```

## API

### CFooter

```jsx
import { CFooter } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `position` | `"fixed" \| "sticky" \| undefined` | - | Place footer in non-static positions. |


---

# React Header Component

> Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.

## Supported content

Headers come with built-in support for a handful of sub-components. Choose from the following as needed:

- `<CHeaderBrand>` for your company, product, or project name.
- `<CHeaderNav>` for a full-height and lightweight navigation (including support for dropdowns).
- `<CHeaderToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
- Flex and spacing utilities for any form controls and actions.
- `<CHeaderText>` for adding vertically centered strings of text.
- `<CCollapse className="header-collapse">` for grouping and hiding header contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed header that automatically collapses at the `lg` (large) breakpoint.

## Basic usage

```jsx
const [visible, setVisible] = useState(false)
return (
  <>
    <CHeader>
      <CContainer fluid>
        <CHeaderBrand href="#">Header</CHeaderBrand>
        <CHeaderToggler onClick={() => setVisible(!visible)} />
        <CCollapse className="header-collapse" visible={visible}>
          <CHeaderNav>
            <CNavItem>
              <CNavLink href="#" active>
                Home
              </CNavLink>
            </CNavItem>
            <CNavItem>
              <CNavLink href="#">Link</CNavLink>
            </CNavItem>
            <CDropdown variant="nav-item">
              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Something else here</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
            <CNavItem>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavItem>
          </CHeaderNav>
          <CForm className="d-flex">
            <CFormInput className="me-2" type="search" placeholder="Search" />
            <CButton type="submit" color="success" variant="outline">
              Search
            </CButton>
          </CForm>
        </CCollapse>
      </CContainer>
    </CHeader>
  </>
)
```

## Customizing

### CSS variables

React headers use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-header-padding-x: #{$header-padding-x};
--cui-header-padding-y: #{$header-padding-y};
--cui-header-bg: #{$header-bg};
--cui-header-color: #{$header-color};
--cui-header-border-color: #{$header-border-color};
--cui-header-border: #{$header-border-width} solid var(--cui-header-border-color);
--cui-header-hover-color: #{$header-hover-color};
--cui-header-disabled-color: #{$header-disabled-color};
--cui-header-active-color: #{$header-active-color};
--cui-header-transition: #{$header-transition};
--cui-header-brand-padding-y: #{$header-brand-padding-y};
--cui-header-brand-color: #{$header-brand-color};
--cui-header-brand-hover-color: #{$header-brand-hover-color};
--cui-header-toggler-padding-x: #{$header-toggler-padding-x};
--cui-header-toggler-padding-y: #{$header-toggler-padding-y};
--cui-header-toggler-bg: #{$header-toggler-bg};
--cui-header-toggler-color: #{$header-toggler-color};
--cui-header-toggler-border-radius: #{$header-toggler-border-radius};
--cui-header-toggler-hover-color: #{$header-toggler-hover-color};
--cui-header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)};
--cui-header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)};
--cui-header-nav-link-padding-x: #{$header-nav-link-padding-x};
--cui-header-nav-link-padding-y: #{$header-nav-link-padding-y};
--cui-header-divider-border-color: #{$header-divider-border-color};
--cui-header-divider-border: #{$header-divider-border-width} solid var(--cui-header-divider-border-color);
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-header-color': '#333',
  '--cui-header-bg': '#f8f9fa',
}

return <CHeader style={customVars} />
```

### SASS variables

```scss
$header-padding-y:              $spacer * .5 !default;
$header-padding-x:              $spacer * .5 !default;
$header-brand-font-size:        $font-size-lg !default;
$header-color:                  rgba(var(--cui-emphasis-color-rgb), .65) !default;
$header-bg:                     var(--cui-body-bg) !default;
$header-border-color:           var(--cui-border-color) !default;
$header-border-width:           var(--cui-border-width) !default;
$header-hover-color:            rgba(var(--cui-emphasis-color-rgb), .8) !default;
$header-active-color:           rgba(var(--cui-emphasis-color-rgb), 1) !default;
$header-disabled-color:         rgba(var(--cui-emphasis-color-rgb), .3) !default;
$header-transition:             box-shadow .15s ease-in-out !default;

// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
$nav-link-height:               $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$header-brand-height:           $header-brand-font-size * $line-height-base !default;
$header-brand-padding-y:        ($nav-link-height - $header-brand-height) * .5 !default;
$header-brand-margin-end:       1rem !default;
$header-brand-font-size:        $font-size-lg !default;
$header-brand-color:            $gray-900 !default;
$header-brand-hover-color:      shade-color($gray-900, 10%) !default;

$header-toggler-padding-y:      .25rem !default;
$header-toggler-padding-x:      .75rem !default;
$header-toggler-font-size:      $font-size-lg !default;
$header-toggler-color:          rgba(var(--cui-emphasis-color-rgb), .65) !default;
$header-toggler-bg:             transparent !default;
$header-toggler-border-radius:  $btn-border-radius !default;
$header-toggler-hover-color:    rgba(var(--cui-emphasis-color-rgb), 1) !default;

$header-toggler-icon-bg:        url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
$header-toggler-hover-icon-bg:  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;

$header-nav-link-padding-x:     .5rem !default;
$header-nav-link-padding-y:     .5rem !default;

$header-divider-border-width:   var(--cui-border-width) !default;
$header-divider-border-color:   var(--cui-border-color) !default;
```

## API

### CHeader

```jsx
import { CHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `container` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| "fluid" \| undefined` | - | Defines optional container wrapping children elements. |
| `position` | `"fixed" \| "sticky" \| undefined` | - | Place header in non-static positions. |

### CHeaderBrand

```jsx
import { CHeaderBrand } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "a") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `a` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

### CHeaderDivider

```jsx
import { CHeaderDivider } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

### CHeaderNav

```jsx
import { CHeaderNav } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

### CHeaderText

```jsx
import { CHeaderText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

### CHeaderToggler

```jsx
import { CHeaderToggler } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |


---

# React Icons Component

> React icons library is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.

## Installation

To start using CoreUI React Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:

### Npm

```bash
npm install @coreui/icons @coreui/icons-react 
```

### Yarn

```bash
yarn add @coreui/icons @coreui/icons-react 
```

## Usage

Import react icons using one of these two options:

### Single react icon

To use a single react icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.

```jsx
import { CIcon } from '@coreui/icons-react';
import { cilList, cilShieldAlt } from '@coreui/icons';

...
<CIcon icon={cilList} size="xl"/>
<CIcon icon={cilShieldAlt} size="xl"/>
...
```

### All react icons

To use all icons available in the CoreUI React Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop.

```jsx
import CIcon from '@coreui/icons-react';
import * as icon from '@coreui/icons';

...
render() {
  return (
    <CIcon icon={icon.cilList} size="xxl"/>
  )
}
...
```

### Color

The CoreUI React Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs.

#### Utility classes

With some [color utility classes](https://coreui.io/bootstrap/docs/utilities/colors/), you may use color to convey message.

```jsx preview
<CIcon icon={cilList} size="xl" />
<CIcon icon={cilList} className="text-primary" size="xl" />
<CIcon icon={cilList} className="text-secondary" size="xl" />
<CIcon icon={cilList} className="text-success" size="xl" />
<CIcon icon={cilList} className="text-danger" size="xl" />
<CIcon icon={cilList} className="text-warning" size="xl" />
<CIcon icon={cilList} className="text-info" size="xl" />
```

#### CSS Variables

CoreUI React Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.

```jsx preview
<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'red'}} />
<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'green'}} />
```

### Sizing

Set heights of react icons using size property like size="lg" and size="sm".

```jsx preview
<CIcon icon={cilList} size="sm" />
<CIcon icon={cilList} />
<CIcon icon={cilList} size="lg" />
<CIcon icon={cilList} size="xl" />
<CIcon icon={cilList} size="xxl" />
<CIcon icon={cilList} size="3xl" />
```

### Custom SVG Icons

The `<CIconSvg`> component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.

```jsx
import { CIconSvg } from '@coreui/icons-react';

...
<CIconSvg size="4xl">
  <svg
    viewBox="0 0 102 116"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
      <g fill="#3C4B64" fillRule="nonzero">
        <path
          d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
          id="Shape"
        />
        <path
          d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
          id="Path"
        />
      </g>
    </g>
  </svg>
</CIconSvg>
...
```

## Accessibility

It's crucial for react icons to be seen by as many people as possible because they have the power to communicate a variety of meaningful information.

People who are blind, have low vision, or have other visual impairments make up approximately 10% of the world's population, and more than 5% of people worldwide have hearing loss that makes them unable to function normally.

Therefore, it's crucial to make sure that the assistive equipment for people with disabilities, such as screen readers, either ignores or better understands the react icons you use online.

Icons are used in one of two ways on websites, apps, and other digital spaces.

#### Decorative Icons

It is not necessary to declare an icon to visitors when they are using your website or app if you are utilizing it to offer extra decoration or branding.

Additionally, if you use an icon to visually emphasize or add flair to content that is already present in your HTML, an assistive technology user does not need to see it again.

In certain circumstances, the details of the icon ought to be concealed from the screenreader so as not to obstruct the intended message.

#### Semantic Icons

You need to make sure that consumers understand the meaning an icon is intended to represent by giving them text-based alternatives.

This applies to both the content you're using icons to represent (such as the status of your shopping cart or the number of unread messages), as well react icons as interactive controls (such as buttons, form elements, toggles, etc.).

### CoreUI React Icons and Accessibility

Our React Icon component automatically takes care of accessibility concerns by adding appropriate elements.

#### Decorative icons

If your icons are only for decorative purposes, the CoreUI React Icon Component will ensure that assistive technology ignores the icon. In addition to referencing an icon as normal, the `aria-hidden=true` attribute has been introduced, so there is nothing else you need to do.

If your markup looks like this:

```jsx
<CButton>
  <CIcon icon={cilCloudDownload} />
</CButton>
```

By including the `aria-hidden` attribute, CoreUI React Icon Component will afterwards automatically hide it from screenreaders.

```html
<button class="btn btn-primary" type="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon" role="img" aria-hidden="true">
    <polygon fill="var(--ci-primary-color, currentColor)" points="272 434.744 272 209.176 240 209.176 240 434.744 188.118 382.862 165.49 405.489 256 496 346.51 405.489 323.882 382.862 272 434.744" className="ci-primary"></polygon><path fill="var(--ci-primary-color, currentColor)" d="M400,161.176c0-79.4-64.6-144-144-144s-144,64.6-144,144a96,96,0,0,0,0,192h80v-32H112a64,64,0,0,1,0-128h32v-32a112,112,0,0,1,224,0v32h32a64,64,0,0,1,0,128H320v32h80a96,96,0,0,0,0-192Z" className="ci-primary"></path>
  </svg>
</button>
```

#### Semantic icons

The description that you must set using the title property will be used by CoreUI React Icon Component to generate alternative text for the semantic icon.

Thus, if your markup appears as follows:

```jsx
<CButton>
  <CIcon icon={cilCloudDownload} title="Download file" />
</CButton>
```

CoreUI React Icon Component will make the necessary adjustments so that only screenreaders can "see" the supporting elements that convey the message.

```html
<button className="btn btn-primary" type="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="icon" role="img" aria-hidden="true">
    <polygon fill="var(--ci-primary-color, currentColor)" points="272 434.744 272 209.176 240 209.176 240 434.744 188.118 382.862 165.49 405.489 256 496 346.51 405.489 323.882 382.862 272 434.744" className="ci-primary"></polygon><path fill="var(--ci-primary-color, currentColor)" d="M400,161.176c0-79.4-64.6-144-144-144s-144,64.6-144,144a96,96,0,0,0,0,192h80v-32H112a64,64,0,0,1,0-128h32v-32a112,112,0,0,1,224,0v32h32a64,64,0,0,1,0,128H320v32h80a96,96,0,0,0,0-192Z" className="ci-primary"></path>
  </svg>
  <span className="visually-hidden">Download file</span>
</button>
```

## Available react icons

The CoreUI React Icons package includes a comprehensive library of more than 1500 icons, available in various formats such as SVG, PNG, and Webfonts. These popular icons are meticulously crafted symbols representing common actions and items. You can utilize them in your digital products, whether they are web or mobile applications, to enhance their visual appeal and user experience.

By leveraging the capabilities of the React Icons component from CoreUI, you can easily incorporate visually appealing icons into their React applications, allowing for more engaging and intuitive user interfaces.

React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation.

## Premium icons

If you find yourself in need of a greater selection of icons, we've got you covered with our [premium icon pack](https://coreui.io/icons/all/). This incredible package boasts an extensive collection of over 4,000 meticulously crafted icons, ensuring that you'll find the perfect representation for any concept or idea. Explore the vast range of options and unlock a world of visual possibilities. 

So if you need more icons our PRO package will be a great choice for you.

## API

### CIcon

```jsx
import { CIcon } from '@coreui/react'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `content` | `string \| string[] \| undefined` | - | Use `icon={...}` instead of |
| `customClassName` | `string \| string[] \| undefined` | - | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. |
| `height` | `number \| undefined` | - | The height attribute defines the vertical length of an icon. |
| `icon` | `string \| string[] \| undefined` | - | Name of the icon placed in React object or SVG content. |
| `name` | `string \| undefined` | - | Use `icon="..."` instead of |
| `size` | `"custom" \| "custom-size" \| "sm" \| "lg" \| "xl" \| "xxl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| undefined` | - | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. |
| `title` | `string \| undefined` | - | Title tag content. |
| `use` | `string \| undefined` | - | If defined component will be rendered using 'use' tag. |
| `viewBox` | `string \| undefined` | - | The viewBox attribute defines the position and dimension of an SVG viewport. |
| `width` | `number \| undefined` | - | The width attribute defines the horizontal length of an icon. |

### CIconSvg

```jsx
import { CIconSvg } from '@coreui/react'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `customClassName` | `string \| string[] \| undefined` | - | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. |
| `height` | `number \| undefined` | - | The height attribute defines the vertical length of an icon. |
| `size` | `"custom" \| "custom-size" \| "sm" \| "lg" \| "xl" \| "xxl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| undefined` | - | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. |
| `title` | `string \| undefined` | - | Title tag content. |
| `width` | `number \| undefined` | - | The width attribute defines the horizontal length of an icon. |


---

# React Image Component

> React image component with responsive behavior (so it's never become larger than their parent element) and special styles.

## Responsive images

Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageResponsiveExample = () => {
  return <CImage fluid src={'/assets/img/react.jpg'} />
}
```

## Image thumbnails

In addition to our [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageThumbnailExample = () => {
  return <CImage rounded thumbnail src={'/assets/img/react400.jpg'} width={200} height={200} />
}
```

## Aligning images

Align images with the `align` property.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligningExample = () => {
  return (
    <div className="clearfix">
      <CImage align="start" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
      <CImage align="end" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligning2Example = () => {
  return (
    <div className="clearfix">
      <CImage align="center" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligning3Example = () => {
  return (
    <div className="text-center">
      <CImage rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CImage /&gt;](./api/#cimage)


---

# React List Group Component

> React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website.

## Basic example

The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupExample = () => {
  return (
    <CListGroup>
      <CListGroupItem>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Active items

Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupActiveItemsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem active>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Disabled items

Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupDisabledItemsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem disabled>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Links and buttons

Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupLinksAndButtonsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#" active>
        Cras justo odio
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        Dapibus ac facilisis in
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        {' '}
        Morbi leo risus
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        Porta ac consectetur ac
      </CListGroupItem>
      <CListGroupItem as="a" href="#" disabled>
        Vestibulum at eros
      </CListGroupItem>
    </CListGroup>
  )
}
```

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupLinksAndButtons2Example = () => {
  return (
    <CListGroup>
      <CListGroupItem as="button" active>
        Cras justo odio
      </CListGroupItem>
      <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
      <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem as="button" disabled>
        Vestibulum at eros
      </CListGroupItem>
    </CListGroup>
  )
}
```

## Flush

Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupFlushExample = () => {
  return (
    <CListGroup flush>
      <CListGroupItem>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Horizontal

Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupHorizontalExample = () => {
  const breakpoints: Array<
    | 'horizontal'
    | 'horizontal-sm'
    | 'horizontal-md'
    | 'horizontal-lg'
    | 'horizontal-xl'
    | 'horizontal-xxl'
  > = [
    'horizontal',
    'horizontal-sm',
    'horizontal-md',
    'horizontal-lg',
    'horizontal-xl',
    'horizontal-xxl',
  ]
  return (
    <>
      {breakpoints.map((breakpoint, index) => (
        <CListGroup className="mb-2" layout={breakpoint} key={index}>
          <CListGroupItem>Cras justo odio</CListGroupItem>
          <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
          <CListGroupItem>Morbi leo risus</CListGroupItem>
        </CListGroup>
      ))}
    </>
  )
}
```

## Contextual classes

Use contextual classes to style list items with a stateful background and color.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupContextualClassesExample = () => {
  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
  return (
    <CListGroup>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      {colors.map((color, index) => (
        <CListGroupItem color={color} key={index}>
          A simple {color} list group item
        </CListGroupItem>
      ))}
    </CListGroup>
  )
}
```

Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupContextualClasses2Example = () => {
  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#">
        Dapibus ac facilisis in
      </CListGroupItem>
      {colors.map((color, index) => (
        <CListGroupItem as="a" href="#" color={color} key={index}>
          A simple {color} list group item
        </CListGroupItem>
      ))}
    </CListGroup>
  )
}
```

## With badges

Add badges to any list group item to show unread counts, activity, and more.

```html
import React from 'react'
import { CBadge, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupWithBadgesExample = () => {
  return (
    <CListGroup>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Cras justo odio
        <CBadge color="primary" shape="rounded-pill">
          14
        </CBadge>
      </CListGroupItem>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <CBadge color="primary" shape="rounded-pill">
          2
        </CBadge>
      </CListGroupItem>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Morbi leo risus
        <CBadge color="primary" shape="rounded-pill">
          1
        </CBadge>
      </CListGroupItem>
    </CListGroup>
  )
}
```

## Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/).

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCustomContentExample = () => {
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#" active>
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small>Donec id elit non mi porta.</small>
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small className="text-body-secondary">Donec id elit non mi porta.</small>
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small className="text-body-secondary">Donec id elit non mi porta.</small>
      </CListGroupItem>
    </CListGroup>
  )
}
```

## Checkboxes and radios

Place CoreUI's checkboxes and radios within list group items and customize as needed.

```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadiosExample = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck label="Cras justo odio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Morbi leo risus" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="orta ac consectetur ac" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Vestibulum at eros" />
      </CListGroupItem>
    </CListGroup>
  )
}
```

```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadios2Example = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="First React.js radio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="Second React.js radio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="Third React.js radio" />
      </CListGroupItem>
    </CListGroup>
  )
}
```

And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.

```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadios3Example = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck
          hitArea="full"
          label="Second checkbox"
          value=""
          id="secondCheckboxStretched"
          defaultChecked
        />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched" />
      </CListGroupItem>
    </CListGroup>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CListGroup /&gt;](./api/#clistgroup)
- [&lt;CListGroupItem /&gt;](./api/#clistgroupitem)


---

# React Loading Button Component

> React loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.

## Example

Create basic React Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.

```jsx preview
<CLoadingButton color="primary" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="ghost" timeout={2000}>Submit</CLoadingButton>
```

## Spinners

### Border (Default)

The default option. Use loading buttons with a border spinner to indicate loading status.

```jsx preview
<CLoadingButton color="info" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" variant="ghost" timeout={2000}>Submit</CLoadingButton>
```

### Grow

Switch to a grow spinner for React loading buttons by adding `spinnerType="grow"`.

```jsx preview
<CLoadingButton color="info" spinnerType="grow" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>Submit</CLoadingButton>
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CLoadingButton /&gt;](./api/#cloadingbutton)


---

# React Modal Component

> React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.

## Introduction to Modal Component

A modal component is a fundamental part of modern UI design, providing a focused dialog that appears above the main content to capture user attention. In React applications, modal components are used to display important information, collect user input through form elements, or prompt users to take specific actions. When a modal is active, it typically prevents interaction with the rest of the page, ensuring users complete or dismiss the modal dialog before returning to the main UI. This approach helps manage user focus and streamlines workflows, making modal dialogs an essential tool for improving user experience. Modal components can display a variety of elements, such as text, forms, or notifications, and their appearance and behavior can be customized through React props to fit the needs of your application.

## How to use React Modal Component?

### Static modal component example

Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

```jsx
<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</CModal>
```

You can also create a custom modal component in React, allowing you to pass props such as `visible` and `onClose` for greater flexibility and reusability.

### Live demo

Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. Integrating modal components is a common practice in modern web apps to improve user interaction and workflow.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalLiveDemoExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="LiveDemoExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Static backdrop

If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalStaticBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch static backdrop modal
      </CButton>
      <CModal
        backdrop="static"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="StaticBackdropExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          I will not close if you click outside me. Don't even try to press escape key.
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Scrolling long content

When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalScrollingLongContentExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="ScrollingLongContentExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalScrollingLongContent2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered scrollable modal
      </CButton>
      <CModal
        alignment="center"
        scrollable
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredScrollableExample2"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Vertically centered

Add `alignment="center` to `<CModal>` to vertically center the React modal.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalVerticallyCenteredExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered modal
      </CButton>
      <CModal
        alignment="center"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredExample"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalVerticallyCenteredScrollableExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered scrollable modal
      </CButton>
      <CModal
        alignment="center"
        scrollable
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredScrollableExample2"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Tooltips and popovers

`<CTooltips>` and `<CPopovers>` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.

```html
import React, { useState } from 'react'
import {
  CButton,
  CModal,
  CModalBody,
  CModalFooter,
  CModalHeader,
  CModalTitle,
  CLink,
  CPopover,
  CTooltip,
} from '@coreui/react'

export const ModalTooltipsAndPopoversExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        alignment="center"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="TooltipsAndPopoverExample"
      >
        <CModalHeader>
          <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <h5>Popover in a modal</h5>
          <p>
            This
            <CPopover title="Popover title" content="Popover body content is set in this property.">
              <CButton color="primary">button</CButton>
            </CPopover>{' '}
            triggers a popover on click.
          </p>
          <hr />
          <h5>Tooltips in a modal</h5>
          <p>
            <CTooltip content="Tooltip">
              <CLink>This link</CLink>
            </CTooltip>{' '}
            and
            <CTooltip content="Tooltip">
              <CLink>that link</CLink>
            </CTooltip>{' '}
            have tooltips on hover.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Toggle between modals

Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalToggleBetweenModalsExample = () => {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Open first modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="ToggleBetweenModalsExample1"
      >
        <CModalHeader>
          <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>Show a second modal and hide this one with the button below.</p>
        </CModalBody>
        <CModalFooter>
          <CButton
            color="primary"
            onClick={() => {
              setVisible(false)
              setVisible2(true)
            }}
          >
            Open second modal
          </CButton>
        </CModalFooter>
      </CModal>
      <CModal
        visible={visible2}
        onClick={() => {
          setVisible(true)
          setVisible2(false)
        }}
        aria-labelledby="ToggleBetweenModalsExample2"
      >
        <CModalHeader>
          <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>Hide this modal and show the first with the button below.</p>
        </CModalBody>
        <CModalFooter>
          <CButton
            color="primary"
            onClick={() => {
              setVisible(true)
              setVisible2(false)
            }}
          >
            Back to first
          </CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Change animation

The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.

If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.

### Remove animation

For modals that simply appear rather than fade into view, set `transition` to `false`.

```jsx
<CModal transition={false}>...</CModal>
```

### Accessibility

Be sure to add `aria-labelledby="..."`, referencing the modal title, to `` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it.

## Optional sizes

Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

| Size        | Property size | Modal max-width |
| ----------- | ------------- | --------------- |
| Small       | `'sm'`        | `300px`         |
| Default     | None          | `500px`         |
| Large       | `'lg'`        | `800px`         |
| Extra large | `'xl'`        | `1140px`        |

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalOptionalSizesExample = () => {
  const [visibleXL, setVisibleXL] = useState(false)
  const [visibleLg, setVisibleLg] = useState(false)
  const [visibleSm, setVisibleSm] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
        Extra large modal
      </CButton>
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
        Large modal
      </CButton>
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
        Small modal
      </CButton>
      <CModal
        size="xl"
        visible={visibleXL}
        onClose={() => setVisibleXL(false)}
        aria-labelledby="OptionalSizesExample1"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        size="lg"
        visible={visibleLg}
        onClose={() => setVisibleLg(false)}
        aria-labelledby="OptionalSizesExample2"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        size="sm"
        visible={visibleSm}
        onClose={() => setVisibleSm(false)}
        aria-labelledby="OptionalSizesExample3"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
    </>
  )
}
```

## Fullscreen Modal

Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscreen`.

| Fullscreen | Availability   |
| ---------- | -------------- |
| `true`     | Always         |
| `'sm'`     | Below `576px`  |
| `'md'`     | Below `768px`  |
| `'lg'`     | Below `992px`  |
| `'xl'`     | Below `1200px` |
| `'xxl'`    | Below `1400px` |

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalFullscreenExample = () => {
  const [visible, setVisible] = useState(false)
  const [visibleSm, setVisibleSm] = useState(false)
  const [visibleMd, setVisibleMd] = useState(false)
  const [visibleLg, setVisibleLg] = useState(false)
  const [visibleXL, setVisibleXL] = useState(false)
  const [visibleXXL, setVisibleXXL] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Full screen
      </CButton>
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
        Full screen below sm
      </CButton>
      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
        Full screen below md
      </CButton>
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
        Full screen below lg
      </CButton>
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
        Full screen below xl
      </CButton>
      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
        Full screen below xxl
      </CButton>
      <CModal
        fullscreen
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="FullscreenExample1"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="sm"
        visible={visibleSm}
        onClose={() => setVisibleSm(false)}
        aria-labelledby="FullscreenExample2"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="md"
        visible={visibleMd}
        onClose={() => setVisibleMd(false)}
        aria-labelledby="FullscreenExample3"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="lg"
        visible={visibleLg}
        onClose={() => setVisibleLg(false)}
        aria-labelledby="FullscreenExample4"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="xl"
        visible={visibleXL}
        onClose={() => setVisibleXL(false)}
        aria-labelledby="FullscreenExample5"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="xxl"
        visible={visibleXXL}
        onClose={() => setVisibleXXL(false)}
        aria-labelledby="FullscreenExample6"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CModal /&gt;](./api/#cmodal)
- [&lt;CModalBody /&gt;](./api/#cmodalbody)
- [&lt;CModalFooter /&gt;](./api/#cmodalfooter)
- [&lt;CModalHeader /&gt;](./api/#cmodalheader)
- [&lt;CModalTitle /&gt;](./api/#cmodaltitle)


---

# React Navbar Component

> Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.

## Supported content

`<CNavbar>` come with built-in support for a handful of sub-components. Choose from the following as needed:

- `<CNavbarBrand>` for your company, product, or project name.
- `<CNavbarNav>` for a full-height and lightweight navigation (including support for dropdowns).
- `<CNavbarToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
- Flex and spacing utilities for any form controls and actions.
- `<CNavbarText>` for adding vertically centered strings of text.
- `<CCollapse>` for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.

## Basic usage

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar expand="lg" className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler onClick={() => setVisible(!visible)} />
        <CCollapse className="navbar-collapse" visible={visible}>
          <CNavbarNav className="me-auto">
            <CNavItem>
              <CNavLink href="#" active>
                Home
              </CNavLink>
            </CNavItem>
            <CNavItem>
              <CNavLink href="#">Link</CNavLink>
            </CNavItem>
            <CDropdown variant="nav-item" popper={false}>
              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Something else here</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
            <CNavItem>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavItem>
          </CNavbarNav>
          <CForm className="d-flex">
            <CFormInput type="search" className="me-2" placeholder="Search" />
            <CButton type="submit" color="success" variant="outline">
              Search
            </CButton>
          </CForm>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}
```

### Brand

The `<CNavbarBrand>` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrandExample = () => {
  return (
    <>
      {/* As a link */}
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>

      {/* As a heading */}
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

Adding images to the `<CNavbarBrand>` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrand2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">
          <img src={'/assets/brand/coreui-signet.svg'} alt="CoreUI Signet" width="22" height="24" />
        </CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrand3Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">
          <img src={'/assets/brand/coreui-signet.svg'} alt="CoreUI Signet" width="22" height="24" />{' '}
          CoreUI
        </CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

### Nav

`<CNavbar>` navigation is based on `<CNavbarNav>`. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.

```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarNavExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Features</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Pricing</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavLink,
} from '@coreui/react'

export const NavbarNav2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav as="nav">
              <CNavLink href="#" active>
                Home
              </CNavLink>
              <CNavLink href="#">Features</CNavLink>
              <CNavLink href="#">Pricing</CNavLink>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

You can also use dropdowns in your navbar. Please note that `<CDropdown>` component requires `variant="nav-item"`.

```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarNav3Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Features</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Pricing</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle>Dropdown link</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### Forms

Place various form controls and components within a navbar:

```html
import React from 'react'
import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react'

export const NavbarFormsExample = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CForm className="d-flex">
          <CFormInput type="search" className="me-2" placeholder="Search" />
          <CButton type="submit" color="success" variant="outline">
            Search
          </CButton>
        </CForm>
      </CContainer>
    </CNavbar>
  )
}
```

Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/) as needed to adjust this behavior.

```html
import React from 'react'
import { CButton, CContainer, CForm, CFormInput, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarForms2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CForm className="d-flex">
          <CFormInput type="search" className="me-2" placeholder="Search" />
          <CButton type="submit" color="success" variant="outline">
            Search
          </CButton>
        </CForm>
      </CContainer>
    </CNavbar>
  )
}
```

Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<CForm>` element as the container and save some HTML.

```html
import React from 'react'
import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react'

export const NavbarForms3Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CForm className="container-fluid">
        <CInputGroup>
          <CInputGroupText id="basic-addon1">@</CInputGroupText>
          <CFormInput
            placeholder="Username"
            aria-label="Username"
            aria-describedby="basic-addon1"
          />
        </CInputGroup>
      </CForm>
    </CNavbar>
  )
}
```

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

```html
import React from 'react'
import { CButton, CForm, CNavbar } from '@coreui/react'

export const NavbarForms4Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CForm className="container-fluid justify-content-start">
        <CButton type="button" color="success" variant="outline" className="me-2">
          Main button
        </CButton>
        <CButton type="button" color="secondary" variant="outline" size="sm">
          Smaller button
        </CButton>
      </CForm>
    </CNavbar>
  )
}
```

### Text

Navbars may contain bits of text with the help of `<CNavbarText>`. This class adjusts vertical alignment and horizontal spacing for strings of text.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarText } from '@coreui/react'

export const NavbarText = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarText>Navbar text with an inline element</CNavbarText>
      </CContainer>
    </CNavbar>
  )
}
```

## Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarColorSchemesExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="light" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
      <br />
      <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="light" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
      <br />
      <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="primary" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

## Containers

Although it's not required, you can wrap a `<CNavbar>` in a `<CContainer>` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `<CNavbar>` to only center the contents of a [fixed or static top navbar](#placement).

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarContainersExample = () => {
  return (
    <CContainer>
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>
    </CContainer>
  )
}
```

Use any of the responsive containers to change how wide the content in your navbar is presented.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarContainers2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer md>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

## Placement

Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.

Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementExample = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Default</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementFixedTopExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="fixed-top">
      <CContainer fluid>
        <CNavbarBrand href="#">Fixed top</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementFixedBottomExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="fixed-bottom">
      <CContainer fluid>
        <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementStickyTopExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="sticky-top">
      <CContainer fluid>
        <CNavbarBrand href="#">Sticky top</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

## Responsive behaviors

Navbars can use `<CNavbarToggler>`, `<CCollapse>`, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the `expand` boolean property on the `<CNavbar>`. For navbars that always collapse, don't add any property.

### Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a `<CNavbarBrand>`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no `<CNavbarBrand>` shown at the smallest breakpoint:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveTogglerExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

With a brand name shown on the left and toggler on the right:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveToggler2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

With a toggler on the left and brand name on the right:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveToggler3Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### External content

Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.

```html
import React, { useState } from 'react'
import { CCollapse, CContainer, CNavbar, CNavbarToggler } from '@coreui/react'

export const NavbarResponsiveExternalContentExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
        <div className="bg-dark p-4">
          <h5 className="text-body-emphasis h4">Collapsed content</h5>
          <span className="text-body-secondary">Toggleable via the navbar brand.</span>
        </div>
      </CCollapse>
      <CNavbar colorScheme="dark" className="bg-dark">
        <CContainer fluid>
          <CNavbarToggler
            aria-controls="navbarToggleExternalContent"
            aria-label="Toggle navigation"
            onClick={() => setVisible(!visible)}
          />
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  CContainer,
  CDropdown,
  CDropdownItem,
  CDropdownDivider,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const NavbarResponsiveOffcanvasExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
        <CNavbarToggler
          aria-controls="offcanvasNavbar"
          aria-label="Toggle navigation"
          onClick={() => setVisible(!visible)}
        />
        <COffcanvas
          id="offcanvasNavbar"
          placement="end"
          portal={false}
          visible={visible}
          onHide={() => setVisible(false)}
        >
          <COffcanvasHeader>
            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
          </COffcanvasHeader>
          <COffcanvasBody>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </COffcanvasBody>
        </COffcanvas>
      </CContainer>
    </CNavbar>
  )
}
```

To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  CContainer,
  CDropdown,
  CDropdownItem,
  CDropdownDivider,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const NavbarResponsiveOffcanvas2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar className="bg-body-tertiary" expand="xxl">
      <CContainer fluid>
        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
        <CNavbarToggler
          aria-controls="offcanvasNavbar2"
          aria-label="Toggle navigation"
          onClick={() => setVisible(!visible)}
        />
        <COffcanvas
          id="offcanvasNavbar2"
          placement="end"
          portal={false}
          visible={visible}
          onHide={() => setVisible(false)}
        >
          <COffcanvasHeader>
            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
          </COffcanvasHeader>
          <COffcanvasBody>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </COffcanvasBody>
        </COffcanvas>
      </CContainer>
    </CNavbar>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CNavbar /&gt;](./api/#cnavbar)
- [&lt;CNavbarBrand /&gt;](./api/#cnavbarbrand)
- [&lt;CNavbarNav /&gt;](./api/#cnavbarnav)
- [&lt;CNavbarText /&gt;](./api/#cnavbartext)
- [&lt;CNavbarToggler /&gt;](./api/#cnavbartoggler)


---

# React Navs & Tabs Components

> Documentation and examples for how to use CoreUI's included React navigation components.

## Base nav

Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.

The base `<CNav>` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavExample = () => {
  return (
    <CNav>
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, `<ol>` if the order of your items is important, or roll your own with a `<nav>` element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

```html
import React from 'react'
import { CNav, CNavLink } from '@coreui/react'

export const Nav2Example = () => {
  return (
    <CNav as="nav">
      <CNavLink href="#" active>
        Active
      </CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#" disabled>
        Disabled
      </CNavLink>
    </CNav>
  )
}
```

## Available styles

Change the style of `<CNav>`'s component with modifiers and utilities. Mix and match as needed, or build your own.

### Horizontal alignment

Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/bootstrap/docs/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.

Centered with `.justify-content-center`:

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavHorizontalAlignmentExample = () => {
  return (
    <CNav className="justify-content-center">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

Right-aligned with `.justify-content-end`:

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavHorizontalAlignment2Example = () => {
  return (
    <CNav className="justify-content-end">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Vertical

Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavVerticalExample = () => {
  return (
    <CNav className="flex-column">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Tabs

Takes the basic nav from above and adds the `variant="tabs"` class to generate a tabbed interface

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavTabsExample = () => {
  return (
    <CNav variant="tabs">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Pills

Take that same code, but use `variant="pills"` instead:

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavPillsExample = () => {
  return (
    <CNav variant="pills">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Underline

Take that same code, but use `variant="underline"` instead:

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavUnderlineExample = () => {
  return (
    <CNav variant="underline">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Underline border

Take that same code, but use `variant="underline-border"` instead:

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavUnderlineBorderExample = () => {
  return (
    <CNav variant="underline-border">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Enclosed

Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavEnclosedExample = () => {
  return (
    <CNav variant="enclosed">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Enclosed pills 

Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavEnclosedPillsExample = () => {
  return (
    <CNav variant="enclosed-pills">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Fill and justify

Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavFillAndJustifyExample = () => {
  return (
    <CNav variant="pills" layout="fill">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavFillAndJustify2Example = () => {
  return (
    <CNav variant="pills" layout="justified">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

## Working with flex utilities

If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

```html
import React from 'react'
import { CNav, CNavLink } from '@coreui/react'

export const NavWorkingWithFlexUtilitiesExample = () => {
  return (
    <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
      <CNavLink href="#" active>
        Active
      </CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#" disabled>
        Disabled
      </CNavLink>
    </CNav>
  )
}
```

## Regarding accessibility

If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.

Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.

## Using dropdowns

Add dropdown menus with a little extra HTML.

### Tabs with dropdowns

```html
import React from 'react'
import {
  CDropdown,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavTabsWithDropdownExample = () => {
  return (
    <CNav>
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CDropdown variant="nav-item">
        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Pills with dropdowns

```html
import React from 'react'
import {
  CDropdown,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavPillsWithDropdownExample = () => {
  return (
    <CNav variant="pills">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CDropdown variant="nav-item">
        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

## Tab panes

Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

```html
import React, { useState } from 'react'
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'

export const NavTabPanesExample = () => {
  const [activeKey, setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="tabs" role="tablist">
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
            Profile
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
            Contact
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu
          stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles
          vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
          banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee
          squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim
          craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s
          organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
          pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
          mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer
          blog stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}
```

The tabs also works with pills.

```html
import React, { useState } from 'react'
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'

export const NavTabPanes2Example = () => {
  const [activeKey, setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="pills" role="tablist">
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
            Profile
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
            Contact
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu
          stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles
          vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
          banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee
          squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim
          craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s
          organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
          pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
          mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer
          blog stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CNav /&gt;](./api/#cnav)
- [&lt;CNavItem /&gt;](./api/#cnavitem)
- [&lt;CNavLink /&gt;](./api/#cnavlink)
- [&lt;CTabContent /&gt;](./api/#ctabcontent)
- [&lt;CTabPane /&gt;](./api/#ctabpane)


---

# React Offcanvas Component

> React alert component allows build hidden sidebars into your project for navigation, shopping carts.

## Examples

### Offcanvas components

Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.

```html
import React from 'react'
import {
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasExample = () => {
  return (
    <COffcanvas backdrop={false} placement="start" scroll visible={true}>
      <COffcanvasHeader>
        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
        <CCloseButton className="text-reset" />
      </COffcanvasHeader>
      <COffcanvasBody>
        Content for the offcanvas goes here. You can place just about any React component or custom
        elements here.
      </COffcanvasBody>
    </COffcanvas>
  )
}
```

### Live demo

Use the buttons below to show and hide an offcanvas component.

- `visible={false}` hides content (default)
- `visible` or `visible={true}` shows content

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasLiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle offcanvas
      </CButton>
      <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Body scrolling

Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `<body>` scrolling and backdrop to toggle the backdrop.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasBodyScrollingExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Enable body scrolling
      </CButton>
      <COffcanvas
        backdrop={false}
        placement="start"
        scroll={true}
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Body scrolling and backdrop

You can also enable `<body>` scrolling with a visible backdrop.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasBodyScrollingAndBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Enable both scrolling &amp; backdrop
      </CButton>
      <COffcanvas
        placement="start"
        scroll={true}
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Static backdrop

If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasStaticBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle static offcanvas
      </CButton>
      <COffcanvas
        backdrop="static"
        placement="start"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Dark offcanvas

Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.

```html
import React from 'react'
import {
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasDarkExample = () => {
  return (
    <COffcanvas backdrop={false} dark placement="start" scroll visible={true}>
      <COffcanvasHeader>
        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
        <CCloseButton className="text-reset" />
      </COffcanvasHeader>
      <COffcanvasBody>
        Content for the offcanvas goes here. You can place just about any React component or custom
        elements here.
      </COffcanvasBody>
    </COffcanvas>
  )
}
```

## Responsive

Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
Above that breakpoint, the contents within will behave as usual.
For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

```html
import React, { useState } from 'react'
import {
  CAlert,
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasResponsiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>
        Toggle offcanvas
      </CButton>
      <CAlert className="d-none d-lg-block" color="info">
        Resize your browser to show the responsive offcanvas toggle.
      </CAlert>
      <COffcanvas
        backdrop="static"
        placement="start"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          This is content within an <code>.offcanvas-lg</code>.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Placement

There's no default placement for offcanvas components, so you must add one of the modifier classes below;

- `placement="start"` places offcanvas on the left of the viewport (shown above)
- `placement="end"` places offcanvas on the right of the viewport
- `placement="top"` places offcanvas on the top of the viewport
- `placement="bottom"` places offcanvas on the bottom of the viewport

Try the top, right, and bottom examples out below.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementTopExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle top offcanvas
      </CButton>
      <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementRightExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle right offcanvas
      </CButton>
      <COffcanvas placement="end" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementBottomExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle bottom offcanvas
      </CButton>
      <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Accessibility

Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;COffcanvas /&gt;](./api/#coffcanvas)
- [&lt;COffcanvasBody /&gt;](./api/#coffcanvasbody)
- [&lt;COffcanvasHeader /&gt;](./api/#coffcanvasheader)
- [&lt;COffcanvasTitle /&gt;](./api/#coffcanvastitle)


---

# React Pagination Component

> Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

## Overview

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationWorkingWithIconsExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}
```

## Disabled and active states

Pagination links are customizable for different circumstances. Use `disabled` for links that appear un-clickable and `.active` to indicate the current page.

While the `disabled` prop uses `pointer-events: none` to _try_ to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, we always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationDisabledAndActiveExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous" disabled>
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem active>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}
```

## Sizing

Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additional sizes.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingLargeExample = () => {
  return (
    <CPagination size="lg" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingSmallExample = () => {
  return (
    <CPagination size="sm" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## Alignment

Change the alignment of pagination components with `align` property.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignmentExample = () => {
  return (
    <CPagination align="center" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignment2Example = () => {
  return (
    <CPagination align="end" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CPagination /&gt;](./api/#coffcanvas)
- [&lt;CPaginationItem /&gt;](./api/#coffcanvasbody)


---

# React Placeholder Component

> Use loading react placeholders for your components or pages to indicate something may still be loading.

## About

Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

## Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'

export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}
```

## How it works

Create placeholders with the `<CPlaceholder>` component and a grid column propx (e.g., `xs={6}`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.

We apply additional styling to `CButton`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.

```html
import React from 'react'
import { CButton, CPlaceholder } from '@coreui/react'

export const Placeholder2Example = () => {
  return (
    <>
      <p aria-hidden="true">
        <CPlaceholder xs={6} />
      </p>
      <CPlaceholder
        as={CButton}
        color="primary"
        aria-hidden="true"
        disabled
        href="#"
        tabIndex={-1}
        xs={4}
      />
    </>
  )
}
```

> The use of aria-hidden="true" only indicates that the element should be hidden to
> screen readers. The loading behavior of the placeholder depends on how authors
> will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript
> code may be needed to *swap* the state of the placeholder and inform AT users of the update.

### Width

You can change the `width` through grid column classes, width utilities, or inline styles.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderWidthExample = () => {
  return (
    <>
      <CPlaceholder xs={6} />
      <CPlaceholder className="w-75" />
      <CPlaceholder style={{ width: '30%' }} />
    </>
  )
}
```

### Color

By default, the `<CPlaceholder>` uses `currentColor`. This can be overridden with a custom color or utility class.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderColorExample = () => {
  return (
    <>
      <CPlaceholder xs={12} />

      <CPlaceholder color="primary" xs={12} />
      <CPlaceholder color="secondary" xs={12} />
      <CPlaceholder color="success" xs={12} />
      <CPlaceholder color="danger" xs={12} />
      <CPlaceholder color="warning" xs={12} />
      <CPlaceholder color="info" xs={12} />
      <CPlaceholder color="light" xs={12} />
      <CPlaceholder color="dark" xs={12} />
    </>
  )
}
```

### Sizing

The size of `<CPlaceholder>`s are based on the typographic style of the parent element. Customize them with `size` prop: `lg`, `sm`, or `xs`.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderSizingExample = () => {
  return (
    <>
      <CPlaceholder xs={12} size="lg" />
      <CPlaceholder xs={12} />
      <CPlaceholder xs={12} size="sm" />
      <CPlaceholder xs={12} size="xs" />
    </>
  )
}
```

### Animation

Animate placeholders with `animation="glow"` or `animation="wave"` to better convey the perception of something being _actively_ loaded.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderAnimationExample = () => {
  return (
    <>
      <CPlaceholder as="p" animation="glow">
        <CPlaceholder xs={12} />
      </CPlaceholder>
      <CPlaceholder as="p" animation="wave">
        <CPlaceholder xs={12} />
      </CPlaceholder>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CPlaceholder /&gt;](./api/#cplaceholder)


---

# React Popover Component

> Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.

## Examples

### Live demo

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverLiveExample = () => {
  return (
    <CPopover
      title="Popover title"
      content="And here’s some amazing content. It’s very engaging. Right?"
      placement="right"
    >
      <CButton color="danger" size="lg">
        Click to toggle popover
      </CButton>
    </CPopover>
  )
}
```

### Four directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverFourDirectionsExample = () => {
  return (
    <>
      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <CButton color="secondary">Popover on top</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <CButton color="secondary">Popover on right</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <CButton color="secondary">Popover on bottom</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="left"
      >
        <CButton color="secondary">Popover on left</CButton>
      </CPopover>
    </>
  )
}
```

### Custom popovers

You can customize the appearance of popovers using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverCustomPopoversExample = () => {
  const customPopoverStyle = {
    '--cui-popover-max-width': '200px',
    '--cui-popover-border-color': 'var(--cui-primary)',
    '--cui-popover-header-bg': 'var(--cui-primary)',
    '--cui-popover-header-color': 'var(--cui-white)',
    '--cui-popover-body-padding-x': '1rem',
    '--cui-popover-body-padding-y': '.5rem',
  } as React.CSSProperties

  return (
    <CPopover
      content="This popover is themed via CSS variables."
      placement="right"
      title="Custom popover"
      style={customPopoverStyle}
    >
      <CButton color="secondary">Custom popover</CButton>
    </CPopover>
  )
}
```

### Dismiss on next click

Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.

A shown popover can also be dismissed by pressing the <kbd>Escape</kbd> key. As with dropdown menus, a popover shown inside a dialog is dismissed on its own: the first <kbd>Escape</kbd> closes the popover and a subsequent one closes the dialog.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverDismissExample = () => {
  return (
    <CPopover
      content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
      placement="right"
      title="Dismissible popover"
      trigger="focus"
    >
      <CButton color="danger">Dismissible popover</CButton>
    </CPopover>
  )
}
```

## Usage

### Disabled elements

Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.

For disabled popover triggers, you may also prefer `trigger={['hover', 'focus']}` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverDisabledElementsExample = () => {
  return (
    <CPopover content="Disabled popover" placement="right" trigger={['hover', 'focus']}>
      <span className="d-inline-block" tabIndex={0}>
        <CButton color="primary" disabled>
          Disabled button
        </CButton>
      </span>
    </CPopover>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CPopover /&gt;](./api/#cpopover)


---

# React Progress Component

> Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.

## Example

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.

## Basic usage

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressExample = () => {
  return (
    <>
      <CProgress value={0} />
      <CProgress value={25} />
      <CProgress value={50} />
      <CProgress value={75} />
      <CProgress value={100} />
    </>
  )
}
```

## Labels

Add labels to your progress bars by placing text within the `<CProgressBar>`.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressLabelsExample = () => {
  return <CProgress value={25}>25%</CProgress>
}
```

Please note that the default setting for the content within the `` is to be limited by the `overflow: hidden property`, preventing it from extending beyond the bar's boundaries. If the progress bar is shorter than its label, the content will be truncated and could be difficult to read. To modify this behavior, you can utilize the `.overflow-visible` class from the overflow utilities. However, it is important to specify a specific text color to ensure readability. It's worth noting that this approach currently does not consider color modes.

```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressLabels2Example = () => {
  return (
    <CProgress value={10}>
      <CProgressBar className="overflow-visible text-dark px-2" color="success">
        Long label text for the progress bar, set to a dark color
      </CProgressBar>
    </CProgress>
  )
}
```

Since **v4.9.0** you can also use the `progressBarClassName` property directly on the `` component to achieve the same.

```jsx
<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" value={10}>Long label text for the progress bar, set to a dark color</CProgress>
```

## Height

We only set a `height` value on the `<CProgress>`, so if you change that value the inner `<CProgressBar>` will automatically resize accordingly.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressHeightExample = () => {
  return (
    <>
      <CProgress height={1} value={25} />
      <CProgress height={20} value={25} />
    </>
  )
}
```

```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressHeight2Example = () => {
  return (
    <>
      <CProgress height={1}>
        <CProgressBar value={25}></CProgressBar>
      </CProgress>
      <CProgress height={20}>
        <CProgressBar value={25}></CProgressBar>
      </CProgress>
    </>
  )
}
```

## Backgrounds

Use `color` prop to change the appearance of individual progress bars.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressBackgroundsExample = () => {
  return (
    <>
      <CProgress color="success" value={25} />
      <CProgress color="info" value={50} />
      <CProgress color="warning" value={75} />
      <CProgress color="danger" value={100} />
    </>
  )
}
```

Ensure that when you incorporate labels into progress bars featuring a custom background color, you also select an appropriate text color to ensure readability and maintain adequate contrast for the labels.

```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressBackgrounds2Example = () => {
  return (
    <>
      <CProgress color="success" value={25}>
        <CProgressBar>25%</CProgressBar>
      </CProgress>
      <CProgress color="info" value={50}>
        <CProgressBar className="text-dark">50%</CProgressBar>
      </CProgress>
      <CProgress color="warning" value={75}>
        <CProgressBar className="text-dark">75%</CProgressBar>
      </CProgress>
      <CProgress color="danger" value={100}>
        <CProgressBar>100%</CProgressBar>
      </CProgress>
    </>
  )
}
```

Since **v4.9.0** you can also use the `progressBarClassName` property directly on the `` component to achieve the same.

```jsx
<CProgress color="success" value={25}>25%</CProgress>
<CProgress color="info" progressBarClassName="text-dark" value={50}>50%</CProgress>
<CProgress color="warning" progressBarClassName="text-dark" value={75}>75%</CProgress>
<CProgress color="danger" value={100}>100%</CProgress>
```

## Multiple bars

Include multiple progress bars in a progress component if you need. In **v4.9.0**

> In version 4.9.0, we introduced a new `` component to more logically wrap multiple progress bars into a single stacked progress bar. The previous structure will continue to work until the next major version.

```html
import React from 'react'
import { CProgress, CProgressStacked } from '@coreui/react'

export const ProgressMultipleBarsExample = () => {
  return (
    <CProgressStacked>
      <CProgress value={15} />
      <CProgress color="success" value={30} />
      <CProgress color="info" value={20} />
    </CProgressStacked>
  )
}
```

**Previous markup**
```jsx
<CProgress>
  <CProgressBar value={15} />
  <CProgressBar color="success" value={30} />
  <CProgressBar color="info" value={20} />
</CProgress>
```

## Striped

Add `variant="striped"` to any `<CProgressBar>` to apply a stripe via CSS gradient over the progress bar's background color.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressStripedExample = () => {
  return (
    <>
      <CProgress color="success" variant="striped" value={25} />
      <CProgress color="info" variant="striped" value={50} />
      <CProgress color="warning" variant="striped" value={75} />
      <CProgress color="danger" variant="striped" value={100} />
    </>
  )
}
```

## Animated stripes

The striped gradient can also be animated. Add `animated` property to `<CProgressBar>` to animate the stripes right to left via CSS3 animations.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressAnimatedStripedExample = () => {
  return (
    <>
      <CProgress color="success" variant="striped" animated value={25} />
      <CProgress color="info" variant="striped" animated value={50} />
      <CProgress color="warning" variant="striped" animated value={75} />
      <CProgress color="danger" variant="striped" animated value={100} />
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CProgress /&gt;](./api/#cprogress)
- [&lt;CProgressBar /&gt;](./api/#cprogressbar)


---

# React Search Button Component

> React search button component for keyboard-aware search entry points, command palettes, modals, and offcanvas panels.

## Overview

The CoreUI React Search Button component is a trigger element designed for search entry points and command-style actions. It behaves like a regular button on click, but it can also react to a configurable keyboard shortcut such as `meta+/` or `ctrl+/`.

- Use it as a standalone trigger for a custom search UI.
- Pair it with React state to open a modal, offcanvas, or command palette.
- Shortcut keys are rendered automatically.
- Displayed shortcut keys react to keyboard interaction and receive an `.active` state while pressed.

## Basic example

Use `` as the entry point for a controlled search interface. Use `onTrigger` as the main activation callback for both direct interaction and keyboard shortcuts.

```html
import React, { useState } from 'react'
import {
  CBadge,
  CFormInput,
  CListGroup,
  CListGroupItem,
  CModal,
  CModalBody,
  CModalHeader,
  CModalTitle,
  CSearchButton,
} from '@coreui/react'

export const SearchButtonExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CSearchButton
        onTrigger={() => setVisible(true)}
        aria-label="Open search dialog"
        aria-controls="search-button-modal"
        shortcut="meta+/,ctrl+/"
      />
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="search-button-modal-title"
      >
        <CModalHeader>
          <CModalTitle id="search-button-modal-title" className="w-100">
            <CFormInput type="search" placeholder="Search" aria-label="Search" />
          </CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p className="text-body-secondary small mb-2">Recent searches</p>
          <CListGroup flush>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              CoreUI components overview
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              Modal dialog examples
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              Sidebar navigation customization
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
          </CListGroup>
        </CModalBody>
      </CModal>
    </>
  )
}
```

## Custom shortcut

Configure the shortcut with the `shortcut` prop. On macOS, the component prefers the `meta` variant for the visible label. On Windows and Linux, it prefers the `ctrl` variant.

> Shortcuts such as `meta+f`, `ctrl+f`, `meta+s`, or `ctrl+s` can override native browser or system shortcuts. Prefer safer combinations such as `meta+/` and `ctrl+/` unless replacing the default behavior is intentional.

```html
import React, { useState } from 'react'
import { CAlert, CSearchButton } from '@coreui/react'

export const SearchButtonCustomShortcutExample = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <CSearchButton
        placeholder="Command palette"
        shortcut="meta+i,ctrl+i"
        onTrigger={() => setCount((value) => value + 1)}
        aria-label="Open command palette"
      />
      <CAlert color="info" className="mt-3 mb-0">
        Triggered {count} {count === 1 ? 'time' : 'times'} with click or shortcut.
      </CAlert>
    </div>
  )
}
```

## Launch an offcanvas

The component works naturally with controlled React state and also supports a dedicated `onTrigger` callback. This demo uses `meta+shift+o` / `ctrl+shift+o` to avoid colliding with other live examples on the page.

```html
import React, { useState } from 'react'
import {
  CCloseButton,
  CFormInput,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
  CSearchButton,
} from '@coreui/react'

export const SearchButtonOffcanvasExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CSearchButton
        onTrigger={() => setVisible(true)}
        shortcut="meta+shift+o,ctrl+shift+o"
        aria-label="Open search panel"
        aria-controls="search-button-offcanvas"
      />

      <COffcanvas
        id="search-button-offcanvas"
        placement="end"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Search panel</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          <CFormInput
            type="search"
            className="mb-3"
            placeholder="Search..."
            aria-label="Search in panel"
          />
          <p className="mb-0">Use this space for filters, recent searches, or command shortcuts.</p>
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Keyboard behavior

### When the configured shortcut is pressed

| Key | Action |
| --- | --- |
| `Enter` / `Space` on a focused search button | Trigger the component activation callback |
| Configured shortcut, e.g. `⌘/` / `Ctrl+/` | Trigger the component activation callback |
| Modifier key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed |
| Final key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed |

### Keyboard state behavior

| Interaction | Effect |
| --- | --- |
| Matching shortcut on `keydown` | Optionally prevents the browser's default behavior and calls `onTrigger` |
| Plain typing inside `input`, `textarea`, `select`, or `contenteditable` | Does not trigger the component without `meta` or `ctrl` |
| `keyup` after a shortcut key press | Removes `.active` from the rendered shortcut keys |
| Browser window `blur` | Clears all active shortcut key states |
| Multiple configured shortcuts | The component listens to all configured shortcuts and renders the platform-preferred one in the UI |

## Accessibility

Accessibility is an important part of the Search Button design. The component includes built-in behaviors that help preserve expected keyboard interaction and reduce conflicts with assistive technologies, but accessible results still depend on choosing the right markup and shortcut combinations.

### Built-in accessibility behavior

- Native button semantics are preserved because `<CSearchButton>` renders a `<button type="button">` by default.
- Rendered `.search-button-keys` are treated as visual hints only and are hidden from assistive technologies.
- Plain typing inside editable fields does not trigger the component unless the shortcut also includes `meta` or `ctrl`.
- The component keeps standard button keyboard behavior such as `Enter` and `Space`.

### Author responsibilities

- Choose shortcuts carefully and avoid overriding common browser or system shortcuts unless that behavior is intentional and clearly communicated.
- Make sure the visible button label clearly describes the action, for example `Search`, `Open search`, or `Command palette`.
- Mark decorative icons as `aria-hidden="true"` when you provide a custom `icon`.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the component.

- [&lt;CSearchButton /&gt;](./api/#csearchbutton)


---

# React Sidebar Component

## How it works

Here's what you need to know before getting started with the React Sidebar component:

- `CSidebar` renders the `.sidebar` container.
- On mobile devices, the sidebar is hidden by default. Control it with the `visible` prop.
- On desktop devices, the sidebar is shown by default. Hide it with `visible={false}`.
- Use `narrow` to switch the sidebar to the narrow variant.
- Use `unfoldable` to switch the sidebar to the narrow-unfoldable variant.
- `CSidebarNav` renders `.sidebar-nav` and supports nested groups through `CNavGroup`.
- For accessibility, prefer semantic elements such as `nav`, or add `role="navigation"` when using `as="div"` on `CSidebarNav`.

## Supported content

Sidebar comes with built-in support for a handful of sub-components. Choose from the following as needed:

- `<CSidebarHeader>` for an optional header.
- `<CSidebarBrand>` for your company, product, or project name.
- `<CSidebarNav>` for a full-height and lightweight navigation, including nested groups.
- `<CSidebarFooter>` for an optional footer.
- `<CSidebarToggler>` for toggling the sidebar state.

## Examples

Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer dropdown.

```html
import React, { useState } from 'react'
import {
  CAvatar,
  CBadge,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CSidebar,
  CSidebarBrand,
  CSidebarFooter,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
  CButton,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import {
  cilAccountLogout,
  cilCloudDownload,
  cilCreditCard,
  cilMinus,
  cilOptions,
  cilPlus,
  cilPuzzle,
  cilSettings,
  cilSidebarClose,
  cilSidebarOpen,
  cilSpeedometer,
  cilUser,
} from '@coreui/icons'

export const SidebarExample = () => {
  const [unfoldable, setUnfoldable] = useState(false)

  return (
    <CSidebar className="border-end h-100" unfoldable={unfoldable}>
      <CSidebarHeader className="position-relative">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            className="d-sidebar-narrow-none"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            className="d-sidebar-narrow"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
        <CButton
          className="d-flex d-sidebar-narrow-none"
          size="sm"
          variant="ghost"
          onClick={() => setUnfoldable(!unfoldable)}
        >
          <CIcon className="icon icon-lg d-sidebar-narrow-unfoldable" icon={cilSidebarOpen} />
          <CIcon className="icon icon-lg d-sidebar-narrow-unfoldable-none" icon={cilSidebarClose} />
        </CButton>
      </CSidebarHeader>
      <CSidebarNav variant="tree">
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem disabled href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
              <span className="nav-group-toggle-indicator">
                <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
              </span>
            </>
          )}
          compact
          visible
        >
          <CNavItem href="#">Item</CNavItem>
          <CNavItem href="#">Item</CNavItem>
          <CNavGroup
            toggler={({ visible }) => (
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Items group 2
                <span className="nav-group-toggle-indicator">
                  <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                </span>
              </>
            )}
            visible
          >
            <CNavItem href="#">Item</CNavItem>
            <CNavItem href="#">Item</CNavItem>
            <CNavGroup
              toggler={({ visible }) => (
                <>
                  <span className="nav-icon">
                    <span className="nav-icon-bullet"></span>
                  </span>{' '}
                  Items group 3
                  <span className="nav-group-toggle-indicator">
                    <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                  </span>
                </>
              )}
            >
              <CNavItem href="#">Item</CNavItem>
              <CNavItem href="#">Item</CNavItem>
            </CNavGroup>
          </CNavGroup>
        </CNavGroup>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilSettings} /> Settings group
              <span className="nav-group-toggle-indicator">
                <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
              </span>
            </>
          )}
        >
          <CNavItem href="#">Item</CNavItem>
          <CNavItem href="#">Item</CNavItem>
          <CNavGroup
            toggler={({ visible }) => (
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Nested group
                <span className="nav-group-toggle-indicator">
                  <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                </span>
              </>
            )}
          >
            <CNavItem href="#">Item</CNavItem>
            <CNavItem href="#">Item</CNavItem>
          </CNavGroup>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
      </CSidebarNav>
      <CSidebarFooter>
        <CDropdown className="w-100" direction="dropup">
          <CDropdownToggle
            caret={false}
            className="w-100 d-flex gap-2 p-1 align-items-center"
            variant="ghost"
          >
            <CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
            <div className="small text-start d-sidebar-narrow-none">
              <div className="fw-semibold">Lena Scaffold</div>
              <div>lena@acme.com</div>
            </div>
            <CIcon className="nav-icon ms-auto d-sidebar-narrow-none" icon={cilOptions} />
          </CDropdownToggle>
          <CDropdownMenu className="w-100">
            <div className="d-flex gap-2 px-2">
              <CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
              <div className="small text-start">
                <div className="fw-semibold">Lena Scaffold</div>
                <div>lena@acme.com</div>
              </div>
            </div>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilUser} />
                Account
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilCreditCard} />
                Billing
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilSettings} />
                Settings
              </div>
            </CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilAccountLogout} />
                Logout
              </div>
            </CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CSidebarFooter>
    </CSidebar>
  )
}
```

### Narrow sidebar

Add the `narrow` prop to make the sidebar narrow.

Use `.d-sidebar-narrow` to show content only in the narrow state and `.d-sidebar-narrow-none` to hide content in the narrow state. These utility classes replace older brand-specific visibility helpers.

```html
import React from 'react'
import {
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavItem,
  CTooltip,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCart, cilCloudDownload, cilSpeedometer } from '@coreui/icons'

export const SidebarNarrowExample = () => {
  return (
    <CSidebar className="border-end" narrow>
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CTooltip content="Nav item" placement="right">
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Nav item" placement="right">
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Download" placement="right">
          <CNavItem href="https://coreui.io">
            <CIcon customClassName="nav-icon" icon={cilCloudDownload} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Get CoreUI PRO" placement="right">
          <CNavItem href="https://coreui.io/pricing/">
            <CIcon customClassName="nav-icon" icon={cilCart} />
          </CNavItem>
        </CTooltip>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Unfoldable sidebar

Add the `unfoldable` prop to make the sidebar narrow and expand it on hover.

Use `.d-sidebar-narrow-unfoldable` and `.d-sidebar-narrow-unfoldable-none` to control content visibility for unfoldable sidebars.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarUnfoldableExample = () => {
  return (
    <CSidebar className="border-end" unfoldable>
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            className="d-sidebar-narrow-none"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            className="d-sidebar-narrow"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
            </>
          }
          visible
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Items group item
          </CNavItem>
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Items group item
          </CNavItem>
        </CNavGroup>
        <CNavItem className="mt-auto" href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
        <CNavItem href="https://coreui.io/pricing/">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
        </CNavItem>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Narrow visibility helpers

Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants:

- `.d-sidebar-narrow` shows content only in the narrow state.
- `.d-sidebar-narrow-none` hides content in the narrow state.
- `.d-sidebar-narrow-unfoldable` shows content only when the sidebar uses the unfoldable variant.
- `.d-sidebar-narrow-unfoldable-none` hides content when the sidebar uses the unfoldable variant.

## Navigation

Use `CSidebarNav` as the main navigation container inside a sidebar. It supports plain links, section titles, nested groups, tree navigation, compact navigation, and custom group indicators.

### Basic navigation

Use the following building blocks inside `CSidebarNav`:

- `<CNavTitle>` for section headings.
- `<CNavItem>` for each navigation entry.
- `<CNavLink>` for standalone navigation links.
- `CIcon` with `customClassName="nav-icon"` for optional leading icons.
- `<CBadge>` or utility classes such as `ms-auto` for trailing metadata.

### Navigation groups

Use `<CNavGroup>` for expandable navigation sections. The `toggler` prop defines the clickable label, and nested `CNavItem` or `CNavGroup` components become the group content.

Set `visible` on `CNavGroup` when the group should be expanded by default.

Use the `compact` prop on `CNavGroup` to reduce spacing only for that nested group.

### Compact navigation

Add the `compact` prop to `CSidebarNav` to reduce the vertical padding across the entire navigation.

Use the `compact` prop on `CNavGroup` to compact only a nested section.

```html
import React from 'react'
import { CSidebar, CSidebarNav, CNavGroup, CNavItem, CNavTitle } from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarCompactExample = () => {
  return (
    <CSidebar className="border-end">
      <CSidebarNav compact>
        <CNavTitle>Compact nav</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Components
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nested group
            </>
          }
          visible
        >
          <CNavItem href="#">Compact item</CNavItem>
          <CNavItem href="#">Compact item</CNavItem>
        </CNavGroup>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Tree navigation

Add `variant="tree"` to `CSidebarNav` to render nested groups as a tree. Nested groups automatically keep their hierarchy, making deeper navigation levels easier to scan.

```html
import React from 'react'
import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilFolder } from '@coreui/icons'

export const SidebarTreeExample = () => {
  return (
    <CSidebar className="border-end">
      <CSidebarNav variant="tree">
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilFolder} /> Parent item
            </>
          }
          visible
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Child item
          </CNavItem>
          <CNavGroup
            toggler={
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Nested group
              </>
            }
            visible
          >
            <CNavItem href="#">
              <span className="nav-icon">
                <span className="nav-icon-bullet"></span>
              </span>{' '}
              Nested child
            </CNavItem>
            <CNavItem href="#">
              <span className="nav-icon">
                <span className="nav-icon-bullet"></span>
              </span>{' '}
              Nested child
            </CNavItem>
          </CNavGroup>
        </CNavGroup>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Group indicator

By default, `CNavGroup` renders the standard group indicator through the `.nav-group-toggle` styles, so no additional markup is required.

```html
import React from 'react'
import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilPuzzle } from '@coreui/icons'

export const SidebarGroupIndicatorExample = () => {
  return (
    <CSidebar className="border-end">
      <CSidebarNav>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
            </>
          }
          visible
        >
          <CNavItem href="#">Items group item</CNavItem>
          <CNavItem href="#">Items group item</CNavItem>
        </CNavGroup>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Custom group indicator

To replace the default indicator, pass custom indicator markup inside the `toggler` prop using a `.nav-group-toggle-indicator` element. The `toggler` prop can also be a render function, which receives `{ visible }` so you can swap icons yourself.

Use `.show` and `.hide` classes inside `.nav-group-toggle-indicator` to control which icon is visible when the group is expanded or collapsed, or render a single icon conditionally from the `visible` state.

```html
import React from 'react'
import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react'

import CIcon from '@coreui/icons-react'
import {
  cilChevronCircleDownAlt,
  cilChevronCircleUpAlt,
  cilMinus,
  cilPlus,
  cilPuzzle,
} from '@coreui/icons'

export const SidebarCustomIndicatorExample = () => {
  return (
    <CSidebar className="border-end">
      <CSidebarNav>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
              <span className="nav-group-toggle-indicator">
                <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
              </span>
            </>
          )}
          visible
        >
          <CNavItem href="#">Items group item</CNavItem>
          <CNavItem href="#">Items group item</CNavItem>
        </CNavGroup>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Alternate indicator
              <span className="nav-group-toggle-indicator">
                <CIcon
                  className="icon icon-sm"
                  icon={visible ? cilChevronCircleUpAlt : cilChevronCircleDownAlt}
                />
              </span>
            </>
          )}
        >
          <CNavItem href="#">Items group item</CNavItem>
          <CNavItem href="#">Items group item</CNavItem>
        </CNavGroup>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Controlled navigation group

_Added in 5.12.0._

`CNavGroup` works uncontrolled by default—clicking the toggler expands and collapses it. To control it from the parent, set `visible` and handle `onVisibleChange`. In controlled mode the toggler only requests a change through `onVisibleChange`; the group follows the `visible` prop, so the parent has the final say.

This makes it possible to keep a section open even when the user clicks to collapse it—useful for a route-aware sidebar that must keep the active section expanded. Toggle the lock and try to collapse the group: while locked, the parent rejects the change and the group stays open.

```html
import React, { useState } from 'react'
import { CButton, CNavGroup, CNavItem, CSidebar, CSidebarFooter, CSidebarNav } from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSettings, cilSpeedometer } from '@coreui/icons'

export const SidebarControlledGroupExample = () => {
  const [visible, setVisible] = useState(true)
  const [locked, setLocked] = useState(true)

  const handleVisibleChange = (value: boolean) => {
    if (!value && locked) {
      return
    }

    setVisible(value)
  }

  return (
    <CSidebar className="border-end">
      <CSidebarNav>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
        </CNavItem>
        <CNavGroup
          onVisibleChange={handleVisibleChange}
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Active section
            </>
          }
          visible={visible}
        >
          <CNavItem href="#">Overview</CNavItem>
          <CNavItem href="#">Settings</CNavItem>
        </CNavGroup>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilLayers} /> Components
            </>
          }
        >
          <CNavItem href="#">Base</CNavItem>
          <CNavItem href="#">Buttons</CNavItem>
          <CNavGroup
            toggler={
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Forms
              </>
            }
          >
            <CNavItem href="#">Inputs</CNavItem>
            <CNavItem href="#">Selects</CNavItem>
          </CNavGroup>
        </CNavGroup>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilSettings} /> Settings
            </>
          }
        >
          <CNavItem href="#">Profile</CNavItem>
          <CNavItem href="#">Security</CNavItem>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
      </CSidebarNav>
      <CSidebarFooter className="border-top">
        <CButton color="primary" size="sm" onClick={() => setLocked(!locked)}>
          {locked ? 'Unlock collapsing' : 'Lock the active section open'}
        </CButton>
      </CSidebarFooter>
    </CSidebar>
  )
}
```

## Dark sidebar

Change the appearance of sidebars with `colorScheme="dark"`.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarDarkExample = () => {
  return (
    <CSidebar className="border-end" colorScheme="dark">
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
            </>
          }
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Nav dropdown item
          </CNavItem>
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Nav dropdown item
          </CNavItem>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
        <CNavItem href="https://coreui.io/pricing/">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
        </CNavItem>
      </CSidebarNav>
    </CSidebar>
  )
}
```

## Placement

By default, placement for sidebar components is on the left side of the viewport, but you can change it with the `placement` prop:

- `placement="start"` places the sidebar on the left side of the viewport.
- `placement="end"` places the sidebar on the right side of the viewport.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CSidebar /&gt;](./api/#csidebar)
- [&lt;CSidebarBrand /&gt;](./api/#csidebarbrand)
- [&lt;CSidebarFooter /&gt;](./api/#csidebarfooter)
- [&lt;CSidebarHeader /&gt;](./api/#csidebarheader)
- [&lt;CSidebarNav /&gt;](./api/#csidebarnav)
- [&lt;CSidebarToggler /&gt;](./api/#csidebartoggler)


---

# React Smart Pagination Component

> Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.

## Overview

React smart pagination component consists of button-like styled links, that are arranged side by side in a horizontal list.

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. SmartPagination is built with list HTML elements so screen readers can announce the number of available links. SmartPagination also use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, SmartPagination provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.

```html
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'

export const SmartPaginationExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} />
  )
}
```

## Features

- Determine behavior, style and functionality of pagination
- Smart automatic items generation

## Working with icons

Looking to use an icon or symbol in place of text for some pagination links? SmartPagination will provide screen reader support for 'firstButton', 'previousButton', 'nextButton' and 'lastButton'.

## Sizing

Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additional sizes.

```html
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'

export const SmartPaginationSizingLargeExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination
      size="lg"
      activePage={currentPage}
      pages={10}
      onActivePageChange={setCurrentPage}
    />
  )
}
```

```html
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'

export const SmartPaginationSizingSmallExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination
      size="sm"
      activePage={currentPage}
      pages={10}
      onActivePageChange={setCurrentPage}
    />
  )
}
```

## Alignment

Change the alignment of pagination components with `align="start"`, `align="center"` or `align="end"`.

```html
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'

export const SmartPaginationAlignmentCenterExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination
      align="center"
      activePage={currentPage}
      pages={10}
      onActivePageChange={setCurrentPage}
    />
  )
}
```

```html
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'

export const SmartPaginationAlignmentEndExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination
      align="end"
      activePage={currentPage}
      pages={10}
      onActivePageChange={setCurrentPage}
    />
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CSmartPagination /&gt;](./api/#csmartpagination)


---

# React Smart Table Component (DataTable)

> A React Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. React Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.

## Features

- Filter items by one or all columns
- Sort items by column
- Integrated with CPagination component by default
- Customize style of specific rows, columns and cells
- Customize display of columns
- Load with initial filters and sorter state
- Loading state visualization
- Default header labels generation based on column names

## Usage

Here is an example of how to create a basic DataTable:

```html
import React, { useState } from 'react'
import { CAvatar, CBadge, CButton, CCollapse } from '@coreui/react'
import { CSmartTable } from '@coreui/react-pro'
import type { Item } from '@coreui/react-pro/components/smart-table/types'

const getBadge = (status: string) => {
  switch (status) {
    case 'Active': {
      return 'success'
    }
    case 'Inactive': {
      return 'secondary'
    }
    case 'Pending': {
      return 'warning'
    }
    case 'Banned': {
      return 'danger'
    }
    default: {
      return 'primary'
    }
  }
}

export const SmartTableExample = () => {
  const [details, setDetails] = useState<number[]>([])
  const columns = [
    {
      key: 'avatar',
      label: '',
      filter: false,
      sorter: false,
    },
    {
      key: 'name',
      _style: { width: '20%' },
    },
    {
      key: 'registered',
      sorter: (item1: Item, item2: Item) => {
        const a = new Date(item1.registered)
        const b = new Date(item2.registered)
        return a > b ? 1 : b > a ? -1 : 0
      },
    },
    {
      key: 'role',
      _style: { width: '20%' },
    },
    'status',
    {
      key: 'show_details',
      label: '',
      _style: { width: '1%' },
      filter: false,
      sorter: false,
    },
  ]
  const items = [
    {
      id: 1,
      name: 'Samppa Nori',
      avatar: '1.jpg',
      registered: '2021/03/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      avatar: '2.jpg',
      registered: '2018/02/07',
      role: 'Staff',
      status: 'Banned',
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      avatar: '3.jpg',
      registered: '2020/01/15',
      role: 'Admin',
      status: 'Inactive',
      _selected: true,
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      avatar: '4.jpg',
      registered: '2019/04/05',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 5,
      name: 'Friderik Dávid',
      avatar: '5.jpg',
      registered: '2022/03/25',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 6,
      name: 'Yiorgos Avraamu',
      avatar: '6.jpg',
      registered: '2017/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 7,
      name: 'Avram Tarasios',
      avatar: '7.jpg',
      registered: '2016/02/12',
      role: 'Staff',
      status: 'Banned',
      _selected: true,
    },
    {
      id: 8,
      name: 'Quintin Ed',
      avatar: '8.jpg',
      registered: '2023/01/21',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 9,
      name: 'Enéas Kwadwo',
      avatar: '9.jpg',
      registered: '2024/03/10',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 10,
      name: 'Agapetus Tadeáš',
      avatar: '10.jpg',
      registered: '2015/01/10',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 11,
      name: 'Carwyn Fachtna',
      avatar: '11.jpg',
      registered: '2014/04/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 12,
      name: 'Nehemiah Tatius',
      avatar: '12.jpg',
      registered: '2013/01/05',
      role: 'Staff',
      status: 'Banned',
      _selected: true,
    },
    {
      id: 13,
      name: 'Ebbe Gemariah',
      avatar: '13.jpg',
      registered: '2012/02/25',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      avatar: '14.jpg',
      registered: '2011/03/19',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 15,
      name: 'Leopold Gáspár',
      avatar: '15.jpg',
      registered: '2010/02/01',
      role: 'Staff',
      status: 'Active',
    },
  ]

  const toggleDetails = (id: number) => {
    const position = details.indexOf(id)
    let newDetails = [...details]
    if (position === -1) {
      newDetails = [...details, id]
    } else {
      newDetails.splice(position, 1)
    }
    setDetails(newDetails)
  }

  return (
    <CSmartTable
      activePage={2}
      cleaner
      clickableRows
      columns={columns}
      columnFilter
      columnSorter
      footer
      items={items}
      itemsPerPageSelect
      itemsPerPage={5}
      pagination
      onFilteredItemsChange={(items) => {
        console.log('onFilteredItemsChange')
        console.table(items)
      }}
      onSelectedItemsChange={(items) => {
        console.log('onSelectedItemsChange')
        console.table(items)
      }}
      scopedColumns={{
        avatar: (item: Item) => (
          <td>
            <CAvatar src={`/assets/img/avatars/${item.avatar}`} />
          </td>
        ),
        registered: (item: Item) => {
          const date = new Date(item.registered)
          const options: Intl.DateTimeFormatOptions = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
          }
          return <td>{date.toLocaleDateString('en-US', options)}</td>
        },
        status: (item: Item) => (
          <td>
            <CBadge color={getBadge(item.status)}>{item.status}</CBadge>
          </td>
        ),
        show_details: (item: Item) => {
          return (
            <td className="py-2">
              <CButton
                color="primary"
                variant="outline"
                shape="square"
                size="sm"
                onClick={() => {
                  toggleDetails(item.id)
                }}
              >
                {details.includes(item.id) ? 'Hide' : 'Show'}
              </CButton>
            </td>
          )
        },
        details: (item) => {
          return (
            <CCollapse visible={details.includes(item.id)}>
              <div className="p-3">
                <h4>{item.name}</h4>
                <p className="text-body-secondary">User since: {item.registered}</p>
                <CButton size="sm" color="info">
                  User Settings
                </CButton>
                <CButton size="sm" color="danger" className="ms-1">
                  Delete
                </CButton>
              </div>
            </CCollapse>
          )
        },
      }}
      selectable
      sorterValue={{ column: 'status', state: 'asc' }}
      tableFilter
      tableProps={{
        className: 'add-this-custom-class',
        responsive: true,
        striped: true,
        hover: true,
      }}
      tableBodyProps={{
        className: 'align-middle',
      }}
    />
  )
}
```

## Column names

By default, React Table component will generate the header labels for each column based on the column's data source.

```html
import React from 'react'
import { CSmartTable } from '@coreui/react-pro'

export const SmartTableColumnNamesExample = () => {
  const items = [
    { id: 0, name: 'John Doe', registered: '2022/01/01', role: 'Guest', status: 'Pending' },
    {
      id: 1,
      name: 'Samppa Nori',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Active',
      _props: { color: 'primary', align: 'middle' },
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      registered: '2022/02/07',
      role: 'Staff',
      status: 'Banned',
      _cellProps: { all: { className: 'fw-semibold' }, name: { color: 'info' } },
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      registered: '2022/02/07',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      registered: '2022/03/19',
      role: 'Member',
      status: 'Pending',
    },
    { id: 5, name: 'Friderik Dávid', registered: '2022/01/21', role: 'Staff', status: 'Active' },
    {
      id: 6,
      name: 'Yiorgos Avraamu',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 7,
      name: 'Avram Tarasios',
      registered: '2022/02/07',
      role: 'Staff',
      status: 'Banned',
      _props: { color: 'warning', align: 'middle' },
    },
    { id: 8, name: 'Quintin Ed', registered: '2022/02/07', role: 'Admin', status: 'Inactive' },
    { id: 9, name: 'Enéas Kwadwo', registered: '2022/03/19', role: 'Member', status: 'Pending' },
    {
      id: 10,
      name: 'Agapetus Tadeáš',
      registered: '2022/01/21',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 11,
      name: 'Carwyn Fachtna',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 12,
      name: 'Nehemiah Tatius',
      registered: '2022/02/07',
      role: 'Staff',
      status: 'Banned',
    },
    {
      id: 13,
      name: 'Ebbe Gemariah',
      registered: '2022/02/07',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      registered: '2022/03/19',
      role: 'Member',
      status: 'Pending',
    },
    { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21', role: 'Staff', status: 'Active' },
    { id: 16, name: 'Pompeius René', registered: '2022/01/01', role: 'Member', status: 'Active' },
    { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
    {
      id: 18,
      name: 'Micheal Mercurius',
      registered: '2022/02/07',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 19,
      name: 'Ganesha Dubhghall',
      registered: '2022/03/19',
      role: 'Member',
      status: 'Pending',
    },
    { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21', role: 'Staff', status: 'Active' },
    {
      id: 21,
      name: 'Vishnu Serghei',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Active',
    },
    { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
    {
      id: 23,
      name: 'Aulus Agmundr',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 42,
      name: 'Ford Prefect',
      registered: '2001/05/25',
      role: 'Alien',
      status: "Don't panic!",
    },
  ]
  return (
    <CSmartTable
      items={items}
      columnFilter
      columnSorter
      pagination
      tableProps={{
        hover: true,
      }}
    />
  )
}
```

## Column groups

The React Smart Table component allows users to group related columns under a common header. This can be useful when displaying data that has multiple categories or when comparing different sets of data. When the Smart Table is rendered, the header group will be displayed as a single header cell that spans the width of the columns included in the group. The group header cells feature can help to make the Smart Table component more organized and easier to read by grouping related data together and making it more visually distinct from other columns.

```html
import React from 'react'
import { CSmartTable } from '@coreui/react-pro'

export const SmartTableColumnGroupsExample = () => {
  const columns = [
    {
      group: 'Group 1',
      children: [
        {
          group: 'Subgroup 1',
          children: [
            {
              group: 'Subgroup 1A',
              children: [
                {
                  key: 'name',
                  _style: { width: '20%' },
                },
                'registered',
              ],
            },
            {
              group: 'Subgroup 1B',
              children: [{ key: 'role', _style: { width: '20%' } }],
            },
          ],
        },
        {
          group: 'Subgroup 2',
          children: [
            {
              group: 'Subgroup 2A',
              children: [{ key: 'status', _style: { width: '20%' } }],
            },
          ],
        },
      ],
    },
  ]
  const items = [
    {
      id: 0,
      name: 'John Doe',
      registered: '2022/01/01',
      role: 'Guest',
      status: 'Pending',
    },
    {
      id: 1,
      name: 'Samppa Nori',
      registered: '2022/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      role: 'Staff',
      status: 'Banned',
      _cellProps: { name: { colSpan: 2 } },
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      registered: '2022/02/07',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      registered: '2022/03/19',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 5,
      name: 'Friderik Dávid',
      registered: '2022/01/21',
      role: 'Staff',
      status: 'Active',
    },
  ]
  return (
    <CSmartTable
      columns={columns}
      columnSorter
      footer
      items={items}
      tableHeadProps={{
        color: 'light',
      }}
      tableProps={{
        bordered: true,
      }}
    />
  )
}
```

### Table with headers spanning multiple rows or columns

In the example below, the table consists of two individual columns and one column group spanning three columns. It has six rows. Two headers that span multiple rows.

```html
import React from 'react'
import { CSmartTable } from '@coreui/react-pro'
import type { Item } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableColumnAndRowsGroupsExample = () => {
  const columns = [
    {
      group: 'Poster availability',
      _props: { colSpan: 5 },
      children: [
        {
          key: 'poster',
          label: 'Poster name',
          _props: { scope: 'col' },
        },
        {
          key: 'color',
          _props: { scope: 'col' },
        },
        {
          key: 'size',
          label: 'Sizes available',
          _props: { colSpan: 3, scope: 'colgroup' },
          _style: { width: '50%' },
        },
      ],
    },
  ]
  const items = [
    {
      poster: 'Zodiac',
      color: 'Full color',
      size: ['A2', 'A3', 'A4'],
      _cellProps: {
        color: { color: 'light', scope: 'row' },
        poster: { color: 'light', rowSpan: 3, scope: 'rowgroup' },
      },
    },
    {
      color: 'Black and white',
      size: ['A1', 'A2', 'A3'],
      _cellProps: { color: { color: 'light', scope: 'row' } },
    },
    {
      color: 'Sepia',
      size: ['A3', 'A4', 'A5'],
      _cellProps: { color: { color: 'light', scope: 'row' } },
    },
    {
      poster: 'Angels',
      color: 'Black and white',
      size: ['A1', 'A3', 'A4'],
      _cellProps: {
        color: { color: 'light', scope: 'row' },
        poster: { color: 'light', rowSpan: 2, scope: 'rowgroup' },
      },
    },
    {
      color: 'Sepia',
      size: ['A2', 'A3', 'A5'],
      _cellProps: { color: { color: 'light', scope: 'row' } },
    },
  ]
  return (
    <CSmartTable
      columns={columns}
      items={items}
      tableHeadProps={{
        color: 'light',
      }}
      tableProps={{
        bordered: true,
      }}
      scopedColumns={{
        size: (item: Item) => (
          <>
            {item.size.map((_item: string, index: number) => (
              <td key={index}>{_item}</td>
            ))}
          </>
        ),
      }}
    />
  )
}
```

Example source: https://www.w3.org/WAI/tutorials/tables/irregular/

## Column sorter

The column sorter feature enables sorting React.js table data by column values. You can enable sorting by adding `columnSorter` to `<CSmartTable>`. If you want to disable sorting for a specific column, add `sorter: false` to the desired column.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'
import { CSmartTable } from '@coreui/react-pro'
import type { Item } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableColumnSorterExample = () => {
  const columns = [
    {
      key: 'avatar',
      label: '',
      sorter: false,
    },
    {
      key: 'name',
      _style: { width: '30%' },
    },
    {
      key: 'registered',
      sorter: (item1: Item, item2: Item) => {
        const a = new Date(item1.registered)
        const b = new Date(item2.registered)
        return a > b ? 1 : b > a ? -1 : 0
      },
    },
    'role',
  ]
  const items = [
    {
      id: 1,
      name: 'Samppa Nori',
      avatar: '1.jpg',
      registered: '2021/03/01',
      role: 'Member',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      avatar: '2.jpg',
      registered: '2018/02/07',
      role: 'Staff',
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      avatar: '3.jpg',
      registered: '2020/01/15',
      role: 'Admin',
      _selected: true,
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      avatar: '4.jpg',
      registered: '2019/04/05',
      role: 'Member',
    },
    {
      id: 5,
      name: 'Friderik Dávid',
      avatar: '5.jpg',
      registered: '2022/03/25',
      role: 'Staff',
    },
    {
      id: 6,
      name: 'Yiorgos Avraamu',
      avatar: '6.jpg',
      registered: '2017/01/01',
      role: 'Member',
    },
    {
      id: 7,
      name: 'Avram Tarasios',
      avatar: '7.jpg',
      registered: '2016/02/12',
      role: 'Staff',
      _selected: true,
    },
    {
      id: 8,
      name: 'Quintin Ed',
      avatar: '8.jpg',
      registered: '2023/01/21',
      role: 'Admin',
    },
    {
      id: 9,
      name: 'Enéas Kwadwo',
      avatar: '9.jpg',
      registered: '2024/03/10',
      role: 'Member',
    },
    {
      id: 10,
      name: 'Agapetus Tadeáš',
      avatar: '10.jpg',
      registered: '2015/01/10',
      role: 'Staff',
    },
    {
      id: 11,
      name: 'Carwyn Fachtna',
      avatar: '11.jpg',
      registered: '2014/04/01',
      role: 'Member',
    },
    {
      id: 12,
      name: 'Nehemiah Tatius',
      avatar: '12.jpg',
      registered: '2013/01/05',
      role: 'Staff',
      _selected: true,
    },
    {
      id: 13,
      name: 'Ebbe Gemariah',
      avatar: '13.jpg',
      registered: '2012/02/25',
      role: 'Admin',
    },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      avatar: '14.jpg',
      registered: '2011/03/19',
      role: 'Member',
    },
    {
      id: 15,
      name: 'Leopold Gáspár',
      avatar: '15.jpg',
      registered: '2010/02/01',
      role: 'Staff',
    },
  ]
  return (
    <CSmartTable
      columns={columns}
      columnSorter={{
        multiple: true,
        resetable: true,
      }}
      items={items}
      itemsPerPageSelect
      itemsPerPage={5}
      pagination
      scopedColumns={{
        avatar: (item: Item) => (
          <td>
            <CAvatar src={`/assets/img/avatars/${item.avatar}`} />
          </td>
        ),
      }}
      sorterValue={[
        { column: 'role', state: 'asc' },
        { column: 'registered', state: 'desc' },
      ]}
      tableBodyProps={{
        className: 'align-middle',
      }}
    />
  )
}
```

### Sort multiple columns

Enables sorting by multiple columns simultaneously by adding `columnSorter={{ multiple: true }}` The sorting order will be maintained across multiple columns based on the order of user interaction. This means you can sort by multiple columns, and each column will keep its order.

```jsx
<CSmartTable
  columns={[...]}
  columnSorter={{ multiple: true }}
  items={[...]}
/>
```

### Resetable sorter state

When `columnSorter={{ resetable: true }}` is set, clicking the sorter toggles through three states: ascending, descending, and unsorted. After the third click, it resets the sorting, returning the table to its initial state.

```jsx
<CSmartTable
  columns={[...]}
  columnSorter={{ resetable: true }}
  items={[...]}
/>
```

### Custom sorter

By default, sorting is done automatically by the component and works as expected when the values in the column are of a single data type: either string (case-insensitive) or number.

In case you want to sort non-string and non-number data, define a custom sorting function for the column. You can use this option to control how the values are compared and sorted. The function receives two arguments (`a`, `b`) corresponding to two row values and must return:

- a negative value if `a` should appear before `b`,
- zero if `a` and `b` are equal,
- a positive value if `a` should appear after `b`.

```jsx
<CSmartTable
  columns={[
    ...
    {
      key: 'registered',
      sorter: (date1, date2) => {
        const a = new Date(date1.registered)
        const b = new Date(date2.registered)
        return a > b ? 1 : b > a ? -1 : 0
      }
    },
    ...
  ]}
  items={[...]}
/>
```

## Column filter

The column filter feature allows filtering React.js table data based on column values. To enable filtering, add `columnFilter` to the `<CSmartTable>` component. If you want to disable filtering for a specific column, use `filter: false` in the column's configuration.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'
import { CSmartTable } from '@coreui/react-pro'
import type { Item } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableColumnFilterExample = () => {
  const columns = [
    {
      key: 'avatar',
      label: '',
      filter: false,
    },
    {
      key: 'name',
      _style: { width: '30%' },
    },
    'registered',
    {
      key: 'role',
      filter: false,
    },
  ]
  const items = [
    {
      id: 1,
      name: 'Samppa Nori',
      avatar: '1.jpg',
      registered: '2021/03/01',
      role: 'Member',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      avatar: '2.jpg',
      registered: '2018/02/07',
      role: 'Staff',
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      avatar: '3.jpg',
      registered: '2020/01/15',
      role: 'Admin',
      _selected: true,
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      avatar: '4.jpg',
      registered: '2019/04/05',
      role: 'Member',
    },
    {
      id: 5,
      name: 'Friderik Dávid',
      avatar: '5.jpg',
      registered: '2022/03/25',
      role: 'Staff',
    },
    {
      id: 6,
      name: 'Yiorgos Avraamu',
      avatar: '6.jpg',
      registered: '2017/01/01',
      role: 'Member',
    },
    {
      id: 7,
      name: 'Avram Tarasios',
      avatar: '7.jpg',
      registered: '2016/02/12',
      role: 'Staff',
      _selected: true,
    },
    {
      id: 8,
      name: 'Quintin Ed',
      avatar: '8.jpg',
      registered: '2023/01/21',
      role: 'Admin',
    },
    {
      id: 9,
      name: 'Enéas Kwadwo',
      avatar: '9.jpg',
      registered: '2024/03/10',
      role: 'Member',
    },
    {
      id: 10,
      name: 'Agapetus Tadeáš',
      avatar: '10.jpg',
      registered: '2015/01/10',
      role: 'Staff',
    },
    {
      id: 11,
      name: 'Carwyn Fachtna',
      avatar: '11.jpg',
      registered: '2014/04/01',
      role: 'Member',
    },
    {
      id: 12,
      name: 'Nehemiah Tatius',
      avatar: '12.jpg',
      registered: '2013/01/05',
      role: 'Staff',
      _selected: true,
    },
    {
      id: 13,
      name: 'Ebbe Gemariah',
      avatar: '13.jpg',
      registered: '2012/02/25',
      role: 'Admin',
    },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      avatar: '14.jpg',
      registered: '2011/03/19',
      role: 'Member',
    },
    {
      id: 15,
      name: 'Leopold Gáspár',
      avatar: '15.jpg',
      registered: '2010/02/01',
      role: 'Staff',
    },
  ]
  return (
    <CSmartTable
      columns={columns}
      columnFilter
      items={items}
      itemsPerPageSelect
      itemsPerPage={5}
      pagination
      scopedColumns={{
        avatar: (item: Item) => (
          <td>
            <CAvatar src={`/assets/img/avatars/${item.avatar}`} />
          </td>
        ),
      }}
      tableBodyProps={{
        className: 'align-middle',
      }}
    />
  )
}
```

### Custom filters

CoreUI React Smart Table (React DataTables) provides the ability to use custom filtering functions. Custom filters offer advanced filtering capabilities. You can define and integrate custom filtering logic by adding a `filter` function to the desired column, enabling more complex data filtering strategies.

#### Date Range Picker

Here is an example of how you might use the `` component to apply custom filters to a React DataTable component:

```html
import React, { useState } from 'react'
import { CDateRangePicker, CSmartTable } from '@coreui/react-pro'
import type { Item, Column } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableCustomFilterDateRangePickerExample = () => {
  const items = [
    { id: 0, name: 'John Doe', registered: '2022/01/01' },
    {
      id: 1,
      name: 'Samppa Nori',
      registered: '2022/01/01',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      registered: '2022/02/07',
    },
    { id: 3, name: 'Chetan Mohamed', registered: '2022/02/07' },
    {
      id: 4,
      name: 'Derick Maximinus',
      registered: '2022/03/19',
    },
    { id: 5, name: 'Friderik Dávid', registered: '2022/01/21' },
    { id: 6, name: 'Yiorgos Avraamu', registered: '2022/01/01' },
    {
      id: 7,
      name: 'Avram Tarasios',
      registered: '2022/02/07',
    },
    { id: 8, name: 'Quintin Ed', registered: '2022/02/07' },
    { id: 9, name: 'Enéas Kwadwo', registered: '2022/03/19', role: 'Member', status: 'Pending' },
    { id: 10, name: 'Agapetus Tadeáš', registered: '2022/01/21' },
    { id: 11, name: 'Carwyn Fachtna', registered: '2022/01/01' },
    { id: 12, name: 'Nehemiah Tatius', registered: '2022/02/07' },
    { id: 13, name: 'Ebbe Gemariah', registered: '2022/02/07' },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      registered: '2022/03/19',
    },
    { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21' },
    { id: 16, name: 'Pompeius René', registered: '2022/01/01' },
    { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07' },
    {
      id: 18,
      name: 'Micheal Mercurius',
      registered: '2022/02/07',
    },
    {
      id: 19,
      name: 'Ganesha Dubhghall',
      registered: '2022/03/19',
    },
    { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21' },
    { id: 21, name: 'Vishnu Serghei', registered: '2022/01/01' },
    { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07' },
    {
      id: 23,
      name: 'Aulus Agmundr',
      registered: '2022/01/01',
    },
    {
      id: 42,
      name: 'Ford Prefect',
      registered: '2022/05/25',
    },
  ]
  const [startDate, setStartDate] = useState(new Date('2022-01-21'))
  const [endDate, setEndDate] = useState(new Date('2022-02-07'))
  const minDate = new Date(Math.min(...items.map((element) => Date.parse(element.registered))))
  const maxDate = new Date(Math.max(...items.map((element) => Date.parse(element.registered))))
  const columns: Column[] = [
    {
      key: 'name',
      _style: { width: '50%' },
    },
    {
      key: 'registered',
      _style: { width: '50%' },
      filter: (_, onChange) => {
        return (
          <CDateRangePicker
            footer
            size="sm"
            startDate={startDate}
            endDate={endDate}
            minDate={minDate}
            maxDate={maxDate}
            onStartDateChange={(date: Date) => {
              setStartDate(date)
              onChange((value: string) => {
                if (date) {
                  const itemDate = new Date(Date.parse(value))
                  return endDate ? itemDate >= date && itemDate <= endDate : itemDate >= date
                }
                return true
              })
            }}
            onEndDateChange={(date: Date) => {
              setEndDate(date)
              onChange((value: string) => {
                if (date) {
                  const itemDate = new Date(Date.parse(value))
                  return startDate ? itemDate <= date && itemDate >= startDate : itemDate <= date
                }
                return true
              })
            }}
          />
        )
      },
    },
  ]
  const convertToDate = (date: string) => {
    const _date = new Date(Date.parse(date))
    return _date.toLocaleDateString()
  }
  return (
    <CSmartTable
      columns={columns}
      columnFilter
      columnFilterValue={{
        registered: (date: string) =>
          new Date(Date.parse(date)) >= startDate && new Date(Date.parse(date)) <= endDate,
      }}
      columnSorter
      items={items}
      itemsPerPageSelect
      itemsPerPage={5}
      pagination
      scopedColumns={{
        registered: (item: Item) => <td>{convertToDate(item.registered)}</td>,
      }}
    />
  )
}
```

#### Multi Select

Here is an example of how you might use the `` component to apply custom filters to a React DataTable:

```html
import React from 'react'
import { CMultiSelect, CSmartTable } from '@coreui/react-pro'
import type { Column } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableCustomFilterMultiSelectExample = () => {
  const columns: Column[] = [
    {
      key: 'name',
      _style: { width: '50%' },
    },
    {
      key: 'role',
      _style: { width: '50%' },
      filter: (values, onChange) => {
        const unique = [...new Set(values)].toSorted()
        return (
          <CMultiSelect
            size="sm"
            onChange={(selected) => {
              const _selected = selected.map((element) => {
                return element.value
              })
              onChange((value: string) => {
                return Array.isArray(_selected) && _selected.length > 0
                  ? _selected.includes(value.toLowerCase())
                  : true
              })
            }}
            options={unique.map((element) => {
              return {
                value: element.toLowerCase(),
                label: element,
              }
            })}
          />
        )
      },
      sorter: false,
    },
  ]
  const items = [
    { id: 0, name: 'John Doe', role: 'Guest' },
    {
      id: 1,
      name: 'Samppa Nori',
      role: 'Member',
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      role: 'Staff',
    },
    { id: 3, name: 'Chetan Mohamed', role: 'Admin' },
    {
      id: 4,
      name: 'Derick Maximinus',
      role: 'Member',
    },
    { id: 5, name: 'Friderik Dávid', role: 'Staff' },
    { id: 6, name: 'Yiorgos Avraamu', role: 'Member' },
    {
      id: 7,
      name: 'Avram Tarasios',
      role: 'Staff',
    },
    { id: 8, name: 'Quintin Ed', role: 'Admin' },
    { id: 9, name: 'Enéas Kwadwo', role: 'Member' },
    { id: 10, name: 'Agapetus Tadeáš', role: 'Staff' },
    { id: 11, name: 'Carwyn Fachtna', role: 'Member' },
    { id: 12, name: 'Nehemiah Tatius', role: 'Staff' },
    { id: 13, name: 'Ebbe Gemariah', role: 'Admin' },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      role: 'Member',
    },
    { id: 15, name: 'Leopold Gáspár', role: 'Staff' },
    { id: 16, name: 'Pompeius René', role: 'Member' },
    { id: 17, name: 'Paĉjo Jadon', role: 'Staff' },
    {
      id: 18,
      name: 'Micheal Mercurius',
      role: 'Admin',
    },
    {
      id: 19,
      name: 'Ganesha Dubhghall',
      role: 'Member',
    },
    { id: 20, name: 'Hiroto Šimun', role: 'Staff' },
    { id: 21, name: 'Vishnu Serghei', role: 'Member' },
    { id: 22, name: 'Zbyněk Phoibos', role: 'Staff' },
    {
      id: 23,
      name: 'Aulus Agmundr',
      role: 'Member',
    },
    {
      id: 42,
      name: 'Ford Prefect',
      role: 'Alien',
    },
  ]
  return (
    <CSmartTable
      columns={columns}
      columnFilter
      columnSorter
      items={items}
      itemsPerPageSelect
      itemsPerPage={10}
      pagination
    />
  )
}
```

## Data sources

You can use Fetch API to load data from different sources and then pass them to `<CSmartTable>`

### External Data (10.000+ records)

One of the key features of React Smart Table (React DataTables) is the ability to load data from an external source, such as an API or a server-side script.
This can be useful if you have a large amount of data that you don't want to load all at once. To load external data into a React Smart Table (React DataTables), you can use the Fetch API to the data source.

Here is an example of how you might use React Smart Table with external data:

```html
import React, { useEffect, useState } from 'react'
import { CSmartTable } from '@coreui/react-pro'

import type { ColumnFilterValue, SorterValue } from '@coreui/react-pro/components/smart-table/types'

export const SmartTableExternalDataExample = () => {
  const [activePage, setActivePage] = useState(3)
  const [columnFilter, setColumnFilter] = useState<ColumnFilterValue>({})
  const [columnSorter, setColumnSorter] = useState<SorterValue | undefined>({
    column: 'country',
    state: 'asc',
  })
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])
  const [records, setRecords] = useState(0)

  const columns = [
    { key: 'first_name', _style: { minWidth: '130px' } },
    { key: 'last_name', _style: { minWidth: '130px' } },
    'email',
    { key: 'country', _style: { minWidth: '120px' } },
    { key: 'ip_address', label: 'IP' },
  ]

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true)
        const offset = (activePage - 1) * itemsPerPage
        const params = new URLSearchParams()

        Object.keys(columnFilter).forEach((key) => {
          params.append(key, columnFilter[key])
        })

        if (columnSorter?.column) {
          params.append('sort', `${columnSorter.column}%${columnSorter.state}`)
        }

        const response = await fetch(
          `https://apitest.coreui.io/demos/users?offset=${offset}&limit=${itemsPerPage}&${params}`
        )

        const result = await response.json()

        setRecords(result.number_of_matching_records)
        setUsers(result.number_of_matching_records ? result.records : [])
      } catch (error) {
        console.error('Error fetching users:', error)
        setUsers([]) // Optionally show an error state
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [activePage, columnFilter, columnSorter, itemsPerPage])

  return (
    <CSmartTable
      columns={columns}
      columnFilter={{ external: true }}
      columnSorter={{ external: true }}
      footer
      items={users}
      itemsPerPage={itemsPerPage}
      itemsPerPageSelect
      loading={loading}
      pagination={{
        external: true,
      }}
      paginationProps={{
        activePage,
        pages: records > 0 ? Math.ceil(records / itemsPerPage) : 1,
      }}
      sorterValue={columnSorter}
      tableProps={{
        hover: true,
        responsive: true,
      }}
      onActivePageChange={(page) => setActivePage(page)}
      onColumnFilterChange={(filter) => {
        setActivePage(1)
        setColumnFilter(filter)
      }}
      onItemsPerPageChange={(pageSize) => {
        setActivePage(1)
        setItemsPerPage(pageSize)
      }}
      onSorterChange={(value: SorterValue) => setColumnSorter(value)}
    />
  )
}
```

### JSON (10.000+ records)

The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located.
In this example, the `fetch()` method is used to make a GET request to the endpoint `https://apitest.coreui.io/fake_data/users.json`, which returns a response.
The `response.json()` method is then used to parse the response as a JSON object.
The resulting JSON object is stored in the `users` and loaded by ``.

```html
import React, { useEffect, useState } from 'react'
import { CSmartTable } from '@coreui/react-pro'

export const SmartTableJSONDataExample = () => {
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])

  const columns = [
    { key: 'first_name', _style: { minWidth: '130px' } },
    { key: 'last_name', _style: { minWidth: '130px' } },
    'email',
    { key: 'country', _style: { minWidth: '120px' } },
    { key: 'ip_address', label: 'IP' },
  ]

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true)
        const response = await fetch('https://apitest.coreui.io/fake_data/users.json')
        const result = await response.json()
        setUsers(result)
      } catch (error) {
        console.error('Error fetching user data:', error)
        setUsers([]) // Optionally handle error state
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  return (
    <CSmartTable
      columns={columns}
      columnFilter
      columnSorter
      footer
      items={users}
      itemsPerPageSelect
      loading={loading}
      pagination
      tableProps={{
        hover: true,
        responsive: true,
      }}
    />
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CSmartTable /&gt;](./api/#csmarttable)


---

# React Spinner Component

> Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.

## About

CoreUI "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.

For accessibility purposes, each loader here includes `role="status"` and a nested `<span className="visually-hidden">Loading...</span>`.

## Border spinner

Use the border spinners for a lightweight loading indicator.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderExample = () => {
  return <CSpinner />
}
```

### Colors

The border spinner uses `currentColor` for its `border-color`. You can use any of our text color utilities on the standard spinner.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderColorsExample = () => {
  return (
    <>
      <CSpinner color="primary" />
      <CSpinner color="secondary" />
      <CSpinner color="success" />
      <CSpinner color="danger" />
      <CSpinner color="warning" />
      <CSpinner color="info" />
      <CSpinner color="light" />
      <CSpinner color="dark" />
    </>
  )
}
```

## Growing spinner

If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerGrowExample = () => {
  return <CSpinner variant="grow" />
}
```

Once again, this spinner is built with `currentColor`, so you can easily change its appearance. Here it is in blue, along with the supported variants.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerGrowColorsExample = () => {
  return (
    <>
      <CSpinner color="primary" variant="grow" />
      <CSpinner color="secondary" variant="grow" />
      <CSpinner color="success" variant="grow" />
      <CSpinner color="danger" variant="grow" />
      <CSpinner color="warning" variant="grow" />
      <CSpinner color="info" variant="grow" />
      <CSpinner color="light" variant="grow" />
      <CSpinner color="dark" variant="grow" />
    </>
  )
}
```

## Alignment

CoreUI React spinners are built with `rems`, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.

### Margin

Use [margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing/#margin-and-padding) like `.m-5` for easy spacing.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderMarginExample = () => {
  return <CSpinner className="m-5" />
}
```

### Placement

Use [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/), [float utilities](https://coreui.io/bootstrap/docs/utilities/float/), or [text alignment](https://coreui.io/bootstrap/docs/utilities/text/) utilities to place spinners exactly where you need them in any situation.

#### Flex

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFlexExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CSpinner />
    </div>
  )
}
```

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFlex2Example = () => {
  return (
    <div className="d-flex align-items-center">
      <strong role="status">Loading...</strong>
      <CSpinner className="ms-auto" />
    </div>
  )
}
```

#### Floats

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFloatsExample = () => {
  return (
    <div className="clearfix">
      <CSpinner className="float-end" />
    </div>
  )
}
```

#### Text align

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementTextAlignExample = () => {
  return (
    <div className="text-center">
      <CSpinner />
    </div>
  )
}
```

## Size

Add `size="sm"` property to make a smaller spinner that can quickly be used within other components.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerSizeSmallExample = () => {
  return (
    <>
      <CSpinner size="sm" />
      <CSpinner size="sm" variant="grow" />
    </>
  )
}
```

Or, use custom CSS or inline styles to change the dimensions as needed.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerSizeCustomExample = () => {
  return (
    <>
      <CSpinner style={{ width: '3rem', height: '3rem' }} />
      <CSpinner variant="grow" style={{ width: '3rem', height: '3rem' }} />
    </>
  )
}
```

## Buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

```html
import React from 'react'
import { CButton, CSpinner } from '@coreui/react'

export const SpinnerButtonsExample = () => {
  return (
    <>
      <CButton color="primary" disabled>
        <CSpinner as="span" size="sm" aria-hidden="true" />
        <span className="visually-hidden" role="status">
          Loading...
        </span>
      </CButton>
      <CButton color="primary" disabled>
        <CSpinner as="span" className="me-2" size="sm" aria-hidden="true" />
        <span role="status">Loading...</span>
      </CButton>
    </>
  )
}
```

```html
import React from 'react'
import { CButton, CSpinner } from '@coreui/react'

export const SpinnerButtons2Example = () => {
  return (
    <>
      <CButton color="primary" disabled>
        <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
        <span className="visually-hidden" role="status">
          Loading...
        </span>
      </CButton>
      <CButton color="primary" disabled>
        <CSpinner as="span" className="me-2" size="sm" variant="grow" aria-hidden="true" />
        <span role="status">Loading...</span>
      </CButton>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CSpinner /&gt;](./api/#cspinner)


---

# React Table Component

> Documentation and examples for opt-in styling of tables.

## How to use React Table Component

Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's react tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.

Using the most basic table CoreUI, here's how `<CTable>`-based tables look in CoreUI.

```html
import { CTable } from '@coreui/react'

export const TableExample = (props) => {
  const columns = [
    {
      key: 'id',
      label: '#',
      _props: { scope: 'col' },
    },
    {
      key: 'class',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_1',
      label: 'Heading',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_2',
      label: 'Heading',
      _props: { scope: 'col' },
    },
  ]
  const items = [
    {
      id: 1,
      class: 'Mark',
      heading_1: 'Otto',
      heading_2: '@mdo',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 2,
      class: 'Jacob',
      heading_1: 'Thornton',
      heading_2: '@fat',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 3,
      class: 'Larry the Bird',
      heading_2: '@twitter',
      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
    },
  ]
  return <CTable columns={columns} items={items} {...props} />
}
```

In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
  },
]
return <CTable columns={columns} items={items} />
```

You can also put all table components together manually as hitherto.

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">2</CTableHeaderCell>
      <CTableDataCell>Jacob</CTableDataCell>
      <CTableDataCell>Thornton</CTableDataCell>
      <CTableDataCell>@fat</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

Both methods produce the same html code.

## Variants

Use contextual classes to color react tables, table rows or individual cells.

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">Default</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="primary">
      <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="secondary">
      <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="success">
      <CTableHeaderCell scope="row">Success</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="danger">
      <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="warning">
      <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="info">
      <CTableHeaderCell scope="row">Info</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="light">
      <CTableHeaderCell scope="row">Light</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="dark">
      <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

Since version **4.3.0** also this way.

```jsx
const columns = [
  { key: 'class', _props: { scope: 'col' } },
  { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
  { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const items = [
  {
    class: 'Default',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
  },
  {
    class: 'Primary',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'primary' },
  },
  {
    class: 'Secondary',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'secondary' },
  },
  {
    class: 'Success',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'success' },
  },
  {
    class: 'Danger',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'danger' },
  },
  {
    class: 'Warning',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'warning' },
  },
  {
    class: 'Info',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'info' },
  },
  {
    class: 'Light',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'light' },
  },
  {
    class: 'Dark',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'dark' },
  },
]
return <CTable columns={columns} items={items} />
```

## Accented tables

### Striped rows

Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.

```jsx
<CTable striped>
  ...
</CTable>
```

### Striped columns

Use `stripedColumns` boolean property to add zebra-striping to any table column.

```jsx
<CTable stripedColumns>
  ...
</CTable>
```

These classes can also be added to react table variants:

```jsx
<CTable color="dark" striped>
  ...
</CTable>
```

```jsx
<CTable color="dark" stripedColumns>
  ...
</CTable>
```

```jsx
<CTable color="success" striped>
  ...
</CTable>
```

```jsx
<CTable color="success" stripedColumns>
  ...
</CTable>
```

### Hoverable rows

Use `hover` property to enable a hover state on react table rows within a `<CTableBody>`.

```jsx
<CTable hover>
  ...
</CTable>
```

```jsx
<CTable color="dark" hover>
  ...
</CTable>
```

These hoverable rows can also be combined with the striped variant:

```jsx
<CTable striped hover>
  ...
</CTable>
```

### Active tables

Highlight a table row or cell by adding a `active` property.

As mentioned before since version **4.3.0** we have two ways to generate tables, also with custom properties for rows, and cells.

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _props: { active: true },
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
  },
]
return <CTable columns={columns} items={items} />
```

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow active>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">2</CTableHeaderCell>
      <CTableDataCell>Jacob</CTableDataCell>
      <CTableDataCell>Thornton</CTableDataCell>
      <CTableDataCell>@fat</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2} active>
        Larry the Bird
      </CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _props: { active: true },
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
  },
]
return <CTable color="dark" columns={columns} items={items} />
```

## Table borders

### Bordered tables

Add `bordered` property for borders on all sides of the table and cells.

```jsx
<CTable bordered>
  ...
</CTable>
```

[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:

```jsx
<CTable bordered borderColor="primary">
  ...
</CTable>
```

### Tables without borders

Add `borderless` property for a react table without borders.

```jsx
<CTable borderless>
  ...
</CTable>
```

```jsx
<CTable color="dark" borderless>
  ...
</CTable>
```

## Small tables

Add `small` property to make any `<CTable>` more compact by cutting all cell `padding` in half.

```jsx
<CTable small>
  ...
</CTable>
```

## Vertical alignment

Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table cells in `<CTableBody>` inherit their alignment from `<CTable>` and are aligned to the the top by default. Use the align property to re-align where needed.

In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).

```jsx
const columns = [
  {
    key: 'heading_1',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_2',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_3',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_4',
    _props: { className: 'w-25', scope: 'col' },
  },
]
const items = [
  {
    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
  },
  {
    heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
    _props: { align: 'bottom' }
  },
  {
    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_3: 'This cell is aligned to the top.',
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
      _cellProps: { heading_3: { align: 'top' }},
  },
]
return <CTable align="middle" columns={columns} items={items} />
```

You can also put all table components together manually as hitherto.

```jsx
<CTable align="middle" responsive>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 1
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 2
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 3
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 4
      </CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
    <CTableRow align="bottom">
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

## Nesting

Border styles, active styles, and react table component variants are not inherited by nested tables.

```jsx
<CTable striped>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell colSpan={4}>
        <CTable>
          <CTableHead>
            <CTableRow>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
            </CTableRow>
          </CTableHead>
          <CTableBody>
            <CTableRow>
              <CTableHeaderCell scope="row">A</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
            <CTableRow>
              <CTableHeaderCell scope="row">B</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
            <CTableRow>
              <CTableHeaderCell scope="row">C</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
          </CTableBody>
        </CTable>
      </CTableHeaderCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

## Anatomy

### Table head

Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make `<CTableHead>`s appear light or dark gray.

```jsx
<CTable>
  <CTableHead color="light">
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

If you generate a table using the new method incorporated in version **4.3.0**, you have to use `tableHeadProps` property to pass properties to the table header component.

```jsx
const columns = [...]
const items = [...]

return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light' }} />
```

```jsx
<CTable>
  <CTableHead color="dark">
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable columns={columns} items={items} tableHeadProps={{ color: 'dark' }} />
```

### Table foot

```jsx
<CTable>
  <CTableHead color="light">
    ...
  </CTableHead>
  <CTableBody>
    ...
  <CTableHead>
    <CTableRow>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
    </CTableRow>
  </CTableHead>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const footer = [
  'Footer',
  'Footer',
  'Footer',
  'Footer',
]
const items = [...]

return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
```

### Captions

A `<CTableCaption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

```jsx
<CTable>
  <CTableCaption>List of users</CTableCaption>
  <CTableHead>
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable caption="List of users" columns={columns} items={items} />
```

You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.

```jsx
<CTable caption="top">
  <CTableCaption>List of users</CTableCaption>
  <CTableHead>
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Since version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable captionTop="List of users" columns={columns} items={items} />
```

## Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`.

```jsx
<CTable responsive>
  ...
</CTable>
```

```jsx
<CTable responsive="sm">
  ...
</CTable>
```

```jsx
<CTable responsive="md">
  ...
</CTable>
```

```jsx
<CTable responsive="lg">
  ...
</CTable>
```

```jsx
<CTable responsive="xl">
  ...
</CTable>
```

```jsx
<CTable responsive="xxl">
  ...
</CTable>
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CTable /&gt;](./api/#ctable)
- [&lt;CTableBody /&gt;](./api/#ctablebody)
- [&lt;CTableDataCell /&gt;](./api/#ctabledatacell)
- [&lt;CTableFoot /&gt;](./api/#ctablefoot)
- [&lt;CTableHead /&gt;](./api/#ctablehead)
- [&lt;CTableHeaderCell /&gt;](./api/#ctableheadercell)
- [&lt;CTableRow /&gt;](./api/#ctablerow)


---

# React Tabs Components

> The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.

## Example

The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList variant="tabs">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

## Available styles

Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.

### Unstyled

If you don’t provide the `variant` prop, the component will default to a basic style.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList>
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Pills

Take that same code, but use `variant="pills"` instead:

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsPillsExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="pills">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Underline

Take that same code, but use `variant="underline"` instead:

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnderlineExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="underline">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Underline border

Take that same code, but use `variant="underline-border"` instead:

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnderlineBorderExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="underline-border">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Enclosed

Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsEnclosedExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList variant="enclosed">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Enclosed pills 

Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsEnclosedPillsExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList variant="enclosed-pills">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Fill and justify

Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledFillAndJustifyExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="tabs" layout="fill">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile tab with longer content
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledFillAndJustify2Example = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="tabs" layout="justified">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `<CTabs>` component, with a clear example:

---

## Controlled Tabs

Use the `activeItemKey` prop to control which tab is currently active. In this mode, the parent component is responsible for managing the active state and responding to user interactions via the `onChange` callback.

This is useful when you need to synchronize the tab state with your application logic, such as routing or complex UI state management.

**Key Points**

- `activeItemKey` sets the currently active tab.
- `onChange` receives the new `itemKey` when a tab is clicked.
- You must manually update `activeItemKey` in your state based on `onChange`.

> 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead.

```html
import React, { useState } from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsControlledExample = () => {
  const [activeTab, setActiveTab] = useState<number | string>('profile')

  return (
    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
      <CTabList variant="tabs">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

## Accessibility

Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

### WAI-ARIA Roles

- The element that serves as the container for the set of tabs has the role `tablist`.
- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
- Each element that contains the content panel for a tab has the role `tabpanel`.
- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.

Our React Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:

```jsx
<CTabs activeItemKey={2}>
  <CTabList variant="tabs">
    <CTab id="home-tab" aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
    <CTab id="profile-tab" aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
    <CTab id="contact-tab" aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
  </CTabList>
  <CTabContent>
    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" itemKey={1}>
      Home tab content
    </CTabPanel>
    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" itemKey={2}>
      Profile tab content
    </CTabPanel>
    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" itemKey={3}>
      Contact tab content
    </CTabPanel>
    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" itemKey={4}>
      Disabled tab content
    </CTabPanel>
  </CTabContent>
</CTabs>
```

This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.

### Keyboard Interaction

**When focus enters the tab list:**

<kbd>Tab</kbd>: It places focus on the active `tab` element.

**When focus is on a tab element:**

<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.

<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.

<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.

<kbd>Home</kbd>: Moves focus to the first tab.

<kbd>End</kbd>: Moves focus to the last tab.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CTab /&gt;](./api/#ctab)
- [&lt;CTabContent /&gt;](./api/#ctabcontent)
- [&lt;CTabList /&gt;](./api/#ctablist)
- [&lt;CTabPanel /&gt;](./api/#ctabpanel)
- [&lt;CTabs /&gt;](./api/#ctabs)


---

# React Toast Component

> Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

React toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

## Overview

Things to know when using the toast plugin:

- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
- Toasts will automatically hide if you do not specify `autohide: false`.

## Examples

### Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastExample = () => {
  return (
    <CToast animation={false} autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```

```html
import React, { useRef, useState } from 'react'
import { CButton, CToast, CToastBody, CToaster, CToastHeader } from '@coreui/react'

export const ToastLiveExample = () => {
  const [toast, addToast] = useState<any>()
  const toaster = useRef(null)
  const exampleToast = (
    <CToast>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
  return (
    <>
      <CButton color="primary" onClick={() => addToast(exampleToast)}>
        Send a toast
      </CButton>
      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
    </>
  )
}
```

### Translucent

Toasts are slightly translucent to blend in with what's below them.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastTranslucentExample = () => {
  return (
    <CToast autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```

### Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader, CToaster } from '@coreui/react'

export const ToastStackingExample = () => {
  return (
    <CToaster className="position-static">
      <CToast autohide={false} visible={true}>
        <CToastHeader closeButton>
          <svg
            className="rounded me-2"
            width="20"
            height="20"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
            role="img"
          >
            <rect width="100%" height="100%" fill="#007aff"></rect>
          </svg>
          <div className="fw-bold me-auto">CoreUI for React.js</div>
          <small>7 min ago</small>
        </CToastHeader>
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
      </CToast>
      <CToast autohide={false} visible={true}>
        <CToastHeader closeButton>
          <svg
            className="rounded me-2"
            width="20"
            height="20"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
            role="img"
          >
            <rect width="100%" height="100%" fill="#007aff"></rect>
          </svg>
          <div className="fw-bold me-auto">CoreUI for React.js</div>
          <small>7 min ago</small>
        </CToastHeader>
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
      </CToast>
    </CToaster>
  )
}
```

### Custom content

Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/bootstrap/docs/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://coreui.io/icons/), and using some [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex) to adjust the layout.

```html
import React from 'react'
import { CToast, CToastBody, CToastClose } from '@coreui/react'

export const ToastCustomContentExample = () => {
  return (
    <CToast autohide={false} visible={true} className="align-items-center">
      <div className="d-flex">
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
        <CToastClose className="me-2 m-auto" />
      </div>
    </CToast>
  )
}
```

Alternatively, you can also add additional controls and components to toasts.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastCustomContent2Example = () => {
  return (
    <CToast animation={false} autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```

### Color schemes

Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/bootstrap/docs/utilities/colors) and [background](https://coreui.io/bootstrap/docs//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.

```html
import React from 'react'
import { CToast, CToastBody, CToastClose } from '@coreui/react'

export const ToastColorSchemesExample = () => {
  return (
    <CToast
      autohide={false}
      visible={true}
      color="primary"
      className="text-white align-items-center"
    >
      <div className="d-flex">
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
        <CToastClose className="me-2 m-auto" white />
      </div>
    </CToast>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CToast /&gt;](./api/#ctoast)
- [&lt;CToastHeader /&gt;](./api/#ctoastheader)
- [&lt;CToastBody /&gt;](./api/#ctoastbody)
- [&lt;CToastClose /&gt;](./api/#ctoastclose)
- [&lt;CToaster /&gt;](./api/#ctoaster)


---

# React Tooltip Component

> Documentation and examples for adding React Tooltips.

## Examples

### Tooltips on links

Hover over the links below to see tooltips:

```html
import React from 'react'
import { CLink, CTooltip } from '@coreui/react'

export const TooltipOnLinksExample = () => {
  return (
    <p className="text-body-secondary">
      Tight pants next level keffiyeh
      <CTooltip content="Tooltip text">
        <CLink> you probably </CLink>
      </CTooltip>
      haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger bag
      stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit american
      apparel
      <CTooltip content="Tooltip text">
        <CLink> have a </CLink>
      </CTooltip>
      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
      biodiesel williamsburg marfa, four loko mcsweeney&#39;s cleanse vegan chambray. A really
      ironic artisan
      <CTooltip content="Tooltip text">
        <CLink> whatever keytar </CLink>
      </CTooltip>
      scenester farm-to-table banksy Austin
      <CTooltip content="Tooltip text">
        <CLink> twitter handle </CLink>
      </CTooltip>
      freegan cred raw denim single-origin coffee viral.
    </p>
  )
}
```

### Custom tooltips

You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipCustomExample = () => {
  const customTooltipStyle = {
    '--cui-tooltip-bg': 'var(--cui-primary)',
  } as React.CSSProperties

  return (
    <CTooltip
      content="This top tooltip is themed via CSS variables."
      placement="top"
      style={customTooltipStyle}
    >
      <CButton color="secondary">Custom tooltip</CButton>
    </CTooltip>
  )
}
```

### Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDirectionsExample = () => {
  return (
    <>
      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <CButton color="secondary">Tooltip on top</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <CButton color="secondary">Tooltip on right</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <CButton color="secondary">Tooltip on bottom</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="left"
      >
        <CButton color="secondary">Tooltip on left</CButton>
      </CTooltip>
    </>
  )
}
```

## Usage

A shown tooltip can be dismissed by pressing the <kbd>Escape</kbd> key, helping satisfy the [WCAG 1.4.13 "Content on Hover or Focus"](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) success criterion.

### Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDisabledElementsExample = () => {
  return (
    <CTooltip content="Disabled tooltip" trigger={['hover', 'focus']}>
      <span className="d-inline-block" tabIndex={0}>
        <CButton color="primary" disabled>
          Disabled button
        </CButton>
      </span>
    </CTooltip>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CTooltip /&gt;](./api/#ctooltip)


---

# React Virtual Scroller Component

> A virtual scroller is a UI element that allows users to scroll through a list of items without requiring the entire list to be loaded into memory at once. This can be particularly useful for lists that are very large or that contain a lot of data, as it allows the user to view and interact with a subset of the list while the rest of the data is loaded in the background.

Virtual scrollers work by only rendering the items that are currently visible on the screen, and as the user scrolls through the list, new items are dynamically loaded and added to the view. This helps to reduce the amount of data that needs to be loaded and processed at any given time, which can improve the performance and responsiveness of the UI.

## Virtual scroll (10000 Items)

```html
import React, { useState } from 'react'
import { CVirtualScroller } from '@coreui/react-pro'

export const VirtualScrollerExample = () => {
  const [, setIndex] = useState(0)
  return (
    <CVirtualScroller
      className="border p-3 rounded"
      visibleItems={20}
      onScroll={(currentItemIndex) => setIndex(currentItemIndex)}
    >
      {Array.from({ length: 10_000 }, (_, i) => (
        <div key={i}>Option {i + 1}</div>
      ))}
    </CVirtualScroller>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CVirtualScroller /&gt;](./api/#cvirtualscroller)


---

# React Widgets

> React widget components give information about the app statistics.

## CWidgetStatsA

```html
import React from 'react'
import CIcon from '@coreui/icons-react'
import { cilArrowTop, cilOptions } from '@coreui/icons'
import { CChartBar, CChartLine } from '@coreui/react-chartjs'

import {
  CCol,
  CDropdown,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CRow,
  CWidgetStatsA,
} from '@coreui/react'

export const WidgetStatsAExample = () => {
  return (
    <CRow>
      <CCol sm={6}>
        <CWidgetStatsA
          className="mb-4"
          color="primary"
          value={
            <>
              $9.000{' '}
              <span className="fs-6 fw-normal">
                (40.9% <CIcon icon={cilArrowTop} />)
              </span>
            </>
          }
          title="Widget title"
          action={
            <CDropdown alignment="end">
              <CDropdownToggle color="transparent" caret={false} className="p-0">
                <CIcon icon={cilOptions} className="text-white" />
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>Action</CDropdownItem>
                <CDropdownItem>Another action</CDropdownItem>
                <CDropdownItem>Something else here...</CDropdownItem>
                <CDropdownItem disabled>Disabled action</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          }
          chart={
            <CChartLine
              className="mt-3 mx-3"
              style={{ height: '70px' }}
              data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    label: 'My First dataset',
                    backgroundColor: 'transparent',
                    borderColor: 'rgba(255,255,255,.55)',
                    pointBackgroundColor: '#5856d6',
                    data: [65, 59, 84, 84, 51, 55, 40],
                  },
                ],
              }}
              options={{
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                maintainAspectRatio: false,
                scales: {
                  x: {
                    border: {
                      display: false,
                    },
                    grid: {
                      display: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                  y: {
                    min: 30,
                    max: 89,
                    display: false,
                    grid: {
                      display: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                },
                elements: {
                  line: {
                    borderWidth: 1,
                    tension: 0.4,
                  },
                  point: {
                    radius: 4,
                    hitRadius: 10,
                    hoverRadius: 4,
                  },
                },
              }}
            />
          }
        />
      </CCol>
      <CCol sm={6}>
        <CWidgetStatsA
          className="mb-4"
          color="info"
          value={
            <>
              $9.000{' '}
              <span className="fs-6 fw-normal">
                (40.9% <CIcon icon={cilArrowTop} />)
              </span>
            </>
          }
          title="Widget title"
          action={
            <CDropdown alignment="end">
              <CDropdownToggle color="transparent" caret={false} className="p-0">
                <CIcon icon={cilOptions} className="text-white" />
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>Action</CDropdownItem>
                <CDropdownItem>Another action</CDropdownItem>
                <CDropdownItem>Something else here...</CDropdownItem>
                <CDropdownItem disabled>Disabled action</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          }
          chart={
            <CChartLine
              className="mt-3 mx-3"
              style={{ height: '70px' }}
              data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    label: 'My First dataset',
                    backgroundColor: 'transparent',
                    borderColor: 'rgba(255,255,255,.55)',
                    pointBackgroundColor: '#39f',
                    data: [1, 18, 9, 17, 34, 22, 11],
                  },
                ],
              }}
              options={{
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                maintainAspectRatio: false,
                scales: {
                  x: {
                    border: {
                      display: false,
                    },
                    grid: {
                      display: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                  y: {
                    min: -9,
                    max: 39,
                    display: false,
                    grid: {
                      display: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                },
                elements: {
                  line: {
                    borderWidth: 1,
                  },
                  point: {
                    radius: 4,
                    hitRadius: 10,
                    hoverRadius: 4,
                  },
                },
              }}
            />
          }
        />
      </CCol>
      <CCol sm={6}>
        <CWidgetStatsA
          className="mb-4"
          color="warning"
          value={
            <>
              $9.000{' '}
              <span className="fs-6 fw-normal">
                (40.9% <CIcon icon={cilArrowTop} />)
              </span>
            </>
          }
          title="Widget title"
          action={
            <CDropdown alignment="end">
              <CDropdownToggle color="transparent" caret={false} className="p-0">
                <CIcon icon={cilOptions} className="text-white" />
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>Action</CDropdownItem>
                <CDropdownItem>Another action</CDropdownItem>
                <CDropdownItem>Something else here...</CDropdownItem>
                <CDropdownItem disabled>Disabled action</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          }
          chart={
            <CChartLine
              className="mt-3"
              style={{ height: '70px' }}
              data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    label: 'My First dataset',
                    backgroundColor: 'rgba(255,255,255,.2)',
                    borderColor: 'rgba(255,255,255,.55)',
                    data: [78, 81, 80, 45, 34, 12, 40],
                    fill: true,
                  },
                ],
              }}
              options={{
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                maintainAspectRatio: false,
                scales: {
                  x: {
                    display: false,
                  },
                  y: {
                    display: false,
                  },
                },
                elements: {
                  line: {
                    borderWidth: 2,
                    tension: 0.4,
                  },
                  point: {
                    radius: 0,
                    hitRadius: 10,
                    hoverRadius: 4,
                  },
                },
              }}
            />
          }
        />
      </CCol>
      <CCol sm={6}>
        <CWidgetStatsA
          className="mb-4"
          color="danger"
          value={
            <>
              $9.000{' '}
              <span className="fs-6 fw-normal">
                (40.9% <CIcon icon={cilArrowTop} />)
              </span>
            </>
          }
          title="Widget title"
          action={
            <CDropdown alignment="end">
              <CDropdownToggle color="transparent" caret={false} className="p-0">
                <CIcon icon={cilOptions} className="text-white" />
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>Action</CDropdownItem>
                <CDropdownItem>Another action</CDropdownItem>
                <CDropdownItem>Something else here...</CDropdownItem>
                <CDropdownItem disabled>Disabled action</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          }
          chart={
            <CChartBar
              className="mt-3 mx-3"
              style={{ height: '70px' }}
              data={{
                labels: [
                  'January',
                  'February',
                  'March',
                  'April',
                  'May',
                  'June',
                  'July',
                  'August',
                  'September',
                  'October',
                  'November',
                  'December',
                  'January',
                  'February',
                  'March',
                  'April',
                ],
                datasets: [
                  {
                    label: 'My First dataset',
                    backgroundColor: 'rgba(255,255,255,.2)',
                    borderColor: 'rgba(255,255,255,.55)',
                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                    barPercentage: 0.6,
                  },
                ],
              }}
              options={{
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                scales: {
                  x: {
                    grid: {
                      display: false,
                      drawTicks: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                  y: {
                    border: {
                      display: false,
                    },
                    grid: {
                      display: false,
                      drawTicks: false,
                    },
                    ticks: {
                      display: false,
                    },
                  },
                },
              }}
            />
          }
        />
      </CCol>
    </CRow>
  )
}
```

## CWidgetStatsB

```html
import React from 'react'
import { CCol, CRow, CWidgetStatsB } from '@coreui/react'

export const WidgetStatsBExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsB
          className="mb-3"
          progress={{ color: 'success', value: 75 }}
          text="Widget helper text"
          title="Widget title"
          value="89.9%"
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsB
          className="mb-3"
          color="primary"
          inverse
          progress={{ value: 75 }}
          text="Widget helper text"
          title="Widget title"
          value="89.9%"
        />
      </CCol>
    </CRow>
  )
}
```

## CWidgetStatsC

```html
import React from 'react'
import CIcon from '@coreui/icons-react'
import { cilChartPie } from '@coreui/icons'
import { CCol, CRow, CWidgetStatsC } from '@coreui/react'

export const WidgetStatsCExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsC
          className="mb-3"
          icon={<CIcon icon={cilChartPie} height={36} />}
          progress={{ color: 'success', value: 75 }}
          title="Widget title"
          value="89.9%"
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsC
          className="mb-3"
          icon={<CIcon icon={cilChartPie} height={36} />}
          color="primary"
          inverse
          progress={{ value: 75 }}
          title="Widget title"
          value="89.9%"
        />
      </CCol>
    </CRow>
  )
}
```

## CWidgetStatsD

```html
import React from 'react'
import CIcon from '@coreui/icons-react'
import { cibFacebook, cibTwitter } from '@coreui/icons'
import { CChartLine } from '@coreui/react-chartjs'

import { CCol, CRow, CWidgetStatsD } from '@coreui/react'

export const WidgetStatsDExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsD
          className="mb-3"
          icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
          chart={
            <CChartLine
              className="position-absolute w-100 h-100"
              data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    backgroundColor: 'rgba(255,255,255,.1)',
                    borderColor: 'rgba(255,255,255,.55)',
                    pointHoverBackgroundColor: '#fff',
                    borderWidth: 2,
                    data: [65, 59, 84, 84, 51, 55, 40],
                    fill: true,
                  },
                ],
              }}
              options={{
                elements: {
                  line: {
                    tension: 0.4,
                  },
                  point: {
                    radius: 0,
                    hitRadius: 10,
                    hoverRadius: 4,
                    hoverBorderWidth: 3,
                  },
                },
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                scales: {
                  x: {
                    display: false,
                  },
                  y: {
                    display: false,
                  },
                },
              }}
            />
          }
          style={{ '--cui-card-cap-bg': '#3b5998' } as React.CSSProperties}
          values={[
            { title: 'friends', value: '89K' },
            { title: 'feeds', value: '459' },
          ]}
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsD
          className="mb-3"
          icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
          chart={
            <CChartLine
              className="position-absolute w-100 h-100"
              data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    backgroundColor: 'rgba(255,255,255,.1)',
                    borderColor: 'rgba(255,255,255,.55)',
                    pointHoverBackgroundColor: '#fff',
                    borderWidth: 2,
                    data: [1, 13, 9, 17, 34, 41, 38],
                    fill: true,
                  },
                ],
              }}
              options={{
                elements: {
                  line: {
                    tension: 0.4,
                  },
                  point: {
                    radius: 0,
                    hitRadius: 10,
                    hoverRadius: 4,
                    hoverBorderWidth: 3,
                  },
                },
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                scales: {
                  x: {
                    display: false,
                  },
                  y: {
                    display: false,
                  },
                },
              }}
            />
          }
          style={{ '--cui-card-cap-bg': '#00aced' } as React.CSSProperties}
          values={[
            { title: 'folowers', value: '973K' },
            { title: 'tweets', value: '1.792' },
          ]}
        />
      </CCol>
    </CRow>
  )
}
```

## CWidgetStatsE

```html
import React from 'react'
import { CChartBar, CChartLine } from '@coreui/react-chartjs'

import { CCol, CRow, CWidgetStatsE } from '@coreui/react'

export const WidgetStatsEExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsE
          className="mb-3"
          chart={
            <CChartBar
              className="mx-auto"
              style={{ height: '40px', width: '80px' }}
              data={{
                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
                datasets: [
                  {
                    backgroundColor: '#321fdb',
                    borderColor: 'transparent',
                    borderWidth: 1,
                    data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
                  },
                ],
              }}
              options={{
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                scales: {
                  x: {
                    display: false,
                  },
                  y: {
                    display: false,
                  },
                },
              }}
            />
          }
          title="Widget title"
          value="89.9%"
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsE
          className="mb-3"
          chart={
            <CChartLine
              className="mx-auto"
              style={{ height: '40px', width: '80px' }}
              data={{
                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
                datasets: [
                  {
                    backgroundColor: 'transparent',
                    borderColor: '#321fdb',
                    borderWidth: 2,
                    data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
                  },
                ],
              }}
              options={{
                maintainAspectRatio: false,
                elements: {
                  line: {
                    tension: 0.4,
                  },
                  point: {
                    radius: 0,
                  },
                },
                plugins: {
                  legend: {
                    display: false,
                  },
                },
                scales: {
                  x: {
                    display: false,
                  },
                  y: {
                    display: false,
                  },
                },
              }}
            />
          }
          title="Widget title"
          value="89.9%"
        />
      </CCol>
    </CRow>
  )
}
```

## CWidgetStatsF

```html
import React from 'react'
import CIcon from '@coreui/icons-react'
import { cilArrowRight, cilChartPie } from '@coreui/icons'
import { CCol, CLink, CRow, CWidgetStatsF } from '@coreui/react'

export const WidgetStatsFExample = () => {
  return (
    <>
      <CRow>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="primary"
            icon={<CIcon icon={cilChartPie} height={24} />}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="warning"
            icon={<CIcon icon={cilChartPie} height={24} />}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
      </CRow>
      <CRow>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="primary"
            icon={<CIcon icon={cilChartPie} height={24} />}
            padding={false}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="warning"
            icon={<CIcon icon={cilChartPie} height={24} />}
            padding={false}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
      </CRow>
      <CRow>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="primary"
            footer={
              <CLink
                className="font-weight-bold font-xs text-body-secondary"
                href="https://coreui.io/"
                rel="noopener norefferer"
                target="_blank"
              >
                View more
                <CIcon icon={cilArrowRight} className="float-end" width={16} />
              </CLink>
            }
            icon={<CIcon icon={cilChartPie} height={24} />}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
        <CCol xs={6}>
          <CWidgetStatsF
            className="mb-3"
            color="warning"
            footer={
              <CLink
                className="font-weight-bold font-xs text-body-secondary"
                href="https://coreui.io/"
                rel="noopener norefferer"
                target="_blank"
              >
                View more
                <CIcon icon={cilArrowRight} className="float-end" width={16} />
              </CLink>
            }
            icon={<CIcon icon={cilChartPie} height={24} />}
            title="Widget title"
            value="89.9%"
          />
        </CCol>
      </CRow>
    </>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CWidgetStatsA /&gt;](./api/#cwidgetstatsa)
- [&lt;CWidgetStatsB /&gt;](./api/#cwidgetstatsb)
- [&lt;CWidgetStatsC /&gt;](./api/#cwidgetstatsc)
- [&lt;CWidgetStatsD /&gt;](./api/#cwidgetstatsd)
- [&lt;CWidgetStatsE /&gt;](./api/#cwidgetstatse)
- [&lt;CWidgetStatsF /&gt;](./api/#cwidgetstatsf)


---

# React Templates

> Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement.

## React Admin & Dashboard Templates

Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for React.js, and CoreUI PRO for React.js


---

# Download react templates

> Download CoreUI React Admin Templates to get the source code that lets you customize and create your react-based application.

## Source files

Compile CoreUI React Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:

- Create React App
- React, React Dom, React Router
- Redux
- Sass compiler for compiling your CSS.

<a href="https://coreui.io/product/free-react-admin-template/" className="btn btn-primary">Download</a>

<br/><br/>

### PRO Templates
If you have a valid PRO license you can [re-download](https://coreui.io/download) on our website. In case if your license has been expired, or you don't have a PRO license please visit our [website](https://coreui.io/pricing) to buy one.

<a href="https://coreui.io/download/" className="btn btn-primary">Download PRO</a>&nbsp;
<a href="https://coreui.io/pricing/" className="btn btn-primary">Buy PRO</a>

<br/><br/>

### Clone repo

You can also fork [CoreUI React Admin Template's repository](https://github.com/coreui/coreui-free-react-admin-template.git).

```sh
git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
```

If you have a valid Enterprise subscription you can fork CoreUI PRO Bootstrap Admin Template's repository.

```sh
git clone https://github.com/coreui/coreui-pro-react-admin-template.git my-project
```


---

# React templates installation

> Learn how to use CoreUI React Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.

## Tooling setup

CoreUI React Admin Templates uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our `package.json` includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our admin template locally, you'll need a copy of source files and Node. Follow these steps and you should be ready to rock:

1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
2. If you prefer to use Yarn instead of NPM, you have to [download and install it](https://classic.yarnpkg.com/lang/en/docs/install/)
3. [Download CoreUI React Admin Template](https://coreui.io/product/free-react-admin-template/) or [Download CoreUI PRO React Admin Template](https://coreui.io/download/).
4. Navigate to the root template directory and run `npm install` or `yarn install` to install our local dependencies listed in `package.json`.

When completed, you'll be able to run the various commands provided from the command line.

## Using npm scripts

Our `package.json` includes numerous tasks for developing the project. Run `npm run` or `yarn run` to see all the npm scripts in your terminal. **Primary tasks include:**

| Task | Description |
| --- | --- |
| `npm start` or `yarn start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
| `npm run build` or `yarn build` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer). |
| `npm test` or `yarn test` | Runs tests locally  |

## Sass

CoreUI uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline.

Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.

## Autoprefixer

We uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.

We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See `.browserslistrc`.

## Local template

Here's how to get it started:

1. Run through the [tooling setup](#tooling-setup) above to install all dependencies.
2. From the root template directory, run `npm run start` or `yarn start` in the command line.
3. Open `http://localhost:3000` in your browser, and voilà.

## Troubleshooting

Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install` or `yarn install`.


---

# Customize react templates

> Learn how to theme, customize, and extend CoreUI React Templates with Sass, a boatload of global options.

## Overview

There are multiple ways to customize CoreUI for React. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for React you're using, browser support, and more.

Our two preferred methods are:

1. You can extend our source files.
2. You can override CoreUI’s styles.

## File structure

Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.

Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for React 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/react
│       └── ...
├── src
│   └── scss
│       ├── _custom.scss
│       ├── ...
│       ├── _variables.scss
│       └── ...
└── ...
```

If you use CoreUI PRO version.

```text
your-project/
├── ...
├── node_modules/
│   ├── @coreui/coreui-pro 
│   │   ├── scss
│   │   └── ...
│   └── @coreui/react-pro
│       └── ...
├── src
│   └── scss
│       ├── _custom.scss
│       ├── ...
│       ├── _variables.scss
│       └── ...
└── ...
```

## Variable defaults

Every Sass variable in CoreUI for React 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 CoreUI.

You will find the complete list of CoreUI's variables in `node_modules/@coreui/coreui/scss/_variables.scss` or in `node_modules/@coreui/coreui-pro/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in **Customizing** section ex. [Alerts - Customizing](https://coreui.io/react/docs/components/alert#customizing")

Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for React via npm:

```scss
// _variables.scss

// Default variable overrides
$body-bg: #000;
$body-color: #111;
```

## Custom styles and overrides

In your `custom.scss`, you can put custom code for CoreUI's components or your own styles.

```scss
// _custom.scss

// Additional custom code here
.custom-component {
  border: 2px solid #222;
}
```


---

# React templates contents

> Discover what's included in CoreUI React Admin Template, including our precompiled and source code flavors.

## Project structure

Once downloaded, unzip the compressed folder and you'll see something like this:

**JavaScript based project**

```text
coreui-react-admin-template/
├── public/
├── src/
│   ├── assets/
│   │   ├── brand/
│   │   └── images/
│   ├── components/
│   ├── layout/
│   ├── scss/
│   └── views/
│       ├── base/
│       ├── buttons/
│       ├── css/
│       ├── icons/
│       ├── notifications/
│       ├── App.js
│       ├── App.test.js
│       ├── _nav.js
│       ├── index.js
│       ├── reportWebVitals.js
│       ├── routes.js
│       ├── setupTests.js
│       └── store.js
└── package.json
```

**TypeScript based project**

TypeScript project is available only in PRO version.

```text
coreui-react-admin-template-typescript/
├── public/
├── src/
│   ├── assets/
│   │   ├── brand/
│   │   └── images/
│   ├── components/
│   ├── layout/
│   ├── scss/
│   └── views/
│       ├── base/
│       ├── buttons/
│       ├── css/
│       ├── icons/
│       ├── notifications/
│       ├── App.test.tsx
│       ├── App.tsx
│       ├── _nav.tsx
│       ├── index.tsx
│       ├── react-app-env.d.ts
│       ├── reportWebVitals.ts
│       ├── routes.ts
│       ├── setupTests.ts
│       └── store.ts
└── package.json
```

This is the most basic form of CoreUI React Admin Templates.


---

# Migration to v4

> Track and review changes to the CoreUI for React.js components to help you migrate from v3 to v4.

CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/bootstrap/docs/migration/v4/).

## Components

### CAlert

- Deprecated property `innerRef`.
- Deprecated property `fade`.
- Deprecated property `onShowChange`.
- Deprecated property `closeButton`, use `dismissible` instead of.
- Deprecated property `show`, use `visible` instead of.

### CBadge

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

### CBreadcrumb

- Deprecated property `innerRef`.

#### CBreadcrumbItem

- Deprecated property `innerRef`.

### CButton

- Deprecated property `block`.
- Deprecated property `innerRef`.
- Deprecated property `pressed`.
- Deprecated property `tag`, use `component` instead of.

### CCallout

- Deprecated property `innerRef`.

### CCard

- Deprecated property `innerRef`.
- Deprecated property `accentColor`, use utilities `className="border-top-{#color} border-top-3"` instead of.

#### CCardBody

- Deprecated property `innerRef`.

#### CCardFooter

- Deprecated property `innerRef`.

#### CCardGroup

- Deprecated property `columns`.
- Deprecated property `deck`.
- Deprecated property `innerRef`.

#### CCardHeader

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CCardImg

- **Component renamed to `CCardImg`**
- Deprecated property `variant`, use `orientation` instead of.

#### CCardImgOverlay

- **Component renamed to `CCardImgOverlay`**
- Deprecated property `innerRef`.
- Deprecated property `tag`.

#### CCardSubtitle

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CCardText

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CCardTitle

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

### CCarousel

- Deprecated property `autoSlide`.
- Deprecated property `innerRef`.
- Deprecated property `activeIndex`, use `index` instead of.

#### CCarouselControl

- Component is depracated, use `<CCarousel controls>` instead of. 

#### CCarouselIndicators

- Component is depracated, use `<CCarousel indicators>` instead of. 

#### CCarouselInner

- Component is depracated. 

### CCollapse

- Deprecated property `innerRef`.
- Deprecated property `navbar`.
- Deprecated property `show`, use `visible` instead of.

#### CCreateElement

- Component is depracated. 

### CDropdown

- Deprecated property `innerRef`.
- Deprecated property `inNav`, use `variant="nav-item"` instead of.
- Deprecated property `tag`, use `component` instead of.

#### CDropdownitem

- Deprecated property `color`.
- Deprecated property `divider`.
- Deprecated property `innerRef`.
- Deprecated property `header`.
- Deprecated property `onClick`.
- Deprecated property `tag`, use `component` instead of.

#### CDropdownMenu

- Deprecated property `innerRef`.
- Deprecated property `modifiers`.
- Deprecated property `placement` , use `<CDropdown placement="...">` instead of.
- Deprecated property `show` , use `<CDropdown visible>` instead of.

#### CDropdownToggle

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

### CEmbed

- Component is depracated.

### CFade

- Component is depracated.

### CHeader

- Deprecated property `withSubheader`.
- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.

### CImg

- **Component renamed to `CImage`**
- Deprecated property `block`.
- Deprecated property `innerRef`.
- Deprecated property `fluidGrow`.
- Deprecated property `placeholderColor`.
- Deprecated property `shape`.
- Deprecated property `tag`.

### CJumbotron

- Component is depracated.

### CListGroup

- Deprecated property `accent`.
- Deprecated property `horizontal`, use `layout` instead of.
- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CListGroupItem

- Deprecated property `accent`.
- Deprecated property `action`, use property `component="a"` or `component="button"` instead of. 
- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

### CMedia

- Component is depracated.

### CModal

- Deprecated property `addContentClass`.
- Deprecated property `borderColor`, use utilities `className="border border-{#color}"` instead of.
- Deprecated property `centered`.
- Deprecated property `closeOnBackdrop`.
- Deprecated property `fade`, use `transition` instead of.
- Deprecated property `innerRef`.
- Deprecated property `onClosed`.
- Deprecated property `onOpened`.
- Deprecated property `show`, use `visible` instead of.

#### CModalBody

- Deprecated property `innerRef`.
- Deprecated property `tag`.

#### CModalFooter

- Deprecated property `innerRef`.
- Deprecated property `tag`.

#### CModalHeader

- Deprecated property `innerRef`.
- Deprecated property `tag`.

### CNav

- Deprecated property `inCard`.
- Deprecated property `innerRef`.
- Deprecated property `fill`, use `layout="fill"` instead of.
- Deprecated property `justified`, use `layout="justified"` instead of.
- Deprecated property `tag`, use `component` instead of.

#### CNavItem

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CNavLink

- Deprecated property `innerRef`.

### CNavbar

- Deprecated property `expandable`, use `expand` instead of.
- Deprecated property `fixed`, use `placement="fixed-top"` instead of.
- Deprecated property `innerRef`.
- Deprecated property `light`, use `colorScheme="light"` instead of.
- Deprecated property `sticky`, use `placement="sticky-top"` instead of.
- Deprecated property `tag`, use `component` instead of.

#### CNavbarNav

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

#### CNavbarText

- Deprecated property `innerRef`.
- Deprecated property `tag`, use `component` instead of.

### CPagination

- **The component has been split into `CPagination` and to `CSmartPagination` components.

### CPopover

- Deprecated property `header`, use `title` instead of.

### CProgress

- Deprecated property `innerRef`.
- Deprecated property `max`.
- Deprecated property `precision`.
- Deprecated property `showPercentage`.
- Deprecated property `showValue`.
- Deprecated property `size`, use `height` instead of.
- Deprecated property `striped`, use `variant="striped"` instead of.

### CProgressBar

- Deprecated property `innerRef`.
- Deprecated property `max`.
- Deprecated property `precision`.
- Deprecated property `showPercentage`.
- Deprecated property `showValue`.
- Deprecated property `size`, use `height` instead of.
- Deprecated property `striped`, use `variant="striped"` instead of.

### CSidebar
- Deprecated property `minimize` use `narrow` instead of.
- Deprecated property `dropdownMode`.
- Deprecated component `CSidebarForm`, use `CForm` instead of.
- Deprecated component `CSidebarNavDivider`, use `CNavDivider` instead of.
- Deprecated component `CSidebarNavDropdown`, use `CNavGroup` instead of.
- Deprecated component `CSidebarNavLink`, use `CNavLink` instead of.
- Deprecated component `CSidebarNavItem`, use `CNavItem` instead of.
- Deprecated component `CSidebarNavTitile`, use `CNavTitle` instead of.

### CSwitch

- Component is depracated, use `CFormSwitch` instead of.

### CSpinner

- Deprecated property `innerRef`.
- Deprecated property `grow`, use `variant="grow"` instead of.
- Deprecated property `tag`, use `component` instead of.

### CTabs

- Component is depracated, use `<CNav variant="tabs" role="tablist">` instead of

#### CTabContent

- Deprecated property `innerRef`.
- Deprecated property `fade`.

#### CTabPane

- Deprecated property `active`, use `visible` instead of.
- Deprecated property `innerRef`.

### CToast

- Deprecated property `innerRef`.
- Deprecated property `fade`, use `animation` instead of.
- Deprecated property `show`, use `visible` instead of.
- Deprecated property `onStateChange`.

#### CToastBody

- Deprecated property `innerRef`.

#### CToastHeader

- Deprecated property `innerRef`.

### CToggler

- Component is depracated.

### CTooltip

- Deprecated property `interactive`.
- Deprecated property `advancedOptions`.

## Forms

### CFormGroup

- Component is depracated.

### CInput

- **Component renamed to `CFormInput`**
- Deprecated property `plaintext`, use `plainText` instead of.

### CInputCheckbox

- Component is depracated, use `<CFormCheck>` instead of.

### CInputFile

- Component is depracated, use `<CFormInput type="file">` instead of.

### CInputRadio

- Component is depracated, use `<CFormCheck type="radio">` instead of.

### CInputGroup

- Deprecated property `innerRef`.

#### CInputGroupAddon

- Component is depracated, use `CInputGroupText` instead of.

### CSelect

- Component is depracated, use `<CFormSelect>` instead of.

### CValidFeedback

- Component is depracated, use `<CFormFeedback valid>` instead of.

### CInvalidFeedback

- Component is depracated, use `<CCFormFeedback invalid>` instead of.

## Layout

### CContainer

- Deprecated property `tag`.
- Deprecated property `innerRef`.

### CCol

- Deprecated property `tag`.
- Deprecated property `width`, use `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.

### CRow

- Deprecated property `alignHorizontal`.
- Deprecated property `alignVertical`.
- Deprecated property `form`.
- Deprecated property `gutters`.
- Deprecated property `tag`.
- Deprecated property `width`, use `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.


---

# Migration to v5

> Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.

CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/bootstrap/docs/migration/v5/).

## Components

### CAlertHeading

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CAvatar

- Removed `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CBadge

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CButton

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The button doesn't have a default color anymore, you have to add `color="primary"`

### CCard

- Removed `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CCardHeading

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardImage

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardSubtitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCloseButton

- Deprecated property `white`, use `dark` instead of.

### CDatePicker

- Removed property `format`, use `inputDateFormat` instead of.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDatePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />
  ```

- `onDateChange` event return only the date object, instead of the date object and formatted string.

### CDateRangePicker

- Removed property `format`, use `inputDateFormat` instead of.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDateRangePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />
  ```

- `onStartDateChange` and `onEndDateChange` events return only the date object, instead of the date object and formatted string.

### CDropdown

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownHeader

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItemPlain

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownMenu

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownToggle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CFormFeedback

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CFormText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CInputGroupText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroup

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroupItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CModalTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CMultiSelect

- Removed key `text` in the options list, use `label` instead

### CNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The `underline` variant has been changed to `underline-border`

### CNavbar

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### COffcanvasTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPaginationItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPlaceholder

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CSidebar

- <span className="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use `colorScheme="dark"` to make it dark.

### CSpinner

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CToastClose

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated property `white`, use `dark` instead of.


---

# React Accordion Component Accesibility

> Detailed overview of the accessibility features implemented in CoreUI React Accordion, ensuring compliance with WAI-ARIA guidelines.

## Accessible React Accordion

Accordions are a common UI pattern used to toggle the visibility of content. Ensuring that accordions are accessible is crucial for users who rely on assistive technologies. This guide demonstrates how to create an accessible accordion using CoreUI React components, adhering to the [WAI-ARIA Accordion Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

### Semantic Structure

- **Button Headers**: Each accordion header is rendered as a native `<button>` element. This ensures that headers are inherently focusable and operable via keyboard without additional scripting.
  
- **Proper HTML Elements**: Utilizes appropriate HTML elements (`<button>`, `<div>`, etc.) to convey the correct semantic meaning, enhancing compatibility with screen readers and other assistive technologies.

### ARIA Attributes

CoreUI React Accordion incorporates essential ARIA attributes to communicate the state and relationships of accordion items to assistive technologies:

- **`aria-expanded`**: Reflects the current state of the accordion item (`true` when expanded, `false` when collapsed).
  
- **`aria-controls`**: Associates each header with its corresponding content panel by referencing the panel's `id`.
  
- **`id`**: Unique identifiers for both headers and panels establish clear relationships, ensuring that screen readers can accurately describe the accordion structure.

### Focus Management

- **Automatic Focus Handling**: When an accordion panel is expanded or collapsed, focus is managed to ensure a seamless user experience. This prevents focus from being lost or trapped within the accordion, maintaining accessibility standards.

### Visual Indicators

- **Focus Styles**: Clear visual indicators are provided for focused elements, aiding users who navigate via keyboard.
  
- **Active States**: Distinct styling for active (expanded) accordion items helps users identify the current state of each section.

### Keyboard Support

The Accordion component supports comprehensive keyboard navigation out of the box:

<div className="table-api table-responsive border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Function</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><kbd>Tab</kbd></td>
        <td>Moves focus to the next focusable element.</td>
      </tr>
      <tr>
        <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
        <td>Moves focus to the previous focusable element.</td>
      </tr>
      <tr>
        <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
        <td>Toggle the expansion of the focused accordion header.</td>
      </tr>
    </tbody>
  </table>
</div>


---

# React Accordion Component API

> Explore the API reference for the React Accordion component and discover how to effectively utilize its props for customization.

## CAccordion

```jsx
import { CAccordion } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeItemKey` | `string \| number \| undefined` | - | The active item key. |
| `alwaysOpen` | `boolean \| undefined` | `false` | Make accordion items stay open when another item is opened |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `flush` | `boolean \| undefined` | - | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. |

## CAccordionBody

```jsx
import { CAccordionBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CAccordionHeader

```jsx
import { CAccordionHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CAccordionItem

```jsx
import { CAccordionItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `itemKey` | `string \| number \| undefined` | - | Item key. |


---

# React Bootstrap Accordion Component

> Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.

## How to use React Bootstrap Accordion component

Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionExample = () => {
  return (
    <CAccordion activeItemKey={2}>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

### Flush style

Add the `flush` prop to remove default borders, background colors, and border radius — making the accordion items align flush with their container, following Bootstrap’s visual style.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionFlushExample = () => {
  return (
    <CAccordion flush>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

### Always open behavior

Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.

```html
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionAlwaysOpenExample = () => {
  return (
    <CAccordion alwaysOpen activeItemKey={2}>
      <CAccordionItem itemKey={1}>
        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={2}>
        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
      <CAccordionItem itemKey={3}>
        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
        <CAccordionBody>
          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
          until the collapse plugin adds the appropriate classes that we use to style each element.
          These classes control the overall appearance, as well as the showing and hiding via CSS
          transitions. You can modify any of this with custom CSS or overriding our default
          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
          <code>.accordion-body</code>, though the transition does limit overflow.
        </CAccordionBody>
      </CAccordionItem>
    </CAccordion>
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.

- [&lt;CAccordion /&gt;](../api/#caccordion)
- [&lt;CAccordionBody /&gt;](../api/#caccordionbody)
- [&lt;CAccordionHeader /&gt;](../api/#caccordionheader)
- [&lt;CAccordionItem /&gt;](../api/#caccordionitem)


---

# React Accordion Component Styling

> Learn how to customize the React Accordion component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Accordion supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-accordion-color: #{$accordion-color};
--cui-accordion-bg: #{$accordion-bg};
--cui-accordion-transition: #{$accordion-transition};
--cui-accordion-border-color: #{$accordion-border-color};
--cui-accordion-border-width: #{$accordion-border-width};
--cui-accordion-border-radius: #{$accordion-border-radius};
--cui-accordion-inner-border-radius: #{$accordion-inner-border-radius};
--cui-accordion-btn-padding-x: #{$accordion-button-padding-x};
--cui-accordion-btn-padding-y: #{$accordion-button-padding-y};
--cui-accordion-btn-color: #{$accordion-button-color};
--cui-accordion-btn-bg: #{$accordion-button-bg};
--cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--cui-accordion-btn-icon-width: #{$accordion-icon-width};
--cui-accordion-btn-icon-transform: #{$accordion-icon-transform};
--cui-accordion-btn-icon-transition: #{$accordion-icon-transition};
--cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--cui-accordion-body-padding-x: #{$accordion-body-padding-x};
--cui-accordion-body-padding-y: #{$accordion-body-padding-y};
--cui-accordion-active-color: #{$accordion-button-active-color};
--cui-accordion-active-bg: #{$accordion-button-active-bg};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-accordion-color': '#333',
  '--cui-accordion-bg': '#f8f9fa',
}

return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
```

### SASS variables

```scss
$accordion-padding-y:                     1rem !default;
$accordion-padding-x:                     1.25rem !default;
$accordion-color:                         var(--cui-body-color) !default;
$accordion-bg:                            var(--cui-body-bg) !default;
$accordion-border-width:                  var(--cui-border-width) !default;
$accordion-border-color:                  var(--cui-border-color) !default;
$accordion-border-radius:                 var(--cui-border-radius) !default;
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;

$accordion-body-padding-y:                $accordion-padding-y !default;
$accordion-body-padding-x:                $accordion-padding-x !default;

$accordion-button-padding-y:              $accordion-padding-y !default;
$accordion-button-padding-x:              $accordion-padding-x !default;
$accordion-button-color:                  var(--cui-body-color) !default;
$accordion-button-bg:                     var(--cui-accordion-bg) !default;
$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg:              var(--cui-primary-bg-subtle) !default;
$accordion-button-active-color:           var(--cui-primary-text-emphasis) !default;

// fusv-disable
$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.0.0
// fusv-enable
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;

$accordion-icon-width:                    1.25rem !default;
$accordion-icon-color:                    $body-color !default;
$accordion-icon-active-color:             $primary-text-emphasis !default;
$accordion-icon-transition:               transform .2s ease-in-out !default;
$accordion-icon-transform:                rotate(-180deg) !default;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
```


---

# React Alert Component API

> Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.

## CAlert

```jsx
import { CAlert } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaCloseLabel` | `string \| undefined` | `Close` | Sets the `aria-label` of the dismissible close button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the component to one of CoreUI’s themed colors. |
| `dismissible` | `boolean \| undefined` | - | Optionally add a close button to alert and allow it to self dismiss. |
| `onClose` | `(() => void) \| undefined` | - | Callback fired when the component requests to be closed. |
| `onClosed` | `(() => void) \| undefined` | - | Callback fired when the component has been closed and the CSS transition has completed. |
| `transition` | `boolean \| undefined` | `true` | Set whether the alert fades in and out when it is shown and hidden. Set to `false` to make it appear and disappear without a fade animation. |
| `variant` | `string \| undefined` | - | Set the alert variant to a solid. |
| `visible` | `boolean \| undefined` | `true` | Toggle the visibility of component. |

## CAlertHeading

```jsx
import { CAlertHeading } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h4") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h4` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CAlertLink

```jsx
import { CAlertLink } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |


---

# React Bootstrap Alert Component

> Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.

## How to use React Bootstrap Alert component

CoreUI’s React Bootstrap Alerts provide contextual feedback messages for typical user interactions. Each alert supports Bootstrap-based colors and can include additional content and dismiss functionality.

```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertExample = () => {
  return (
    <>
      <CAlert color="primary">A simple primary alert—check it out!</CAlert>
      <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
      <CAlert color="success">A simple success alert—check it out!</CAlert>
      <CAlert color="danger">A simple danger alert—check it out!</CAlert>
      <CAlert color="warning">A simple warning alert—check it out!</CAlert>
      <CAlert color="info">A simple info alert—check it out!</CAlert>
      <CAlert color="light">A simple light alert—check it out!</CAlert>
      <CAlert color="dark">A simple dark alert—check it out!</CAlert>
    </>
  )
}
```

> ### Live example
> 
> Click the button below to display an alert (initially hidden), then dismiss it using the built-in close button — styled the Bootstrap way.
> 
> ```html
import React, { useState } from 'react'
import { CAlert, CButton } from '@coreui/react'

export const AlertLiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
        A simple primary alert—check it out!
      </CAlert>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Show live alert
      </CButton>
    </>
  )
}
```
> 
> ### Link color
> 
> To include links inside your alert, use the `` component — it automatically adopts the contextual Bootstrap color of the parent alert.
> 
> ```html
import React from 'react'
import { CAlert, CAlertLink } from '@coreui/react'

export const AlertLinkColorExample = () => {
  return (
    <>
      <CAlert color="primary">
        A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="secondary">
        A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="success">
        A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="danger">
        A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="warning">
        A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
        click if you like.
      </CAlert>
      <CAlert color="info">
        A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
      <CAlert color="light">
        A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
      <CAlert color="dark">
        A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
        if you like.
      </CAlert>
    </>
  )
}
```
> 
> ### Additional content
> 
> React Bootstrap Alerts can include extra structured content such as headings, paragraphs, and horizontal rules for enhanced readability.
> 
> ```html
import React from 'react'
import { CAlert, CAlertHeading } from '@coreui/react'

export const AlertAdditionalContentExample = () => {
  return (
    <CAlert color="success">
      <CAlertHeading as="h4">Well done!</CAlertHeading>
      <p>
        Aww yeah, you successfully read this important alert message. This example text is going to
        run a bit longer so that you can see how spacing within an alert works with this kind of
        content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
      </p>
    </CAlert>
  )
}
```
> 
> ### Icons
> 
> Use CoreUI Icons and flexbox utilities to add icons to your alerts. Combine them with spacing utilities for precise layout control.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertIcons1Example = () => {
  return (
    <CAlert color="primary" className="d-flex align-items-center">
      <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
        <rect
          width="32"
          height="176"
          x="240"
          y="176"
          fill="var(--ci-primary-color, currentColor)"
          className="ci-primary"
        ></rect>
        <rect
          width="32"
          height="32"
          x="240"
          y="384"
          fill="var(--ci-primary-color, currentColor)"
          className="ci-primary"
        ></rect>
        <path
          fill="var(--ci-primary-color, currentColor)"
          d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
          className="ci-primary"
        ></path>
      </svg>
      <div>An example alert with an icon</div>
    </CAlert>
  )
}
```
> 
> Need more than one icon in your alert? CoreUI Icons can be stacked or arranged using flex utilities.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'

export const AlertIcons2Example = () => {
  return (
    <>
      <CAlert color="primary" className="d-flex align-items-center">
        <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example alert with an icon</div>
      </CAlert>
      <CAlert color="success" className="d-flex align-items-center">
        <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example success alert with an icon</div>
      </CAlert>
      <CAlert color="warning" className="d-flex align-items-center">
        <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example warning alert with an icon</div>
      </CAlert>
      <CAlert color="danger" className="d-flex align-items-center">
        <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
        <div>An example danger alert with an icon</div>
      </CAlert>
    </>
  )
}
```
> 
> ### Solid style
> 
> Add `variant="solid"` to give the alert a solid background color, in line with Bootstrap’s solid alert variants.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertSolidExample = () => {
  return (
    <>
      <CAlert color="primary" variant="solid">
        A simple solid primary alert—check it out!
      </CAlert>
      <CAlert color="secondary" variant="solid">
        A simple solid secondary alert—check it out!
      </CAlert>
      <CAlert color="success" variant="solid">
        A simple solid success alert—check it out!
      </CAlert>
      <CAlert color="danger" variant="solid">
        A simple solid danger alert—check it out!
      </CAlert>
      <CAlert color="warning" variant="solid">
        A simple solid warning alert—check it out!
      </CAlert>
      <CAlert color="info" variant="solid">
        A simple solid info alert—check it out!
      </CAlert>
      <CAlert color="light" variant="solid" className="text-high-emphasis">
        A simple solid light alert—check it out!
      </CAlert>
      <CAlert color="dark" variant="solid">
        A simple solid dark alert—check it out!
      </CAlert>
    </>
  )
}
```
> 
> ### Dismissing
> 
> Use the `dismissible` prop to allow users to close the alert. This will completely remove it from the DOM.
> 
> ```html
import React from 'react'
import { CAlert } from '@coreui/react'

export const AlertDismissingExample = () => {
  return (
    <CAlert
      color="warning"
      dismissible
      onClose={() => {
        alert('👋 Well, hi there! Thanks for dismissing me.')
      }}
    >
      <strong>Go right ahead</strong> and click that dismiss over there on the right.
    </CAlert>
  )
}
```
> 
> 
> When an alert is dismissed, the element is completely removed from the page structure. If a
> keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
> depending on the browser, reset to the start of the page/document.

## API reference

Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component.

- [&lt;CAlert /&gt;](../api/#calert)
- [&lt;CAlertHeading /&gt;](../api/#calertheading)
- [&lt;CAlertLink /&gt;](../api/#calertlink)


---

# React Alert Component Styling

> Learn how to customize the React Alert component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Alert supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-alert-bg: transparent;
--cui-alert-padding-x: #{$alert-padding-x};
--cui-alert-padding-y: #{$alert-padding-y};
--cui-alert-margin-bottom: #{$alert-margin-bottom};
--cui-alert-color: inherit;
--cui-alert-border-color: transparent;
--cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color);
--cui-alert-border-radius: #{$alert-border-radius};
--cui-alert-link-color: inherit;
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-alert-color': '#333',
  '--cui-alert-bg': '#f8f9fa',
}

return <CAlert style={customVars}>{/* Alert content */}</CAlert>
```

### SASS variables

```scss
$alert-padding-y:               $spacer !default;
$alert-padding-x:               $spacer !default;
$alert-margin-bottom:           1rem !default;
$alert-border-radius:           var(--cui-border-radius) !default;
$alert-link-font-weight:        $font-weight-bold !default;
$alert-border-width:            var(--cui-border-width) !default;
$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
```


---

# React Avatar Component API

> Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.

## CAvatar

```jsx
import { CAvatar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `string \| undefined` | - | Size the component small, large, or extra large. |
| `src` | `string \| undefined` | - | The src attribute for the img element. |
| `status` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the status indicator to one of CoreUI’s themed colors. |
| `textColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-emphasis' \| 'secondary-emphasis' \| 'success-emphasis' \| 'danger-emphasis' \| 'warning-emphasis' \| 'info-emphasis' \| 'light-emphasis' \| 'body' \| 'body-emphasis' \| 'body-secondary' \| 'body-tertiary' \| 'black' \| 'black-50' \| 'white' \| 'white-50' \| string` | - | Sets the text color of the component to one of CoreUI’s themed colors. |


---

# React Bootstrap Avatar Component

> Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.

## Image avatars

Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarImage = () => {
  return (
    <>
      <CAvatar src={'/assets/img/avatars/1.jpg'} />
      <CAvatar src={'/assets/img/avatars/2.jpg'} />
      <CAvatar src={'/assets/img/avatars/3.jpg'} />
    </>
  )
}
```

## Letter avatars

Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarLetter = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white">
        CUI
      </CAvatar>
      <CAvatar color="secondary">CUI</CAvatar>
      <CAvatar color="warning" textColor="white">
        CUI
      </CAvatar>
    </>
  )
}
```

## Icon avatars

Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarIcon = () => {
  return (
    <>
      <CAvatar color="info" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
      <CAvatar color="success" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
      <CAvatar color="danger" textColor="white">
        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
        </svg>
      </CAvatar>
    </>
  )
}
```

## Rounded avatars

Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarRounded = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white" shape="rounded">
        CUI
      </CAvatar>
      <CAvatar color="secondary" shape="rounded">
        CUI
      </CAvatar>
      <CAvatar color="warning" textColor="white" shape="rounded">
        CUI
      </CAvatar>
    </>
  )
}
```

## Square avatars

To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarSquare = () => {
  return (
    <>
      <CAvatar color="primary" textColor="white" shape="rounded-0">
        CUI
      </CAvatar>
      <CAvatar color="secondary" shape="rounded-0">
        CUI
      </CAvatar>
      <CAvatar color="warning" textColor="white" shape="rounded-0">
        CUI
      </CAvatar>
    </>
  )
}
```

## Sizes

Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarSizes = () => {
  return (
    <>
      <CAvatar color="secondary" size="xl">
        CUI
      </CAvatar>
      <CAvatar color="secondary" size="lg">
        CUI
      </CAvatar>
      <CAvatar color="secondary" size="md">
        CUI
      </CAvatar>
      <CAvatar color="secondary">CUI</CAvatar>
      <CAvatar color="secondary" size="sm">
        CUI
      </CAvatar>
    </>
  )
}
```

## Avatars with status

Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.

```html
import React from 'react'
import { CAvatar } from '@coreui/react'

export const AvatarWithStatus = () => {
  return (
    <>
      <CAvatar src={'/assets/img/avatars/1.jpg'} status="success" />
      <CAvatar color="secondary" status="danger">
        CUI
      </CAvatar>
    </>
  )
}
```

## API reference

Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.

- [&lt;CAvatar /&gt;](../api/#cavatar)


---

# React Avatar Component Styling

> Learn how to customize the React Avatar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Avatar supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```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

```jsx
const customVars = {
  '--cui-avatar-font-size': '1rem',
  '--cui-avatar-status-width': '0.125rem',
}

return <CAvatar style={customVars} />
```

### SASS variables

```scss
$avatar-width:                 2rem !default;
$avatar-height:                2rem !default;
$avatar-font-size:             .8rem !default;
$avatar-border-radius:         50em !default;
$avatar-status-width:          .5rem !default;
$avatar-status-height:         .5rem !default;
$avatar-status-border-radius:  50em !default;
$avatar-transition:            margin .15s !default;

$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
  ),
) !default;
```


---

# React Badge Component API

> Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.

## CBadge

```jsx
import { CBadge } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "span") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `span` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-gradient' \| 'secondary-gradient' \| 'success-gradient' \| 'danger-gradient' \| 'warning-gradient' \| 'info-gradient' \| 'dark-gradient' \| 'light-gradient' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `position` | `"top-start" \| "top-end" \| "bottom-end" \| "bottom-start" \| undefined` | - | Position badge in one of the corners of a link or button. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `"sm" \| undefined` | - | Size the component small. |
| `textBgColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 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. |
| `textColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-emphasis' \| 'secondary-emphasis' \| 'success-emphasis' \| 'danger-emphasis' \| 'warning-emphasis' \| 'info-emphasis' \| 'light-emphasis' \| 'body' \| 'body-emphasis' \| 'body-secondary' \| 'body-tertiary' \| 'black' \| 'black-50' \| 'white' \| 'white-50' \| string` | - | Sets the text color of the component to one of CoreUI’s themed colors. |


---

# React Bootstrap Badge Component

> Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.

## How to use React Bootstrap Badge component

React Bootstrap Badges scale based on their parent using `em` units, making them easy to embed inside headings, buttons, or navigation items.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeExample = () => {
  return (
    <>
      <h1>
        Example heading <CBadge color="secondary">New</CBadge>
      </h1>
      <h2>
        Example heading <CBadge color="secondary">New</CBadge>
      </h2>
      <h3>
        Example heading <CBadge color="secondary">New</CBadge>
      </h3>
      <h4>
        Example heading <CBadge color="secondary">New</CBadge>
      </h4>
      <h5>
        Example heading <CBadge color="secondary">New</CBadge>
      </h5>
      <h6>
        Example heading <CBadge color="secondary">New</CBadge>
      </h6>
    </>
  )
}
```

You can also use badges inside buttons and links to display counters or notifications.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge2Example = () => {
  return (
    <CButton color="primary">
      Notifications <CBadge color="secondary">4</CBadge>
    </CButton>
  )
}
```

Keep in mind that depending on usage, badges might be challenging for screen reader users. Add visually hidden helper text when needed to improve accessibility.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge3Example = () => {
  return (
    <CButton color="primary">
      Profile <CBadge color="secondary">9</CBadge>
      <span className="visually-hidden">unread messages</span>
    </CButton>
  )
}
```

### Positioned badges

Use the `position` prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositionedExample = () => {
  return (
    <>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="top-start" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="top-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <br />
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="bottom-start" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton color="primary" className="position-relative">
        Profile
        <CBadge color="danger" position="bottom-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
    </>
  )
}
```

You can also create generic status indicators without a number by combining badges with utility classes.

```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositioned2Example = () => {
  return (
    <CButton color="primary" className="position-relative">
      Profile
      <CBadge
        className="border border-light p-2"
        color="danger"
        position="top-end"
        shape="rounded-circle"
      >
        <span className="visually-hidden">New alerts</span>
      </CBadge>
    </CButton>
  )
}
```

## Contextual variations

Apply `color` props like `primary`, `danger`, or `success` to control the background color of the badge in a Bootstrap-consistent way.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextualVariations = () => {
  return (
    <>
      <CBadge color="primary">primary</CBadge>
      <CBadge color="success">success</CBadge>
      <CBadge color="danger">danger</CBadge>
      <CBadge color="warning">warning</CBadge>
      <CBadge color="info">info</CBadge>
      <CBadge textBgColor="light">light</CBadge>
      <CBadge color="dark">dark</CBadge>
    </>
  )
}
```

Use `textBgColor` to automatically set contrasting text and background colors according to WCAG accessibility standards.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextual2Variations = () => {
  return (
    <>
      <CBadge textBgColor="primary">primary</CBadge>
      <CBadge textBgColor="success">success</CBadge>
      <CBadge textBgColor="danger">danger</CBadge>
      <CBadge textBgColor="warning">warning</CBadge>
      <CBadge textBgColor="info">info</CBadge>
      <CBadge textBgColor="light">light</CBadge>
      <CBadge textBgColor="dark">dark</CBadge>
    </>
  )
}
```

## Pill badges

To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors Bootstrap’s pill-style badge appearance.

```html
import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgePillExample = () => {
  return (
    <>
      <CBadge color="primary" shape="rounded-pill">
        primary
      </CBadge>
      <CBadge color="success" shape="rounded-pill">
        success
      </CBadge>
      <CBadge color="danger" shape="rounded-pill">
        danger
      </CBadge>
      <CBadge color="warning" shape="rounded-pill">
        warning
      </CBadge>
      <CBadge color="info" shape="rounded-pill">
        info
      </CBadge>
      <CBadge textBgColor="light" shape="rounded-pill">
        light
      </CBadge>
      <CBadge color="dark" shape="rounded-pill">
        dark
      </CBadge>
    </>
  )
}
```

## API reference

See below for the full API reference for all available props for the Bootstrap-styled React Badge component.

- [&lt;CBadge /&gt;](../api/#cbadge)


---

# React Badge Component Styling

> Learn how to customize the React Badge component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Badge supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-badge-padding-x: #{$badge-padding-x};
--cui-badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --cui-badge-font-size);
--cui-badge-font-weight: #{$badge-font-weight};
--cui-badge-color: #{$badge-color};
--cui-badge-border-radius: #{$badge-border-radius};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-badge-color': '#333',
  '--cui-badge-padding-x': '1rem',
}

return <CBadge style={customVars} />
```

### SASS variables

```scss
$badge-font-size:                   .75em !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-color:                       $white !default;
$badge-padding-y:                   .35em !default;
$badge-padding-x:                   .65em !default;
$badge-border-radius:               var(--cui-border-radius) !default;

$badge-font-size-sm:                .65em !default;
$badge-padding-y-sm:                .3em !default;
$badge-padding-x-sm:                .5em !default;
```


---

# React Breadcrumb Component API

> Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization.

## CBreadcrumb

```jsx
import { CBreadcrumb } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CBreadcrumbItem

```jsx
import { CBreadcrumbItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "li") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `href` | `string \| undefined` | - | The `href` attribute for the inner `<CLink>` component. |


---

# React Bootstrap Breadcrumb Component

> Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.

## How to use React Bootstrap Breadcrumb component

The React Bootstrap Breadcrumb navigation component shows users where they are in the application hierarchy. It automatically inserts visual separators via CSS, so you don’t have to manually include them.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbExample = () => {
  return (
    <>
      <CBreadcrumb>
        <CBreadcrumbItem active>Home</CBreadcrumbItem>
      </CBreadcrumb>

      <CBreadcrumb>
        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
        <CBreadcrumbItem active>Library</CBreadcrumbItem>
      </CBreadcrumb>

      <CBreadcrumb>
        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
        <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
        <CBreadcrumbItem active>Data</CBreadcrumbItem>
      </CBreadcrumb>
    </>
  )
}
```

## Custom dividers

Separators between breadcrumb items are automatically inserted using CSS via [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property.

You can customize the divider using the CSS variable `--cui-breadcrumb-divider` or the Sass variable `$breadcrumb-divider`. For RTL support, there’s also `$breadcrumb-divider-flipped`.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividersExample = () => {
  return (
    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' } as React.CSSProperties}>
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

To change the divider in Sass, use the `quote` function. For example, to use a `>` character:

```scss
$breadcrumb-divider: quote('>');
```

It’s also possible to use an **embedded SVG icon** as a divider by assigning it to the custom property or Sass variable:

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividers2Example = () => {
  return (
    <CBreadcrumb
      style={
        {
          '--cui-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='%236c757d'/%3E%3C/svg%3E")`,
        } as React.CSSProperties
      }
    >
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

```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");
```

To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to `none`.

```html
import React from 'react'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

export const BreadcrumbDividers3Example = () => {
  return (
    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' } as React.CSSProperties}>
      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
      <CBreadcrumbItem active>Library</CBreadcrumbItem>
    </CBreadcrumb>
  )
}
```

```scss
$breadcrumb-divider: none;
```

## Accessibility

React Bootstrap Breadcrumbs are accessible by default. CoreUI adds `aria-label="breadcrumb"` to the navigation container and `aria-current="page"` to the active item to ensure proper screen reader behavior.

For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

## API reference

Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.

- [&lt;CBreadcrumb /&gt;](../api/#cbreadcrumb)
- [&lt;CBreadcrumbItem /&gt;](../api/#cbreadcrumbitem)


---

# React Breadcrumb Component Styling

> Learn how to customize the React Breadcrumb component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Breadcrumb supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
--cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
--cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --cui-breadcrumb-font-size);
--cui-breadcrumb-bg: #{$breadcrumb-bg};
--cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
--cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
--cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-breadcrumb-bg': '#eee',
  '--cui-breadcrumb-divider-color': '#a2a3a4',
}

return <CBreadcrumb style={customVars} />
```

### SASS variables

```scss
$breadcrumb-font-size:              null !default;
$breadcrumb-padding-y:              0 !default;
$breadcrumb-padding-x:              0 !default;
$breadcrumb-item-padding-x:         .5rem !default;
$breadcrumb-margin-bottom:          1rem !default;
$breadcrumb-bg:                     null !default;
$breadcrumb-divider-color:          var(--cui-secondary-color) !default;
$breadcrumb-active-color:           var(--cui-secondary-color) !default;
$breadcrumb-divider:                string.quote("/") !default;
$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
$breadcrumb-border-radius:          null !default;
```


---

# React Button Group Component API

> Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization.

## CButtonGroup

```jsx
import { CButtonGroup } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `vertical` | `boolean \| undefined` | - | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. |

## CButtonToolbar

```jsx
import { CButtonToolbar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |


---

# React Bootstrap Button Group Component

> Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.

## How to use React Bootstrap Button Group component

The React Bootstrap Button Group component allows you to group multiple buttons together into a single toolbar-like unit. Wrap a series of `<CButton>` components in a `<CButtonGroup>` to get started.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic example">
      <CButton color="primary">Left</CButton>
      <CButton color="primary">Middle</CButton>
      <CButton color="primary">Right</CButton>
    </CButtonGroup>
  )
}
```

> Ensure the correct role and provide a label}>
> For assistive technologies (e.g. screen readers) to identify a set of buttons as grouped, use `role="group"` for button groups and `role="toolbar"` for toolbars.
> 
> Always include an accessible label using `aria-label` or `aria-labelledby` to clarify the purpose of the group.

React Bootstrap Button Groups can also be applied to a group of links instead of using the [`CNav`](../../navs-tabs/#base-nav) component.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroup2Example = () => {
  return (
    <CButtonGroup>
      <CButton href="#" color="primary" active>
        Active link
      </CButton>
      <CButton href="#" color="primary">
        Link
      </CButton>
      <CButton href="#" color="primary">
        Link
      </CButton>
    </CButtonGroup>
  )
}
```

## Mixed styles in React Bootstrap Button Groups

Combine buttons with different styles within a single group for more flexible UI designs.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupMixedStylesExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic mixed styles example">
      <CButton color="danger">Left</CButton>
      <CButton color="warning">Middle</CButton>
      <CButton color="success">Right</CButton>
    </CButtonGroup>
  )
}
```

## Outlined button styles

Use `variant="outline"` on grouped buttons to apply Bootstrap's outline button style across the group.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupOutlinedStylesExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic outlined example">
      <CButton color="primary" variant="outline">
        Left
      </CButton>
      <CButton color="primary" variant="outline">
        Middle
      </CButton>
      <CButton color="primary" variant="outline">
        Right
      </CButton>
    </CButtonGroup>
  )
}
```

## Checkbox and radio button groups

Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.

```html
import React from 'react'
import { CButtonGroup, CFormCheck } from '@coreui/react'

export const ButtonGroupCheckboxAndRadioExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck1"
        autoComplete="off"
        label="Checkbox 1"
      />
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck2"
        autoComplete="off"
        label="Checkbox 2"
      />
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btncheck3"
        autoComplete="off"
        label="Checkbox 3"
      />
    </CButtonGroup>
  )
}
```

```html
import React from 'react'
import { CButtonGroup, CFormCheck } from '@coreui/react'

export const ButtonGroupCheckboxAndRadio2Example = () => {
  return (
    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio1"
        autoComplete="off"
        label="Radio 1"
      />
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio2"
        autoComplete="off"
        label="Radio 2"
      />
      <CFormCheck
        type="radio"
        button={{ color: 'primary', variant: 'outline' }}
        name="btnradio"
        id="btnradio3"
        autoComplete="off"
        label="Radio 3"
      />
    </CButtonGroup>
  )
}
```

## React Bootstrap Button Toolbar

Group multiple button groups together into a toolbar using `<CButtonToolbar>`. Combine with layout utilities to control spacing and alignment.

```html
import React from 'react'
import { CButton, CButtonGroup, CButtonToolbar } from '@coreui/react'

export const ButtonToolbarExample = () => {
  return (
    <CButtonToolbar role="toolbar" aria-label="Toolbar with button groups">
      <CButtonGroup className="me-2" role="group" aria-label="First group">
        <CButton color="primary">1</CButton>
        <CButton color="primary">2</CButton>
        <CButton color="primary">3</CButton>
        <CButton color="primary">4</CButton>
      </CButtonGroup>
      <CButtonGroup className="me-2" role="group" aria-label="Second group">
        <CButton color="secondary">5</CButton>
        <CButton color="secondary">6</CButton>
        <CButton color="secondary">7</CButton>
      </CButtonGroup>
      <CButtonGroup className="me-2" role="group" aria-label="Third group">
        <CButton color="info">8</CButton>
      </CButtonGroup>
    </CButtonToolbar>
  )
}
```

You can also combine input groups with button groups to create interactive toolbars.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CButtonToolbar,
  CFormInput,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const ButtonToolbar2Example = () => {
  return (
    <>
      <CButtonToolbar className="mb-3" role="toolbar" aria-label="Toolbar with button groups">
        <CButtonGroup className="me-2" role="group" aria-label="First group">
          <CButton color="secondary" variant="outline">
            1
          </CButton>
          <CButton color="secondary" variant="outline">
            2
          </CButton>
          <CButton color="secondary" variant="outline">
            3
          </CButton>
          <CButton color="secondary" variant="outline">
            4
          </CButton>
        </CButtonGroup>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </CInputGroup>
      </CButtonToolbar>
      <CButtonToolbar
        className="justify-content-between"
        role="group"
        aria-label="Toolbar with button groups"
      >
        <CButtonGroup className="me-2" role="group" aria-label="First group">
          <CButton color="secondary" variant="outline">
            1
          </CButton>
          <CButton color="secondary" variant="outline">
            2
          </CButton>
          <CButton color="secondary" variant="outline">
            3
          </CButton>
          <CButton color="secondary" variant="outline">
            4
          </CButton>
        </CButtonGroup>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </CInputGroup>
      </CButtonToolbar>
    </>
  )
}
```

## Sizing React Bootstrap Button Groups

Instead of setting size on individual buttons, apply the `size` prop to the `<CButtonGroup>` to make all buttons within it uniformly sized.

```html
import React from 'react'
import { CButton, CButtonGroup } from '@coreui/react'

export const ButtonGroupSizingExample = () => {
  return (
    <>
      <CButtonGroup size="lg" role="group" aria-label="Large button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
      <br />
      <CButtonGroup role="group" aria-label="Default button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
      <br />
      <CButtonGroup size="sm" role="group" aria-label="Small button group">
        <CButton color="primary" variant="outline">
          Left
        </CButton>
        <CButton color="primary" variant="outline">
          Middle
        </CButton>
        <CButton color="primary" variant="outline">
          Right
        </CButton>
      </CButtonGroup>
    </>
  )
}
```

## Nesting button groups

Nest a `<CButtonGroup>` inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const ButtonGroupNestingExample = () => {
  return (
    <CButtonGroup role="group" aria-label="Button group with nested dropdown">
      <CButton color="primary">1</CButton>
      <CButton color="primary">2</CButton>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </CButtonGroup>
  )
}
```

## Vertical React Bootstrap Button Groups

Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CCol,
  CFormCheck,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CRow,
} from '@coreui/react'

export const ButtonGroupVerticalExample = () => {
  return (
    <CRow>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
        </CButtonGroup>
      </CCol>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CButton color="primary">Button</CButton>
          <CButton color="primary">Button</CButton>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
          <CDropdown variant="btn-group">
            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
              <CDropdownDivider />
              <CDropdownItem href="#">Separated link</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </CButtonGroup>
      </CCol>
      <CCol>
        <CButtonGroup vertical role="group" aria-label="Vertical button group">
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio1"
            autoComplete="off"
            label="Radio 1"
            defaultChecked
          />
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio2"
            autoComplete="off"
            label="Radio 2"
          />
          <CFormCheck
            type="radio"
            button={{ color: 'danger', variant: 'outline' }}
            name="vbtnradio"
            id="vbtnradio3"
            autoComplete="off"
            label="Radio 3"
          />
        </CButtonGroup>
      </CCol>
    </CRow>
  )
}
```

## API reference

Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.

- [&lt;CButtonGroup /&gt;](../api/#cbuttongroup)
- [&lt;CButtonToolbar /&gt;]()


---

# React Button Component API

> Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.

## CButton

```jsx
import { CButton } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "button") \| (ElementType & "cite") \| (ElementType & "data") \| ... 175 more ... \| undefined` | `button` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |
| `role` | `string \| undefined` | - | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `toggle` | `boolean \| undefined` | - | Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the `aria-pressed` attribute. |
| `type` | `"button" \| "submit" \| "reset" \| undefined` | `button` | Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element. |
| `variant` | `"outline" \| "ghost" \| undefined` | - | Set the button variant to an outlined button or a ghost button. |


---

# React Bootstrap Button Component

> Learn how to use CoreUI’s React Button component with Bootstrap styling to build interactive, accessible, and responsive buttons for forms, tables, modals, and more.

## How to use React Bootstrap Button component

CoreUI provides a set of prebuilt React Button components styled with Bootstrap. Buttons signal actions to users and can initiate events both in the UI and behind the scenes.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonExample = () => {
  return (
    <>
      <CButton color="primary">Primary</CButton>
      <CButton color="secondary">Secondary</CButton>
      <CButton color="success">Success</CButton>
      <CButton color="danger">Danger</CButton>
      <CButton color="warning">Warning</CButton>
      <CButton color="info">Info</CButton>
      <CButton color="light">Light</CButton>
      <CButton color="dark">Dark</CButton>
      <CButton color="link">Link</CButton>
    </>
  )
}
```

> ## Disable text wrapping
> 
> To prevent text wrapping inside a button, apply the `.text-nowrap` class to the ``. Alternatively, set `$btn-white-space: nowrap` in Sass to apply it globally.
> 
> ## Button components
> 
> The `` component can render as a ``, ``, or `` element. When using it as an anchor for functionality (like toggles), add `role="button"` for accessibility.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonComponentsExample = () => {
  return (
    <>
      <CButton as="a" color="primary" href="#" role="button">
        Link
      </CButton>
      <CButton type="submit" color="primary">
        Button
      </CButton>
      <CButton as="input" type="button" color="primary" value="Input" />
      <CButton as="input" type="submit" color="primary" value="Submit" />
      <CButton as="input" type="reset" color="primary" value="Reset" />
    </>
  )
}
```
> 
> ## Outline buttons
> 
> Use `variant="outline"` to create buttons with a transparent background and colored border — a more subtle alternative to standard buttons.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonOutlineExample = () => {
  return (
    <>
      <CButton color="primary" variant="outline">
        Primary
      </CButton>
      <CButton color="secondary" variant="outline">
        Secondary
      </CButton>
      <CButton color="success" variant="outline">
        Success
      </CButton>
      <CButton color="danger" variant="outline">
        Danger
      </CButton>
      <CButton color="warning" variant="outline">
        Warning
      </CButton>
      <CButton color="info" variant="outline">
        Info
      </CButton>
      <CButton color="light" variant="outline">
        Light
      </CButton>
      <CButton color="dark" variant="outline">
        Dark
      </CButton>
    </>
  )
}
```
> 
> ## Ghost buttons
> 
> For minimal buttons with no background or border, use `variant="ghost"`. These are great for secondary actions.
> 
> ```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonGhostExample = () => {
  return (
    <>
      <CButton color="primary" variant="ghost">
        Primary
      </CButton>
      <CButton color="secondary" variant="ghost">
        Secondary
      </CButton>
      <CButton color="success" variant="ghost">
        Success
      </CButton>
      <CButton color="danger" variant="ghost">
        Danger
      </CButton>
      <CButton color="warning" variant="ghost">
        Warning
      </CButton>
      <CButton color="info" variant="ghost">
        Info
      </CButton>
      <CButton color="light" variant="ghost">
        Light
      </CButton>
      <CButton color="dark" variant="ghost">
        Dark
      </CButton>
    </>
  )
}
```
> 
> 
> Some button styles use light text colors and should be placed on dark backgrounds to maintain contrast.

## Sizes

Create large or small buttons with the `size="lg"` or `size="sm"` props.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizesExample = () => {
  return (
    <>
      <CButton color="primary" size="lg">
        Large button
      </CButton>
      <CButton color="secondary" size="lg">
        Large button
      </CButton>
    </>
  )
}
```

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizes2Example = () => {
  return (
    <>
      <CButton color="primary" size="sm">
        Small button
      </CButton>
      <CButton color="secondary" size="sm">
        Small button
      </CButton>
    </>
  )
}
```

You can also use CSS variables for fully custom sizes.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonSizes3Example = () => {
  const customVars = {
    '--cui-btn-padding-y': '.25rem',
    '--cui-btn-padding-x': '.5rem',
    '--cui-btn-font-size': '.75rem',
  } as React.CSSProperties

  return (
    <CButton color="primary" size="sm" style={customVars}>
      Custom button
    </CButton>
  )
}
```

## Shapes

### Pill buttons

Use pill-shaped buttons for a soft, rounded appearance.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonShapePillExample = () => {
  return (
    <>
      <CButton color="primary" className="rounded-pill">
        Primary
      </CButton>
      <CButton color="secondary" className="rounded-pill">
        Secondary
      </CButton>
      <CButton color="success" className="rounded-pill">
        Success
      </CButton>
      <CButton color="danger" className="rounded-pill">
        Danger
      </CButton>
      <CButton color="warning" className="rounded-pill">
        Warning
      </CButton>
      <CButton color="info" className="rounded-pill">
        Info
      </CButton>
      <CButton color="light" className="rounded-pill">
        Light
      </CButton>
      <CButton color="dark" className="rounded-pill">
        Dark
      </CButton>
      <CButton color="link" className="rounded-pill">
        Link
      </CButton>
    </>
  )
}
```

### Square buttons

Use square-shaped buttons for compact, uniform interactions.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonShapeSquareExample = () => {
  return (
    <>
      <CButton color="primary" className="rounded-0">
        Primary
      </CButton>
      <CButton color="secondary" className="rounded-0">
        Secondary
      </CButton>
      <CButton color="success" className="rounded-0">
        Success
      </CButton>
      <CButton color="danger" className="rounded-0">
        Danger
      </CButton>
      <CButton color="warning" className="rounded-0">
        Warning
      </CButton>
      <CButton color="info" className="rounded-0">
        Info
      </CButton>
      <CButton color="light" className="rounded-0">
        Light
      </CButton>
      <CButton color="dark" className="rounded-0">
        Dark
      </CButton>
      <CButton color="link" className="rounded-0">
        Link
      </CButton>
    </>
  )
}
```

## Disabled state

Disable any `<CButton>` by passing the `disabled` prop. This applies `pointer-events: none` and dims the button.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonDisabledExample = () => {
  return (
    <>
      <CButton color="primary" disabled>
        Primary button
      </CButton>
      <CButton color="secondary" disabled>
        Button
      </CButton>
      <CButton color="primary" variant="outline" disabled>
        Primary button
      </CButton>
      <CButton color="secondary" variant="outline" disabled>
        Button
      </CButton>
    </>
  )
}
```

Disabling anchor elements (`<a>`) requires additional steps: CoreUI applies the `.disabled` class, adds `aria-disabled="true"`, and sets `tabindex="-1"`.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonDisabled2Example = () => {
  return (
    <>
      <CButton as="a" href="#" color="primary" disabled>
        Primary link
      </CButton>
      <CButton as="a" href="#" color="secondary" disabled>
        Link
      </CButton>
    </>
  )
}
```

These steps prevent users from interacting with disabled links via keyboard or mouse.

## Block buttons

To make buttons span the full width of their container, use Bootstrap's layout utilities like `.d-grid`, `.w-100`, and `.col-*`.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlockExample = () => {
  return (
    <div className="d-grid gap-2">
      <CButton color="primary">Button</CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

Responsive layout: vertically stacked until the `md` breakpoint, where `.d-md-block` reverts to inline.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock2Example = () => {
  return (
    <div className="d-grid gap-2 d-md-block">
      <CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
    </div>
  )
}
```

You can also create column-based buttons using `.col-6` and center them with `.mx-auto`.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock3Example = () => {
  return (
    <div className="d-grid gap-2 col-6 mx-auto">
      <CButton color="primary">Button</CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

Use flex utilities and margin helpers to align buttons horizontally when they're no longer stacked.

```html
import React from 'react'
import { CButton } from '@coreui/react'

export const ButtonBlock4Example = () => {
  return (
    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
      <CButton color="primary" className="me-md-2">
        Button
      </CButton>
      <CButton color="primary">Button</CButton>
    </div>
  )
}
```

## API reference

See the full API reference for all available props in the Bootstrap-styled React Button component.

- [&lt;CButton /&gt;](../api/#cbutton)


---

# React Button Component Styling

> Learn how to customize the React Button component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-btn-padding-x: #{$btn-padding-x};
--cui-btn-padding-y: #{$btn-padding-y};
--cui-btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --cui-btn-font-size);
--cui-btn-font-weight: #{$btn-font-weight};
--cui-btn-line-height: #{$btn-line-height};
--cui-btn-color: #{$btn-color};
--cui-btn-bg: transparent;
--cui-btn-border-width: #{$btn-border-width};
--cui-btn-border-color: transparent;
--cui-btn-border-radius: #{$btn-border-radius};
--cui-btn-hover-border-color: transparent;
--cui-btn-box-shadow: #{$btn-box-shadow};
--cui-btn-disabled-opacity: #{$btn-disabled-opacity};
--cui-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--cui-btn-focus-shadow-rgb), .5);
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-btn-color': '#ffe484',
  '--cui-btn-bg': '#efefef',
}

return <CButton style={customVars}>{/* Button content */}</CButton>
```

### SASS variables

```scss
$btn-color:                   var(--cui-body-color) !default;
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

$btn-link-color:              var(--cui-link-color) !default;
$btn-link-hover-color:        var(--cui-link-hover-color) !default;
$btn-link-disabled-color:     $gray-600 !default;
$btn-link-focus-shadow-rgb:   to-rgb(color.mix(color-contrast-variables($link-color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio), $link-color, 15%)) !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           var(--cui-border-radius) !default;
$btn-border-radius-sm:        var(--cui-border-radius-sm) !default;
$btn-border-radius-lg:        var(--cui-border-radius-lg) !default;

$btn-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;

$btn-hover-bg-shade-amount:       15% !default;
$btn-hover-bg-tint-amount:        15% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;
```


---

# React Calendar Component API

> Explore the API reference for the React Calendar component and discover how to effectively utilize its props for customization.

## CCalendar

```jsx
import { CCalendar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaNavNextMonthLabel` | `string \| undefined` | `Next month` | A string that provides an accessible label for the button that navigates to the next month in the React Calendar component. This label is read by screen readers to describe the action associated with the button. Customize for a more accessible calendar experience. |
| `ariaNavNextYearLabel` | `string \| undefined` | `Next year` | A string that provides an accessible label for the button that navigates to the next year in the React Calendar component. Screen readers utilize this label to inform users of the button's functionality, aiding in a more inclusive application. |
| `ariaNavPrevMonthLabel` | `string \| undefined` | `Previous month` | A string that provides an accessible label for the button that navigates to the previous month in the React Calendar component. This label is announced by screen readers, ensuring clarity around the button's purpose. |
| `ariaNavPrevYearLabel` | `string \| undefined` | `Previous year` | A string that provides an accessible label for the button that navigates to the previous year in the React Calendar component. Use it to enhance the experience for screen readers and further accessibility. |
| `calendarDate` | `string \| Date \| null \| undefined` | `startDate \|\| endDate \|\| null` | Defines the initial date or reference date for the React Calendar component. This date can be either a Date object or a string that can be converted into a valid date. |
| `calendars` | `number \| undefined` | `1` | Specifies how many individual calendars should be displayed side by side on desktop devices. Increasing this number allows your users to view multiple months (or years, etc.) simultaneously. |
| `className` | `string \| undefined` | - | A string of all classNames you want to apply to the outermost container of the React Calendar component. Use this to style or theme your calendar. |
| `dayFormat` | `"numeric" \| "2-digit" \| ((date: Date) => string \| number) \| undefined` | `numeric` | Sets the format for days. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day. |
| `disabledDates` | `DisabledDate \| DisabledDate[] \| undefined` | - | Specifies one or more dates that cannot be selected by the user. This is useful for disabling weekends, holidays, or any dates that you need to restrict within your React Calendar component. |
| `endDate` | `string \| Date \| null \| undefined` | - | Defines the initially selected ending date (applicable when using range selection). Accepts both Date objects and valid date strings. |
| `firstDayOfWeek` | `number \| undefined` | `1` | Sets the first day of the week. This can be adjusted for different locales or preferences: - `0` = Sunday - `1` = Monday - `2` = Tuesday - `3` = Wednesday - `4` = Thursday - `5` = Friday - `6` = Saturday |
| `locale` | `string \| undefined` | `default` | Indicates the locale for the React Calendar component. If not explicitly provided, it inherits the locale settings from the browser. |
| `maxDate` | `string \| Date \| null \| undefined` | - | The maximum date that can be selected. Any date beyond this value will be disabled within the calendar. This is often used to restrict future selections. |
| `minDate` | `string \| Date \| null \| undefined` | - | The minimum date that can be selected. Any date before this value will be disabled in the calendar. Useful for preventing selection of past dates or creating limited booking windows. |
| `monthFormat` | `"numeric" \| "2-digit" \| "long" \| "narrow" \| "short" \| undefined` | `short` | Sets the format for month names. Accepts built-in formats ('long', 'narrow', 'short', 'numeric', '2-digit'). |
| `navigation` | `boolean \| undefined` | `true` | Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically. |
| `navNextDoubleIcon` | `ReactNode` | - | Customizes the icon for navigating multiple steps forward (double jump), e.g., skipping multiple months or years at once. Ideal for quick navigation through large date ranges. |
| `navNextIcon` | `ReactNode` | - | Customizes the icon for navigating to the next view (month, year, etc.) depending on the current view. Accepts any valid `ReactNode`, enabling you to display text, images, or icons. |
| `navPrevDoubleIcon` | `ReactNode` | - | Customizes the icon for a double jump backward (e.g., jumping multiple months or years at once). This feature simplifies larger date range navigation within your React Calendar component. |
| `navPrevIcon` | `ReactNode` | - | Customizes the icon for navigating to the previous view in the calendar. Accepts any valid ReactNode to provide flexible styling or theming. |
| `navYearFirst` | `boolean \| undefined` | `false` | Reorders the year and month navigation, rendering the year selector first. This offers a different layout for users, particularly useful if you want to prioritize quick year changes. |
| `onCalendarDateChange` | `((date: string \| Date, view: "days" \| "months" \| "quarters" \| "years") => void) \| undefined` | - | Callback fired when the calendar's reference date (i.e., the date indicating which month/year is currently displayed) changes. Receives the new `Date \| string` as an argument for further handling. |
| `onDateHover` | `((date: string \| Date \| null) => void) \| undefined` | - | Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering. |
| `onEndDateChange` | `((date: string \| Date \| null, formatedDate?: string \| undefined) => void) \| undefined` | - | Callback triggered when the end date of the selection changes. Handy for synchronizing the selected date range with external states or components. |
| `onSelectEndChange` | `((value: boolean) => void) \| undefined` | - | Callback fired when toggling between selecting the start date and the end date in range selection mode. Receives a boolean indicating if the user is currently selecting the end date. |
| `onStartDateChange` | `((date: string \| Date \| null, formatedDate?: string \| undefined) => void) \| undefined` | - | Callback triggered when the start date of the selection changes. Useful for updating other parts of your application or performing side effects based on the newly chosen start date. |
| `onViewChanged` | `((view: string) => void) \| undefined` | - | Callback fired when the calendar's view changes between days, months, or years. For instance, moving from day view to month view or from month view to year view. |
| `range` | `boolean \| undefined` | - | Enables range selection mode in your React Calendar component, allowing users to select two dates for a range (start and end). Once enabled, the component will manage state for both dates. |
| `renderDayCell` | `((date: Date, meta: { isDisabled: boolean; isInCurrentMonth: boolean; isInRange: boolean; isSelected: boolean; isToday: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual day cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles, add tooltips, or include additional content in each day cell. |
| `renderMonthCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual month cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each month cell. |
| `renderQuarterCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual quarter cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each quarter cell. |
| `renderYearCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual year cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each year cell. |
| `selectAdjacementDays` | `boolean \| undefined` | `false` | Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`. |
| `selectEndDate` | `boolean \| undefined` | - | Indicates if the user's current selection is targeting the end date in range selection mode. Primarily used for controlled components where you need to manage which date (start or end) is currently active. |
| `selectionType` | `SelectionTypes \| undefined` | `day` | Specifies the selection type for the React Calendar component. Supports: - `day`: Regular day selection (default) - `week`: Select an entire week - `month`: Select an entire month - `year`: Select an entire year |
| `showAdjacementDays` | `boolean \| undefined` | `true` | Controls whether the calendar should display dates from previous or next months (non-selectable if `selectAdjacementDays` is `false`). This can make the calendar visually continuous. |
| `showWeekNumber` | `boolean \| undefined` | `false` | Toggles the display of week numbers (ISO 8601) in the calendar's left column. Particularly beneficial for applications where users need to see the week index for scheduling or reporting. |
| `startDate` | `string \| Date \| null \| undefined` | - | Defines the initially selected starting date. This date can be a Date object or a string convertible into a valid date. Useful when you want to show a pre-selected date. |
| `weekdayFormat` | `number \| "long" \| "narrow" \| "short" \| ((date: Date) => string \| number) \| undefined` | `2` | Sets the format or length of the weekday names displayed in the calendar header. You can use numeric values like 2 (two-letter abbreviations) or built-in string formats like `'long'`, `'narrow'`, and `'short'`, or provide a custom function to fully control how weekdays are displayed. |
| `weekNumbersLabel` | `string \| undefined` | - | Defines the label that appears above the week numbers column. For example, you might label it `'WK'` or `'Week #'`. |
| `yearFormat` | `"numeric" \| "2-digit" \| undefined` | `numeric` | Sets the format for years. Accepts built-in formats ('numeric' or '2-digit'). |


---

# React Calendar Component Styling

> Learn how to customize the React Calendar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

CoreUI React Calendar supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-calendar-table-margin: #{$calendar-table-margin};
--cui-calendar-table-cell-size: #{$calendar-table-cell-size};
--cui-calendar-nav-padding: #{$calendar-nav-padding};
--cui-calendar-nav-border-color: #{$calendar-nav-border-color};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid var(--cui-calendar-nav-border-color);
--cui-calendar-nav-btn-padding-x: #{$calendar-nav-btn-padding-x};
--cui-calendar-nav-btn-padding-y: #{$calendar-nav-btn-padding-y};
@include rfs($calendar-nav-btn-font-size, --cui-calendar-nav-btn-font-size);
--cui-calendar-nav-btn-bg: #{$calendar-nav-btn-bg};
--cui-calendar-nav-btn-border-width: #{$calendar-nav-btn-border-width};
--cui-calendar-nav-btn-border-color: #{$calendar-nav-btn-border-color};
--cui-calendar-nav-btn-border-radius: #{$calendar-nav-btn-border-radius};
--cui-calendar-nav-btn-hover-bg: #{$calendar-nav-btn-hover-bg};
--cui-calendar-nav-btn-hover-border-color: #{$calendar-nav-btn-hover-border-color};
--cui-calendar-nav-btn-focus-border-color: #{$calendar-nav-btn-focus-border-color};
--cui-calendar-nav-btn-focus-box-shadow: #{$calendar-nav-btn-focus-box-shadow};
--cui-calendar-nav-date-font-weight: #{$calendar-nav-date-font-weight};
--cui-calendar-nav-date-color: #{$calendar-nav-date-color};
--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
--cui-calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
--cui-calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
--cui-calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
--cui-calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
--cui-calendar-nav-icon-color: #{$calendar-nav-icon-color};
--cui-calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
--cui-calendar-cell-header-inner-font-weight: #{$calendar-cell-header-inner-font-weight};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-week-number-font-weight: #{$calendar-cell-week-number-font-weight};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
--cui-calendar-cell-hover-color: #{$calendar-cell-hover-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--cui-calendar-cell-today-color: #{$calendar-cell-today-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-calendar-nav-date-color': '#333',
  '--cui-calendar-cell-hover-bg': '#f8f9fa',
}

return <CCalendar style={customVars} />
```

### SASS variables

```scss
$calendar-table-margin:                      .5rem !default;
$calendar-table-cell-size:                   2.75rem !default;

$calendar-nav-padding:                       .5rem !default;
$calendar-nav-border-width:                  1px !default;
$calendar-nav-border-color:                  var(--cui-border-color) !default;

$calendar-nav-btn-padding-y:                 .25rem !default;
$calendar-nav-btn-padding-x:                 .5rem !default;
$calendar-nav-btn-font-size:                 $font-size-sm !default;
$calendar-nav-btn-bg:                        transparent !default;
$calendar-nav-btn-border-width:              1px !default;
$calendar-nav-btn-border-color:              transparent !default;
$calendar-nav-btn-border-radius:             $border-radius !default;

$calendar-nav-btn-hover-bg:                  transparent !default;
$calendar-nav-btn-hover-border-color:        transparent !default;

$calendar-nav-btn-focus-border-color:        transparent !default;
$calendar-nav-btn-focus-box-shadow:          $focus-ring-box-shadow !default;

$calendar-nav-date-font-weight:              600 !default;
$calendar-nav-date-color:                    var(--cui-body-color) !default;
$calendar-nav-date-hover-color:              var(--cui-primary) !default;

$calendar-nav-icon-width:                    1rem !default;
$calendar-nav-icon-height:                   1rem !default;
$calendar-nav-icon-color:                    var(--cui-tertiary-color) !default;
$calendar-nav-icon-hover-color:              var(--cui-body-color) !default;

$calendar-nav-icon-double-next:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#000' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#000' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-next:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;

$calendar-cell-header-inner-font-weight:     600 !default;
$calendar-cell-header-inner-color:           var(--cui-secondary-color) !default;

$calendar-cell-hover-color:                  var(--cui-body-color) !default;
$calendar-cell-hover-bg:                     var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color:               var(--cui-tertiary-color) !default;

$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;

$calendar-cell-selected-color:               $white !default;
$calendar-cell-selected-bg:                  var(--cui-primary) !default;

$calendar-cell-range-bg:                     rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg:               rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color:     var(--cui-primary) !default;

$calendar-cell-today-color:                  var(--cui-danger) !default;

$calendar-cell-week-number-font-weight:      600 !default;
$calendar-cell-week-number-color:            var(--cui-secondary-color) !default;
```


---

# React Callout Component API

> Explore the API reference for the React Callout component and discover how to effectively utilize its props for customization.

## CCallout

```jsx
import { CCallout } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |


---

# React Callout Component Styling

> Learn how to customize the React Callout component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Callout supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-callout-padding-x: #{$callout-padding-x};
--cui-callout-padding-y: #{$callout-padding-y};
--cui-callout-margin-x: #{$callout-margin-x};
--cui-callout-margin-y: #{$callout-margin-y};
--cui-callout-border-width: #{$callout-border-width};
--cui-callout-border-color: #{$callout-border-color};
--cui-callout-border-left-width: #{$callout-border-left-width};
--cui-callout-border-radius: #{$callout-border-radius};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-callout-border-color': '#333',
  '--cui-callout-padding-x': '1rem',
}

return <CCallout style={customVars} />
```

### SASS variables

```scss
$callout-padding-y:                 $spacer !default;
$callout-padding-x:                 $spacer !default;
$callout-margin-y:                  $spacer !default;
$callout-margin-x:                  0 !default;
$callout-border-radius:             var(--cui-border-radius) !default;
$callout-border-width:              var(--cui-border-width) !default;
$callout-border-color:              var(--cui-border-color) !default;
$callout-border-left-width:         calc(#{$callout-border-width} * 4) !default; // stylelint-disable-line function-disallowed-list

$callout-variants: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "danger":     $danger,
  "warning":    $warning,
  "info":       $info,
  "light":      $light,
  "dark":       $dark
) !default;
```


---

# React Card Component API

> Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.

## CCard

```jsx
import { CCard } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `{'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-gradient' \| 'secondary-gradient' \| 'success-gradient' \| 'danger-gradient' \| 'warning-gradient' \| 'info-gradient' \| 'dark-gradient' \| 'light-gradient' \| string }` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `textBgColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 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. |
| `textColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-emphasis' \| 'secondary-emphasis' \| 'success-emphasis' \| 'danger-emphasis' \| 'warning-emphasis' \| 'info-emphasis' \| 'light-emphasis' \| 'body' \| 'body-emphasis' \| 'body-secondary' \| 'body-tertiary' \| 'black' \| 'black-50' \| 'white' \| 'white-50' \| string` | - | Sets the text color context of the component to one of CoreUI’s themed colors. |

## CCardBody

```jsx
import { CCardBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCardFooter

```jsx
import { CCardFooter } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCardGroup

```jsx
import { CCardGroup } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCardHeader

```jsx
import { CCardHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCardImage

```jsx
import { CCardImage } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "img") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `img` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `orientation` | `"top" \| "bottom" \| undefined` | - | Optionally orientate the image to the top, bottom, or make it overlaid across the card. |

## CCardImageOverlay

```jsx
import { CCardImageOverlay } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCardLink

```jsx
import { CCardLink } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |

## CCardSubtitle

```jsx
import { CCardSubtitle } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h6") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h6` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CCardText

```jsx
import { CCardText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "p") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `p` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CCardTitle

```jsx
import { CCardTitle } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h5") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h5` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Card Component

> Learn how to use CoreUI’s React Bootstrap Card component to build flexible content containers with headers, footers, images, list groups, and responsive layouts.

## About React Bootstrap Card Component

The React Bootstrap Card component is a versatile container used to display content in a structured and responsive way. It supports images, headers, footers, background styles, and more—styled to match Bootstrap's visual language.

## Example usage

React Bootstrap Cards require minimal markup and offer maximum flexibility. They use flexbox for layout, have no default margins, and fill their parent container by default.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Content types supported by React Bootstrap Card

### Card body

The main block of the card is wrapped in `<CCardBody>` for consistent padding.

```html
import React from 'react'
import { CCard, CCardBody } from '@coreui/react'

export const CardBodyExample = () => {
  return (
    <CCard>
      <CCardBody>This is some text within a card body.</CCardBody>
    </CCard>
  )
}
```

### Titles, text, and links

Use `<CCardTitle>`, `<CCardSubtitle>`, and `<CCardLink>` to structure text and links inside cards.

```html
import React from 'react'
import { CCard, CCardBody, CCardLink, CCardSubtitle, CCardText, CCardTitle } from '@coreui/react'

export const CardTitleExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
        <CCardLink href="#">Card link</CCardLink>
        <CCardLink href="#">Another link</CCardLink>
      </CCardBody>
    </CCard>
  )
}
```

### Images

Use `orientation="top"` to position an image at the top of the card. Use `<CCardText>` to add and style text content.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'

export const CardImagesExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
      </CCardBody>
    </CCard>
  )
}
```

### List groups

Display structured lists inside cards using flush list groups.

```html
import React from 'react'
import { CCard, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroupsExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardHeader, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroups2Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardHeader>Header</CCardHeader>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardFooter, CListGroup, CListGroupItem } from '@coreui/react'

export const CardListGroups3Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
      <CCardFooter>Footer</CCardFooter>
    </CCard>
  )
}
```

### Kitchen sink

Combine multiple content elements (e.g. image, text, list group) to create a comprehensive card layout.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardImage,
  CCardLink,
  CCardText,
  CCardTitle,
  CListGroup,
  CListGroupItem,
} from '@coreui/react'

export const CardKitchenSinkExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
      <CCardBody>
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          Some quick example text to build on the card title and make up the bulk of the card's
          content.
        </CCardText>
      </CCardBody>
      <CListGroup flush>
        <CListGroupItem>Cras justo odio</CListGroupItem>
        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
        <CListGroupItem>Vestibulum at eros</CListGroupItem>
      </CListGroup>
      <CCardBody>
        <CCardLink href="#">Card link</CCardLink>
        <CCardLink href="#">Another link</CCardLink>
      </CCardBody>
    </CCard>
  )
}
```

### Header and footer

Use `<CCardHeader>` and `<CCardFooter>` to add headers and footers. You can style headers with `as="h5"` or similar props.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'

export const CardHeaderExample = () => {
  return (
    <CCard>
      <CCardHeader>Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'

export const CardHeader2Example = () => {
  return (
    <CCard>
      <CCardHeader as="h5">Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader } from '@coreui/react'

export const CardHeader3Example = () => {
  return (
    <CCard>
      <CCardHeader>Quote</CCardHeader>
      <CCardBody>
        <blockquote className="blockquote mb-0">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
          <footer className="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </footer>
        </blockquote>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardFooter,
  CCardHeader,
  CCardText,
  CCardTitle,
} from '@coreui/react'

export const CardHeaderAndFooterExample = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>Header</CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
      <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
    </CCard>
  )
}
```

## Sizing React Bootstrap Cards

Cards are full-width by default. Control width using layout grids, utilities, or custom CSS.

### Grid layout

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardSizingExample = () => {
  return (
    <CRow>
      <CCol sm={6}>
        <CCard>
          <CCardBody>
            <CCardTitle>Special title treatment</CCardTitle>
            <CCardText>
              With supporting text below as a natural lead-in to additional content.
            </CCardText>
            <CButton color="primary" href="#">
              Go somewhere
            </CButton>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm={6}>
        <CCard>
          <CCardBody>
            <CCardTitle>Special title treatment</CCardTitle>
            <CCardText>
              With supporting text below as a natural lead-in to additional content.
            </CCardText>
            <CButton color="primary" href="#">
              Go somewhere
            </CButton>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

### Utility classes

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardSizing2Example = () => {
  return (
    <>
      <CCard className="w-75 mb-3">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="w-50">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
    </>
  )
}
```

### Custom CSS

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardSizing3Example = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Text alignment

Use Bootstrap's text alignment utilities to position card content.

```html
import React from 'react'
import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'

export const CardTextAlignmentExample = () => {
  return (
    <>
      <CCard className="mb-3" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="mb-3 text-center" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard className="text-end" style={{ width: '18rem' }}>
        <CCardBody>
          <CCardTitle>Special title treatment</CCardTitle>
          <CCardText>
            With supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
    </>
  )
}
```

## Navigation

Add navigational elements using `<CNav>` inside a card header.

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCardText,
  CCardTitle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const CardNavigationExample = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>
        <CNav variant="tabs" className="card-header-tabs">
          <CNavItem>
            <CNavLink href="#" active>
              Active
            </CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#">Link</CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#" disabled>
              Disabled
            </CNavLink>
          </CNavItem>
        </CNav>
      </CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCardText,
  CCardTitle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const CardNavigation2Example = () => {
  return (
    <CCard className="text-center">
      <CCardHeader>
        <CNav variant="pills" className="card-header-pills">
          <CNavItem>
            <CNavLink href="#" active>
              Active
            </CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#">Link</CNavLink>
          </CNavItem>
          <CNavItem>
            <CNavLink href="#" disabled>
              Disabled
            </CNavLink>
          </CNavItem>
        </CNav>
      </CCardHeader>
      <CCardBody>
        <CCardTitle>Special title treatment</CCardTitle>
        <CCardText>
          With supporting text below as a natural lead-in to additional content.
        </CCardText>
        <CButton color="primary" href="#">
          Go somewhere
        </CButton>
      </CCardBody>
    </CCard>
  )
}
```

## Image placement in React Bootstrap Cards

### Image caps (top or bottom)

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardImageCapsExample = () => {
  return (
    <>
      <CCard className="mb-3">
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard className="mb-3">
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
        <CCardImage orientation="bottom" src={'/assets/img/react.jpg'} />
      </CCard>
    </>
  )
}
```

### Image overlays

Overlay content on top of background images using Bootstrap utility classes.

```html
import React from 'react'
import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'

export const CardImageOverlaysExample = () => {
  return (
    <CCard className="mb-3 bg-dark text-white">
      <CCardImage src={'/assets/img/react.jpg'} />
      <CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
        <CCardTitle>Card title</CCardTitle>
        <CCardText>
          This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.
        </CCardText>
        <CCardText>Last updated 3 mins ago</CCardText>
      </CCardImageOverlay>
    </CCard>
  )
}
```

## Horizontal layout

Use `.g-0` and grid column classes to create responsive horizontal cards.

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardImageHorizontalExample = () => {
  return (
    <CCard className="mb-3" style={{ maxWidth: '540px' }}>
      <CRow className="g-0">
        <CCol md={4}>
          <CCardImage src={'/assets/img/react400.jpg'} />
        </CCol>
        <CCol md={8}>
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
            <CCardText>
              <small className="text-body-secondary">Last updated 3 mins ago</small>
            </CCardText>
          </CCardBody>
        </CCol>
      </CRow>
    </CCard>
  )
}
```

## Styling options

### Background and text color

Use the `color` prop to control card background and text color.

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesBackgroundAndColorExample = () => {
  const colors = [
    { color: 'primary' },
    { color: 'secondary' },
    { color: 'success' },
    { color: 'danger' },
    { color: 'warning' },
    { color: 'info' },
    { color: 'light' },
    { color: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard textBgColor={item.color} className="mb-3">
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

### Border customization

Apply Bootstrap border utilities or the `textColor` prop to customize card borders.

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesBorderExample = () => {
  const colors = [
    { color: 'primary', textColor: 'primary' },
    { color: 'secondary', textColor: 'secondary' },
    { color: 'success', textColor: 'success' },
    { color: 'danger', textColor: 'danger' },
    { color: 'warning', textColor: 'warning' },
    { color: 'info', textColor: 'info' },
    { color: 'dark', textColor: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

### Top border only

```html
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardStylesTopBorderExample = () => {
  const colors = [
    { color: 'primary', textColor: 'primary' },
    { color: 'secondary', textColor: 'secondary' },
    { color: 'success', textColor: 'success' },
    { color: 'danger', textColor: 'danger' },
    { color: 'warning', textColor: 'warning' },
    { color: 'info', textColor: 'info' },
    { color: 'dark', textColor: 'dark' },
  ]

  return (
    <CRow>
      {colors.map((item, index) => (
        <CCol sm={6} key={index}>
          <CCard
            textColor={item.textColor}
            className={`mb-3 border-top-${item.color} border-top-3`}
          >
            <CCardHeader>Header</CCardHeader>
            <CCardBody>
              <CCardTitle>{item.color} card title</CCardTitle>
              <CCardText>
                Some quick example text to build on the card title and make up the bulk of the
                card's content.
              </CCardText>
            </CCardBody>
          </CCard>
        </CCol>
      ))}
    </CRow>
  )
}
```

## Layout variations

### Card groups

Group cards to render them with equal width and height.

```html
import React from 'react'
import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'

export const CardGroupsExample = () => {
  return (
    <CCardGroup>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This card has supporting text below as a natural lead-in to additional content.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This card has even longer content than the first to show that equal height
            action.
          </CCardText>
          <CCardText>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardText>
        </CCardBody>
      </CCard>
    </CCardGroup>
  )
}
```

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardGroup,
  CCardImage,
  CCardText,
  CCardTitle,
} from '@coreui/react'

export const CardGroups2Example = () => {
  return (
    <CCardGroup>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This card has supporting text below as a natural lead-in to additional content.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
      <CCard>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            This is a wider card with supporting text below as a natural lead-in to additional
            content. This card has even longer content than the first to show that equal height
            action.
          </CCardText>
        </CCardBody>
        <CCardFooter>
          <small className="text-body-secondary">Last updated 3 mins ago</small>
        </CCardFooter>
      </CCard>
    </CCardGroup>
  )
}
```

### Grid-based cards

Use `<CRow>` and grid props to control the layout of multiple cards in a responsive grid.

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGridExample = () => {
  return (
    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGrid2Example = () => {
  return (
    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard>
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

```html
import React from 'react'
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'

export const CardGrid3Example = () => {
  return (
    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This card has supporting text below as a natural lead-in to additional content.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This card has even longer content than the first to show that equal height
              action.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

```html
import React from 'react'
import {
  CCard,
  CCardBody,
  CCardFooter,
  CCardImage,
  CCardText,
  CCardTitle,
  CCol,
  CRow,
} from '@coreui/react'

export const CardGrid4Example = () => {
  return (
    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This card has supporting text below as a natural lead-in to additional content.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol xs>
        <CCard className="h-100">
          <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>
              This is a wider card with supporting text below as a natural lead-in to additional
              content. This card has even longer content than the first to show that equal height
              action.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            <small className="text-body-secondary">Last updated 3 mins ago</small>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
  )
}
```

## API reference

- [&lt;CCard /&gt;](../api/#ccard)
- [&lt;CCardBody /&gt;](../api/#ccardbody)
- [&lt;CCardFooter /&gt;](../api/#ccardfooter)
- [&lt;CCardGroup /&gt;](../api/#ccardgroup)
- [&lt;CCardHeader /&gt;](../api/#ccardheader)
- [&lt;CCardImage /&gt;](../api/#ccardimage)
- [&lt;CCardImageOverlay /&gt;](../api/#ccardimageoverlay)
- [&lt;CCardLink /&gt;](../api/#ccardlink)
- [&lt;CCardSubtitle /&gt;](../api/#ccardsubtitle)
- [&lt;CCardText /&gt;](../api/#ccardtext)
- [&lt;CCardTitle /&gt;](../api/#ccardtitle)


---

# React Card Component Styling

> Learn how to customize the React Card component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Card supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-card-spacer-y: #{$card-spacer-y};
--cui-card-spacer-x: #{$card-spacer-x};
--cui-card-title-spacer-y: #{$card-title-spacer-y};
--cui-card-title-color: #{$card-title-color};
--cui-card-subtitle-color: #{$card-subtitle-color};
--cui-card-border-width: #{$card-border-width};
--cui-card-border-color: #{$card-border-color};
--cui-card-border-radius: #{$card-border-radius};
--cui-card-box-shadow: #{$card-box-shadow};
--cui-card-inner-border-radius: #{$card-inner-border-radius};
--cui-card-cap-padding-y: #{$card-cap-padding-y};
--cui-card-cap-padding-x: #{$card-cap-padding-x};
--cui-card-cap-bg: #{$card-cap-bg};
--cui-card-cap-color: #{$card-cap-color};
--cui-card-height: #{$card-height};
--cui-card-color: #{$card-color};
--cui-card-bg: #{$card-bg};
--cui-card-img-overlay-padding: #{$card-img-overlay-padding};
--cui-card-group-margin: #{$card-group-margin};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-card-cap-bg': '#555',
  '--cui-card-color': '#efefef',
}

return <CCard style={customVars}>{/* Card content */}</CCard>
```

### SASS variables

```scss
$card-spacer-y:                     $spacer !default;
$card-spacer-x:                     $spacer !default;
$card-title-spacer-y:               $spacer * .5 !default;
$card-title-color:                  null !default;
$card-subtitle-color:               null !default;
$card-border-width:                 var(--cui-border-width) !default;
$card-border-color:                 var(--cui-border-color-translucent) !default;
$card-border-radius:                var(--cui-border-radius) !default;
$card-box-shadow:                   null !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y:                $card-spacer-y * .5 !default;
$card-cap-padding-x:                $card-spacer-x !default;
$card-cap-bg:                       rgba(var(--cui-body-color-rgb), .03) !default;
$card-cap-color:                    null !default;
$card-height:                       null !default;
$card-color:                        null !default;
$card-bg:                           var(--cui-body-bg) !default;
$card-img-overlay-padding:          $spacer !default;
$card-group-margin:                 $grid-gutter-width * .5 !default;
```


---

# React Carousel Component API

> Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.

## CCarousel

```jsx
import { CCarousel } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeIndex` | `number \| undefined` | `0` | index of the active item. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `controls` | `boolean \| undefined` | - | Adding in the previous and next controls. |
| `dark` | `boolean \| undefined` | - | Add darker controls, indicators, and captions. |
| `indicators` | `boolean \| undefined` | - | Adding indicators at the bottom of the carousel for each item. |
| `interval` | `number \| boolean \| undefined` | `5000` | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| `onSlid` | `((active: number, direction: string) => void) \| undefined` | - | Callback fired when a slide transition end. |
| `onSlide` | `((active: number, direction: string) => void) \| undefined` | - | Callback fired when a slide transition starts. |
| `pause` | `boolean \| "hover" \| undefined` | `hover` | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. |
| `touch` | `boolean \| undefined` | `true` | Set whether the carousel should support left/right swipe interactions on touchscreen devices. |
| `transition` | `"slide" \| "crossfade" \| undefined` | - | Set type of the transition. |
| `wrap` | `boolean \| undefined` | `true` | Set whether the carousel should cycle continuously or have hard stops. |

## CCarouselCaption

```jsx
import { CCarouselCaption } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CCarouselItem

```jsx
import { CCarouselItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `interval` | `number \| boolean \| undefined` | `false` | The amount of time to delay between automatically cycling an item. |


---

# React Bootstrap Carousel Component

> Discover how to use the React Bootstrap Carousel component from CoreUI to build responsive, customizable image and content sliders with indicators, captions, and transitions.

## How the React Bootstrap Carousel component works

The React Bootstrap Carousel component is a responsive slideshow for cycling through a set of images, text, or custom HTML content. It supports controls, indicators, captions, transitions, and responsive behavior out of the box.

The component also supports the [Page Visibility API](https://www.w3.org/TR/page-visibility/), ensuring slides don’t transition when the browser tab is inactive.

## React Bootstrap Carousel examples

### Slides only

Basic React Bootstrap Carousel with no controls or indicators.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselSlidesOnlyExample = () => {
  return (
    <CCarousel>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With controls

Add `controls` prop to include previous/next navigation arrows.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithControlsExample = () => {
  return (
    <CCarousel controls>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With indicators

Include slide indicators alongside the navigation arrows for better user interaction.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithIndicatorsExample = () => {
  return (
    <CCarousel controls indicators>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

### With captions

Enhance each carousel slide with a caption using the `<CCarouselCaption>` component. Use responsive utility classes like `.d-none` and `.d-md-block` to control visibility across devices.

```html
import React from 'react'
import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'

export const CarouselWithCaptionsExample = () => {
  return (
    <CCarousel controls indicators>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
    </CCarousel>
  )
}
```

### Crossfade transition

Apply `transition="crossfade"` to enable a fade animation instead of the default sliding effect.

```html
import React from 'react'
import { CCarousel, CCarouselItem, CImage } from '@coreui/react'

export const CarouselCrossfadeExample = () => {
  return (
    <CCarousel controls transition="crossfade">
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
      </CCarouselItem>
    </CCarousel>
  )
}
```

## Dark variant of React Bootstrap Carousel

Use the `dark` prop on `<CCarousel>` to enable dark-themed controls, indicators, and captions. This uses CSS filters and Sass variables to invert styles and maintain readability on dark backgrounds.

```html
import React from 'react'
import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'

export const CarouselDarkVariantExample = () => {
  return (
    <CCarousel controls indicators dark>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/react.jpg'} alt="slide 1" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/vue.jpg'} alt="slide 2" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
      <CCarouselItem>
        <CImage className="d-block w-100" src={'/assets/img/angular.jpg'} alt="slide 3" />
        <CCarouselCaption className="d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </CCarouselCaption>
      </CCarouselItem>
    </CCarousel>
  )
}
```

## API reference

Refer to the API documentation below for all supported props of the React Bootstrap Carousel component:

- [&lt;CCarousel /&gt;](../api/#ccarousel)
- [&lt;CCarouselCaption /&gt;](../api/#ccarouselcaption)
- [&lt;CCarouselItem /&gt;](../api/#ccarouselitem)


---

# React Carousel Component Styling

> Learn how to customize the React Carousel component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$carousel-control-color:             $white !default;
$carousel-control-width:             15% !default;
$carousel-control-opacity:           .5 !default;
$carousel-control-hover-opacity:     .9 !default;
$carousel-control-transition:        opacity .15s ease !default;
$carousel-control-icon-filter:       null !default;

$carousel-indicator-width:           30px !default;
$carousel-indicator-height:          3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer:          3px !default;
$carousel-indicator-opacity:         .5 !default;
$carousel-indicator-active-bg:       $white !default;
$carousel-indicator-active-opacity:  1 !default;
$carousel-indicator-transition:      opacity .6s ease !default;

$carousel-caption-width:             70% !default;
$carousel-caption-color:             $white !default;
$carousel-caption-padding-y:         1.25rem !default;
$carousel-caption-spacer:            1.25rem !default;

$carousel-control-icon-width:        2rem !default;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;

$carousel-transition-duration:       .6s !default;
$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
```


---

# React Chart.js Component API

> Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.

## CChart

```jsx
import { CChart } from '@coreui/react'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `customTooltips` | `boolean \| undefined` | `true` | Enables custom html based tooltips instead of standard tooltips. |
| `data` | `ChartData<keyof ChartTypeRegistry, (number \| [number, number] \| Point \| BubbleDataPoint \| null)[], unknown> \| ((canvas: HTMLCanvasElement) => ChartData<...>)` | - | The data object that is passed into the Chart.js chart (more info). |
| `fallbackContent` | `ReactNode` | - | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. |
| `getDatasetAtEvent` | `((dataset: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void) \| undefined` | - | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. |
| `getElementAtEvent` | `((element: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void) \| undefined` | - | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. |
| `getElementsAtEvent` | `((elements: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void) \| undefined` | - | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. |
| `height` | `number \| undefined` | `150` | Height attribute applied to the rendered canvas. |
| `id` | `string \| undefined` | - | ID attribute applied to the rendered canvas. |
| `options` | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>> \| undefined` | - | The options object that is passed into the Chart.js chart. |
| `plugins` | `Plugin<keyof ChartTypeRegistry, AnyObject>[] \| undefined` | `[]` | The plugins array that is passed into the Chart.js chart (more info) |
| `redraw` | `boolean \| undefined` | `false` | If true, will tear down and redraw chart on all updates. |
| `type` | `{'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter'}` | `bar` | Chart.js chart type. |
| `width` | `number \| undefined` | `300` | Width attribute applied to the rendered canvas. |
| `wrapper` | `boolean \| undefined` | `true` | Put the chart into the wrapper div element. |


---

# React Chip Set Component API

> Explore the API reference for the React Chip Set component to coordinate chip selection, selection mode, and keyboard navigation.

## CChipSet

```jsx
import { CChipSet } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaRemoveLabel` | `string \| undefined` | - | Provides an accessible label for the remove button of every chip rendered by the React Chip Set component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Specifies the root element or custom component used by the React Chip Set component. |
| `chips` | `(string \| CChipSetItem)[] \| undefined` | - | Renders chips from data instead of children. Each item is a string or an object with a `value`, an optional `label`, and any `CChip` props. Children are used when this is omitted. |
| `className` | `string \| undefined` | - | Adds custom classes to the React Chip Set root element. |
| `defaultChips` | `(string \| CChipSetItem)[] \| undefined` | - | Sets the initial uncontrolled chips. In this mode the React Chip Set component owns the list and removes chips itself; use `chips` (with `onRemove`) for a controlled list. |
| `defaultSelected` | `string[] \| undefined` | - | Sets the initial uncontrolled selection of the React Chip Set component. |
| `disabled` | `boolean \| undefined` | - | Disables every chip rendered by the React Chip Set component. |
| `filter` | `boolean \| undefined` | - | Turns the chips into filter chips, each showing a leading check icon while selected. |
| `onRemove` | `((value: string) => void) \| undefined` | - | Callback fired when a chip requests removal. The chips are controlled by their rendered children, so remove the chip from your data in response. |
| `onSelect` | `((selected: string[]) => void) \| undefined` | - | Callback fired when the selected chip values of the React Chip Set component change. |
| `removable` | `boolean \| undefined` | - | Displays a remove button on every chip rendered by the React Chip Set component. |
| `removeIcon` | `ReactNode` | - | Replaces the default remove icon on every chip with a custom icon node. |
| `selectable` | `boolean \| undefined` | - | Enables selection behavior for the chips rendered by the React Chip Set component. |
| `selected` | `string[] \| undefined` | - | Controls the selected chip values of the React Chip Set component. |
| `selectedIcon` | `ReactNode` | - | Replaces the default selected icon shown by filter chips with a custom icon node. |
| `selectionMode` | `"single" \| "multiple" \| undefined` | - | Sets how many chips can be selected at once in the React Chip Set component. |


---

# React Chip Set Component Styling

> Learn how to customize the React Chip Set component with CSS variables and SASS for flexible spacing and seamless integration into your design system.

### CSS variables

React Chip Set supports CSS variables for easy customization. These variables are defined in CoreUI Sass and can also be overridden directly in your stylesheets or inline styles.

```scss
--cui-chip-set-gap: #{$chip-set-gap};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-chip-set-gap': '0.5rem',
}

return (
  <CChipSet style={customVars}>
    <CChip value="apple">Apple</CChip>
    <CChip value="banana">Banana</CChip>
  </CChipSet>
)
```

### SASS variables

```scss
$chip-set-gap: .25rem !default;
```


---

# React Chip Component Accesibility

> Detailed overview of the accessibility and keyboard support features implemented in the CoreUI React Chip component.

## Accessible React Chip

Chips are commonly used for tags, labels, filters, and compact selection controls. When chips are interactive, they should remain keyboard accessible and expose clear state to assistive technologies. This guide explains how CoreUI React Chip supports accessible usage patterns.

### Semantic Structure

- **Native interactive elements**: Chips can be rendered as native interactive elements such as `<button>` using the `as` prop, which keeps behavior predictable for keyboard and assistive technology users.

- **Meaningful structure**: Non-interactive chips remain simple text-like UI elements, while interactive chips use stateful classes and attributes to reflect their behavior.

### ARIA Attributes

CoreUI React Chip applies accessibility attributes to reflect state:

- **`aria-selected`**: Added for selectable chips and synchronized with the selected state.

- **`aria-disabled`**: Applied when the chip is disabled so assistive technologies can identify non-interactive items.

- **Remove button label**: Removable chips expose an accessible label through `ariaRemoveLabel`, which is passed to the remove button as `aria-label`.

### Focus Management

- **Automatic focusability**: Chips become focusable when `selectable` or `removable` is enabled.

- **Keyboard navigation**: Focus can move between chips in the same container using arrow keys, with `Home` and `End` support for jumping to the first or last chip.

- **Remove flow**: When a removable chip is removed with the keyboard, focus moves to a nearby chip when available.

### Visual Indicators

- **Visible focus styles**: Focusable chips display a visible focus state for keyboard users.

- **Selected and active states**: Selectable chips visually reflect their current state, helping users understand which chips are active.

- **Disabled state**: Disabled chips use reduced emphasis to communicate that they are not interactive.

### Keyboard Support

The React Chip component supports keyboard interaction when chips are `selectable` and/or `removable`:

<div className="table-api table-responsive border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Function</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><kbd>Tab</kbd></td>
        <td>Moves focus to the next focusable element.</td>
      </tr>
      <tr>
        <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
        <td>Moves focus to the previous focusable element.</td>
      </tr>
      <tr>
        <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
        <td>Toggles the selected state of the focused chip when `selectable` is enabled.</td>
      </tr>
      <tr>
        <td><kbd>Backspace</kbd> or <kbd>Delete</kbd></td>
        <td>Triggers chip removal when `removable` is enabled.</td>
      </tr>
      <tr>
        <td><kbd>Left Arrow</kbd></td>
        <td>Moves focus to the previous focusable chip in the same container.</td>
      </tr>
      <tr>
        <td><kbd>Right Arrow</kbd></td>
        <td>Moves focus to the next focusable chip in the same container.</td>
      </tr>
      <tr>
        <td><kbd>Home</kbd></td>
        <td>Moves focus to the first focusable chip in the container.</td>
      </tr>
      <tr>
        <td><kbd>End</kbd></td>
        <td>Moves focus to the last focusable chip in the container.</td>
      </tr>
    </tbody>
  </table>
</div>


---

# React Chip Component API

> Explore the API reference for the React Chip and React Chip Component to customize variants, remove behavior, sizes, and interactions.

## CChip

```jsx
import { CChip } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggles the active state of the React Chip component for non-selectable usage. |
| `ariaRemoveLabel` | `string \| undefined` | `Remove` | Provides an accessible label for the remove button in the React Chip component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "span") \| (ElementType & "filter") \| (ElementType & "slot") \| ... 175 more ... \| undefined` | `span` | Specifies the root element or custom component used by the React Chip component. |
| `className` | `string \| undefined` | - | Adds custom classes to the React Chip root element. |
| `clickable` | `boolean \| undefined` | - | Enables interactive hover styling and pointer cursor for the React Chip component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the contextual color of the React Chip component using CoreUI theme colors. |
| `disabled` | `boolean \| undefined` | - | Disables the React Chip component and removes interactive behavior. |
| `filter` | `boolean \| undefined` | - | Turns the React Chip component into a filter chip. A filter chip is selectable and shows a leading check icon while selected. |
| `onDeselect` | `((event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void) \| undefined` | - | Callback fired when the React Chip component becomes deselected. |
| `onRemove` | `((event: KeyboardEvent<HTMLElement> \| MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined` | - | Callback fired when the React Chip component requests removal by button click or keyboard action. |
| `onSelect` | `((event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void) \| undefined` | - | Callback fired when the React Chip component becomes selected. |
| `onSelectedChange` | `((selected: boolean, event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void) \| undefined` | - | Callback fired when the selected state of the React Chip component changes. |
| `removable` | `boolean \| undefined` | - | Displays a remove button inside the React Chip component. |
| `removeIcon` | `ReactNode` | - | Replaces the default remove icon with a custom icon node in the React Chip component. |
| `selectable` | `boolean \| undefined` | - | Enables selectable behavior and keyboard toggle support for the React Chip component. |
| `selected` | `boolean \| undefined` | - | Controls the selected state of a selectable React Chip component. |
| `selectedIcon` | `ReactNode` | - | Replaces the default selected icon shown by a filter React Chip component with a custom icon node. |
| `size` | `"sm" \| "lg" \| undefined` | - | Sets the size of the React Chip component to small or large. |
| `value` | `string \| undefined` | - | Sets the value associated with the React Chip component, used by `CChipSet` to track selection. |
| `variant` | `"outline" \| undefined` | - | Sets the visual variant of the React Chip component to outline style. |


---

# React Chip Component with Bootstrap Styling

> Learn how to build Bootstrap-styled React Chip components in CoreUI with the same examples and behaviors as the CoreUI Bootstrap Chip documentation.

## Overview

The CoreUI **React Bootstrap Chip component** lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, removal, keyboard navigation, and themed styling.

Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection.

- Chips are statically sized and do not scale with the parent by default.
- Chips can include icons, avatars, and remove controls.
- Chips can be active or disabled.
- Chips automatically gain focus when they are `selectable` or `removable`.
- Chips support keyboard navigation and selection in their container.

## When to use chips

Use this React Chip Component when you need:

- Multi-select filters in forms or search interfaces
- Removable tags for selected values
- Keyboard-navigable selection groups
- Compact status tokens with icons or avatars

## Basic chips

Use `CChip` for standalone Bootstrap-styled chips.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Basic chip</CChip>
      <CChip>Basic chip 2</CChip>
      <CChip>Basic chip 3</CChip>
      <CChip>Basic chip 4</CChip>
    </div>
  )
}
```

## Outline chips

Use `variant="outline"` to remove all background images and colors on any chip.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipOutlineExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip variant="outline">Outline chip</CChip>
      <CChip variant="outline">Outline chip 2</CChip>
      <CChip variant="outline">Outline chip 3</CChip>
      <CChip variant="outline">Outline chip 4</CChip>
    </div>
  )
}
```

## Chips with icons

Wrap `CIcon` in a `<span className="chip-icon">` for leading icons.

```html
import React from 'react'
import { CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilInfo, cilUser } from '@coreui/icons'

export const ChipIconExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilUser} />
        </span>
        Chip with icon 1
      </CChip>
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilInfo} />
        </span>
        Chip with icon 2
      </CChip>
    </div>
  )
}
```

## Chips with avatars

Use `.chip-img` for image avatars or combine `CChip` with `CAvatar`.

```html
import React from 'react'
import { CAvatar, CChip } from '@coreui/react'

export const ChipAvatarExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar
      </CChip>
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar 2
      </CChip>
      <CChip>
        <CAvatar color="primary" textColor="white">
          L
        </CAvatar>
        Chip with avatar 3
      </CChip>
      <CChip>
        <CAvatar color="success" textColor="white">
          L
        </CAvatar>
        Chip with avatar 4
      </CChip>
    </div>
  )
}
```

## Variants

Apply color variants to your chips. Chips are subtle by default as this allows for a clear themed active state.

```html
import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip color={color} clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip color={color} active tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}
```

```html
import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipOutlineVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip color={color} variant="outline" clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip color={color} variant="outline" active tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}
```

### Active state

Add `active` to make chips use the solid appearance.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipActiveStateExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Default</CChip>
      <CChip active>Active</CChip>
      <CChip color="primary">Primary</CChip>
      <CChip color="primary" active>
        Active
      </CChip>
      <CChip color="success">Success</CChip>
      <CChip color="success" active>
        Active
      </CChip>
    </div>
  )
}
```

## Sizes

Use `size="sm"` and `size="lg"` for different sizes.

```html
import React from 'react'
import { CAvatar, CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilUser } from '@coreui/icons'

export const ChipSizesExample = () => {
  return (
    <>
      <div className="d-flex flex-wrap gap-1 mb-3">
        <CChip size="sm">Small</CChip>
        <CChip size="sm">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon
        </CChip>
        <CChip size="sm">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Small with avatar
        </CChip>
        <CChip size="sm">
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Small with avatar 2
        </CChip>
        <CChip size="sm" removable>
          Small removable
        </CChip>
      </div>

      <div className="d-flex flex-wrap gap-1 mb-3">
        <CChip>Default</CChip>
        <CChip>
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Default with icon 1
        </CChip>
        <CChip>
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Default with avatar
        </CChip>
        <CChip>
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Default with avatar1
        </CChip>
        <CChip removable>Default removable</CChip>
      </div>

      <div className="d-flex flex-wrap gap-1">
        <CChip size="lg">Large</CChip>
        <CChip size="lg">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon 1
        </CChip>
        <CChip size="lg">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Large with avatar
        </CChip>
        <CChip size="lg">
          <CAvatar color="primary" textColor="white">
            L
          </CAvatar>
          Large with avatar 2
        </CChip>
        <CChip size="lg" removable>
          Large removable
        </CChip>
      </div>
    </>
  )
}
```

## Interactive chips

Use `selectable`, `removable`, `selected`, and `disabled` to match the interactive chip examples from CoreUI.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipInteractiveExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip selectable>Selectable</CChip>
      <CChip removable>Removable</CChip>
      <CChip selectable selected>
        Selected
      </CChip>
      <CChip disabled>Disabled</CChip>
    </div>
  )
}
```

## Remove button

If `removable` is enabled, the remove button is rendered automatically.

```html
import React from 'react'
import { CChip } from '@coreui/react'

export const ChipDismissButtonExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip removable selectable>
        Chip 1
      </CChip>
      <CChip removable selectable>
        Chip 2
      </CChip>
      <CChip removable selectable disabled>
        Chip 3
      </CChip>
      <CChip removable selectable>
        Chip 4
      </CChip>
    </div>
  )
}
```

## Keyboard behavior

Focusable chips (`selectable` or `removable`) support keyboard navigation and actions:

- `Enter` / `Space`: toggle selected state
- `Backspace` / `Delete`: run remove action
- `ArrowLeft` / `ArrowRight`: move focus to previous or next chip
- `Home` / `End`: jump focus to first or last chip in the group

## API reference

See below for the full API reference for all available props for the Bootstrap-styled React Chip Component.

- [&lt;CChip /&gt;](../api/#cchip)


---

# React Chip Component Styling

> Learn how to customize the React Chip component with CSS variables and SASS for flexible styling and seamless integration into your design system.

### CSS variables

React Chip supports CSS variables for easy customization. These variables are defined in CoreUI Sass and can also be overridden directly in your stylesheets or inline styles.

```scss
--cui-chip-height: #{$chip-height};
--cui-chip-padding-x: #{$chip-padding-x};
--cui-chip-gap: #{$chip-gap};
--cui-chip-font-size: #{$chip-font-size};
--cui-chip-font-weight: #{$chip-font-weight};
--cui-chip-border-radius: #{$chip-border-radius};
--cui-chip-img-size: #{$chip-img-size};
--cui-chip-img-border-radius: #{$chip-img-border-radius};
--cui-chip-icon-size: #{$chip-icon-size};
--cui-chip-remove-size: #{$chip-remove-size};
--cui-chip-remove-opacity: #{$chip-remove-opacity};
--cui-chip-remove-hover-opacity: #{$chip-remove-hover-opacity};
--cui-chip-transition: #{$chip-transition};

--cui-chip-color: var(--cui-text-emphasis, #{$chip-color});
--cui-chip-bg: var(--cui-bg-subtle, #{$chip-bg});
--cui-chip-border-width: #{$chip-border-width};
--cui-chip-border-color: #{$chip-border-color};

--cui-chip-active-color: var(--cui-contrast, #{$chip-active-color});
--cui-chip-active-bg: var(--cui-color, #{$chip-active-bg});
--cui-chip-active-border-color: #{$chip-active-border-color};

--cui-chip-hover-color: var(--cui-contrast, #{$chip-hover-color});
--cui-chip-hover-bg: var(--cui-color, #{$chip-hover-bg});
--cui-chip-hover-border-color: #{$chip-hover-border-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-chip-bg': 'var(--cui-primary-bg-subtle)',
  '--cui-chip-color': 'var(--cui-primary-text-emphasis)',
}

return <CChip style={customVars}>Custom chip</CChip>
```

### SASS variables

```scss
$chip-font-size:             .875rem !default;
$chip-font-weight:           $font-weight-normal !default;
$chip-height:                1.75rem !default;
$chip-padding-x:             .625rem !default;
$chip-gap:                   .3125rem !default;
$chip-border-radius:         var(--cui-border-radius-pill) !default;
$chip-icon-size:             1rem !default;
$chip-img-size:              1.25rem !default;
$chip-img-border-radius:     50% !default;
$chip-remove-size:           1rem !default;
$chip-remove-opacity:        .65 !default;
$chip-remove-hover-opacity:  1 !default;
$chip-transition:            background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out !default;

$chip-color:                 var(--cui-body-color) !default;
$chip-bg:                    var(--cui-secondary-bg) !default;
$chip-border-width:          var(--cui-border-width) !default;
$chip-border-color:          transparent !default;

$chip-active-color:          rgba($white, .87) !default;
$chip-active-bg:             var(--cui-primary) !default;
$chip-active-border-color:   transparent !default;

$chip-hover-color:           $chip-color !default;
$chip-hover-bg:              color-mix(in srgb, var(--cui-secondary-bg) 95%, #000) !default;
$chip-hover-border-color:    transparent !default;

$chip-font-size-sm:          .75rem !default;
$chip-height-sm:             1.5rem !default;
$chip-padding-x-sm:          .625rem !default;
$chip-gap-sm:                .25rem !default;
$chip-icon-size-sm:          .875rem !default;
$chip-img-size-sm:           1rem !default;
$chip-remove-size-sm:        .875rem !default;

$chip-font-size-lg:          1rem !default;
$chip-height-lg:             2rem !default;
$chip-padding-x-lg:          .75rem !default;
$chip-gap-lg:                .375rem !default;
$chip-icon-size-lg:          1.25rem !default;
$chip-img-size-lg:           1.5rem !default;
$chip-remove-size-lg:        1.25rem !default;
```


---

# React Close Button Component API

> Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization.

## CCloseButton

```jsx
import { CCloseButton } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string \| undefined` | `Close` | Sets the `aria-label` attribute of the close button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `dark` | `boolean \| undefined` | - | Invert the default color. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `white` | `boolean \| undefined` | - | Change the default color to white. |


---

# React Bootstrap Close Button Component

> Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.

## Using the React Bootstrap Close Button component

The React Bootstrap Close Button component provides a simple and accessible way to dismiss modals, alerts, or other interface elements. It's fully customizable and built with Bootstrap-compatible styles.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonExample = () => {
  return <CCloseButton />
}
```

## Disabled state

React Bootstrap Close Button can be disabled using the `disabled` prop. This changes its `opacity` and applies `pointer-events: none` and `user-select: none` to prevent interactions.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDisabledExample = () => {
  return <CCloseButton disabled />
}
```

## Dark variant

Use the `dark` prop to apply a dark version of the close button. This inverts the icon using the `filter` CSS property for better visibility on dark backgrounds.

```html
import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDarkExample = () => {
  return (
    <>
      <CCloseButton dark />
      <CCloseButton dark disabled />
    </>
  )
}
```

## API reference

Check the API documentation below for the full list of props available in the React Bootstrap Close Button component:

- [&lt;CCloseButton /&gt;](../api/#cclosebutton)


---

# React Collapse Component API

> Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization.

## CCollapse

```jsx
import { CCollapse } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `horizontal` | `boolean \| undefined` | - | Set horizontal collapsing to transition the width instead of height. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of component. |


---

# React Bootstrap Collapse Component

> Learn how to use the React Bootstrap Collapse component from CoreUI to toggle visibility of content panels using animations and Bootstrap-compatible transitions.

## How the React Bootstrap Collapse component works

The React Bootstrap Collapse component allows you to toggle the visibility of content using animated height or width transitions. It’s perfect for creating expandable sections, FAQs, and collapsible panels with clean and accessible markup.

Triggers such as buttons or anchor elements are connected to collapsible targets. The collapse animation modifies the `height` or `width` property, so padding should not be applied directly to the `.collapse` element.

## React Bootstrap Collapse example

You can trigger collapsible content using a button or a link. Below is a simple example using CoreUI components styled with Bootstrap.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        href="#"
        onClick={(event) => {
          event.preventDefault()
          setVisible(!visible)
        }}
      >
        Link
      </CButton>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Button
      </CButton>
      <CCollapse visible={visible}>
        <CCard className="mt-3">
          <CCardBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
            sapiente ea proident.
          </CCardBody>
        </CCard>
      </CCollapse>
    </>
  )
}
```

## Horizontal React Bootstrap Collapse

Use the `horizontal` prop on the React Bootstrap Collapse component to transition the `width` instead of `height`. Don’t forget to apply a specific width to the immediate child of the collapse element.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseHorizontalExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        className="mb-3"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </CButton>
      <div style={{ minHeight: '120px' }}>
        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
          <CCard style={{ width: '300px' }}>
            <CCardBody>
              This is some placeholder content for a horizontal collapse. It's hidden by default and
              shown when triggered.
            </CCardBody>
          </CCard>
        </CCollapse>
      </div>
    </>
  )
}
```

## Multiple collapse targets

React Bootstrap Collapse supports multiple targets toggled by a single trigger. Use a `<CButton>` to show or hide more than one collapsible element at the same time.

```html
import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'

export const CollapseMultipleTargetsExample = () => {
  const [visibleA, setVisibleA] = useState(false)
  const [visibleB, setVisibleB] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
        Toggle first element
      </CButton>
      <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
        Toggle second element
      </CButton>
      <CButton
        color="primary"
        onClick={() => {
          setVisibleA(!visibleA)
          setVisibleB(!visibleB)
        }}
      >
        Toggle both elements
      </CButton>
      <CRow>
        <CCol xs={6}>
          <CCollapse visible={visibleA}>
            <CCard className="mt-3">
              <CCardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
        <CCol xs={6}>
          <CCollapse visible={visibleB}>
            <CCard className="mt-3">
              <CCardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
      </CRow>
    </>
  )
}
```

## API reference

Check the API documentation below to explore all available props for the React Bootstrap Collapse component:

- [&lt;CCollapse /&gt;](../api/#ccollapse)


---

# React Dropdown Component API

> Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.

## CDropdown

```jsx
import { CDropdown } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `alignment` | `'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'}` | - | Specifies the alignment of the React Dropdown Menu within this React Dropdown. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Determines the root node component (native HTML element or a custom React component) for the React Dropdown. |
| `autoClose` | `boolean \| "inside" \| "outside" \| undefined` | `true` | Configures automatic closing behavior for the React Dropdown: - `true` - Close on clicks inside or outside of the React Dropdown Menu. - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`). - `'inside'` - Close only when clicking inside the React Dropdown Menu. - `'outside'` - Close only when clicking outside the React Dropdown Menu. |
| `className` | `string \| undefined` | - | Adds custom classes to the React Dropdown root element. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | - | Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`. |
| `dark` | `boolean \| undefined` | - | Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars. |
| `direction` | `"center" \| "dropup" \| "dropup-center" \| "dropend" \| "dropstart" \| undefined` | - | Specifies the direction of the React Dropdown. |
| `offset` | `[number, number] \| undefined` | `[0, 2]` | Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired right before the React Dropdown becomes hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired immediately after the React Dropdown is displayed. |
| `placement` | `'auto' \| 'auto-start' \| 'auto-end' \| 'top-end' \| 'top' \| 'top-start' \| 'bottom-end' \| 'bottom' \| 'bottom-start' \| 'right-start' \| 'right' \| 'right-end' \| 'left-start' \| 'left' \| 'left-end'` | `bottom-start` | Determines the placement of the React Dropdown Menu after Popper.js modifiers. |
| `popper` | `boolean \| undefined` | `true` | Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu. |
| `popperConfig` | `Partial<Options> \| ((defaultPopperConfig: Partial<Options>) => Partial<Options>) \| undefined` | - | Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options) |
| `portal` | `boolean \| undefined` | `false` | Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning. |
| `reference` | `HTMLElement \| "parent" \| "toggle" \| RefObject<HTMLElement \| null> \| undefined` | `toggle` | Sets the reference element for positioning the React Dropdown Menu. - `toggle` - The React Dropdown Toggle button (default). - `parent` - The React Dropdown wrapper element. - `HTMLElement` - A custom HTML element. - `React.RefObject` - A custom reference element. |
| `variant` | `"btn-group" \| "dropdown" \| "input-group" \| "nav-item" \| undefined` | `dropdown` | Defines the visual variant of the React Dropdown |
| `visible` | `boolean \| undefined` | `false` | Controls the visibility of the React Dropdown Menu: - `true` - Visible - `false` - Hidden |

## CDropdownDivider

```jsx
import { CDropdownDivider } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CDropdownHeader

```jsx
import { CDropdownHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h6") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h6` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CDropdownItem

```jsx
import { CDropdownItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "a") \| (ElementType & "cite") \| (ElementType & "data") \| ... 175 more ... \| undefined` | `a` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |

## CDropdownItemPlain

```jsx
import { CDropdownItemPlain } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "span") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `span` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CDropdownMenu

```jsx
import { CDropdownMenu } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CDropdownToggle

```jsx
import { CDropdownToggle } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `ElementType \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `caret` | `boolean \| undefined` | `true` | Enables pseudo element caret on toggler. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `custom` | `boolean \| undefined` | - | Create a custom toggler which accepts any content. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |
| `navLink` | `boolean \| undefined` | `true` | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. |
| `role` | `string \| undefined` | - | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `split` | `boolean \| undefined` | - | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. |
| `splitLabel` | `string \| undefined` | `Toggle Dropdown` | Screen reader label for split button dropdown toggle. |
| `trigger` | `'hover' \| 'focus' \| 'click'` | `click` | Sets which event handlers you'd like provided to your toggle prop. You can specify one trigger or an array of them. |
| `variant` | `"outline" \| "ghost" \| undefined` | - | Set the button variant to an outlined button or a ghost button. |


---

# React Bootstrap Dropdown Component

> Learn how to use the React Bootstrap Dropdown component from CoreUI to create toggleable, contextual overlays with links, buttons, forms, and more, styled the Bootstrap way.

## Overview of React Bootstrap Dropdown component

The React Bootstrap Dropdown component provides toggleable, contextual overlays for displaying lists, links, forms, and more. It’s powered by [Popper.js](https://popper.js.org/) for positioning, although navbar dropdowns don’t require dynamic placement.

## React Bootstrap Dropdown examples

### Single button dropdowns

You can trigger dropdowns using `<button>` elements:

```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownSingleButtonExample = () => {
  return (
    <CDropdown>
      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

Or with `<a>` elements:

```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'

export const DropdownSingleButton2Example = () => {
  return (
    <CDropdown>
      <CDropdownToggle href="#" color="secondary">
        Dropdown button
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

It works with all button variants:

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSingleButton3Example = () => {
  return (
    <>
      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
        <CDropdown variant="btn-group" key={index}>
          <CDropdownToggle color={color}>{color}</CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      ))}
    </>
  )
}
```

### Split button dropdowns

Use the `split` prop to create a split button dropdown. This adds a dropdown toggle next to the main button.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSplitButtonExample = () => {
  return (
    <>
      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
        <CDropdown variant="btn-group" key={index}>
          <CButton color={color}>{color}</CButton>
          <CDropdownToggle color={color} split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      ))}
    </>
  )
}
```

## Sizing

React Bootstrap Dropdowns support all button sizes:

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSizingLargeExample = () => {
  return (
    <>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="secondary" size="lg">
          Large button
        </CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group">
        <CButton color="secondary" size="lg">
          Large split button
        </CButton>
        <CDropdownToggle color="secondary" size="lg" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```
```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownSizingSmallExample = () => {
  return (
    <>
      <CDropdown variant="btn-group">
        <CDropdownToggle color="secondary" size="sm">
          Small button
        </CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group">
        <CButton color="secondary" size="sm">
          Small split button
        </CButton>
        <CDropdownToggle color="secondary" size="sm" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

## Dark variant

Use the `dark` prop to style the dropdown with a dark theme.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDarkExample = () => {
  return (
    <CDropdown dark>
      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```
```html
import React from 'react'
import {
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
} from '@coreui/react'

export const DropdownDark2Example = () => {
  return (
    <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
        <CCollapse className="navbar-collapse" visible={true}>
          <CNavbarNav>
            <CDropdown dark as="li" variant="nav-item">
              <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownItem href="#">Something else here</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Separated link</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          </CNavbarNav>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}
```

## Directions

> Directions are mirrored in RTL layouts. For example, `.dropstart` appears on the right.

### Centered dropdown

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownCenteredExample = () => {
  return (
    <CDropdown variant="btn-group" direction="center">
      <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Dropup

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropupExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropup">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group" direction="dropup">
        <CButton color="secondary">Small split button</CButton>
        <CDropdownToggle color="secondary" split />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

### Dropup centered

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropupCenteredExample = () => {
  return (
    <CDropdown variant="btn-group" direction="dropup-center">
      <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Dropend

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropendExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropend">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CDropdown variant="btn-group" direction="dropend">
        <CButton color="secondary">Small split button</CButton>
        <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend" />
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
    </>
  )
}
```

### Dropstart

```html
import React from 'react'
import {
  CButton,
  CButtonGroup,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownDropstartExample = () => {
  return (
    <>
      <CDropdown variant="btn-group" direction="dropstart">
        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
          <CDropdownDivider />
          <CDropdownItem href="#">Separated link</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>

      <CButtonGroup>
        <CDropdown variant="btn-group" direction="dropstart">
          <CDropdownToggle color="secondary" split splitLabel="Toggle Dropstart" />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CButton color="secondary">Small split button</CButton>
      </CButtonGroup>
    </>
  )
}
```

## Dropdown menu items

React Bootstrap Dropdowns can include `<a>` or `<button>` elements:

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownMenuItemsExample = () => {
  return (
    <CDropdown>
      <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem as="button">Action</CDropdownItem>
        <CDropdownItem as="button">Another action</CDropdownItem>
        <CDropdownItem as="button">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem as="button">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

Use `<CDropdownItemPlain>` for non-interactive items:

```html
import React from 'react'
import { CDropdownItem, CDropdownItemPlain, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItems2Example = () => {
  return (
    <CDropdownMenu>
      <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Active and disabled items

To mark an item as active:

```html
import React from 'react'
import { CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItemsActiveExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Regular link</CDropdownItem>
      <CDropdownItem href="#" active>
        Active link
      </CDropdownItem>
      <CDropdownItem href="#">Another link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

To mark an item as disabled:

```html
import React from 'react'
import { CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuItemsDisabledExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Regular link</CDropdownItem>
      <CDropdownItem href="#" disabled>
        Disabled link
      </CDropdownItem>
      <CDropdownItem href="#">Another link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

## Menu alignment

Right-align the dropdown using the `alignment="end"` prop:

> Heads up! Dropdowns use Popper.js for positioning.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownMenuAlignmentExample = () => {
  return (
    <CDropdown alignment="end">
      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

### Responsive alignment

Right-align from a specific breakpoint with `alignment="sm:end"` and similar values:

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownResponsiveAlignmentExample = () => {
  return (
    <CDropdown alignment="end">
      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

Left-align from a breakpoint with `alignment="md:start"`:

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'

export const DropdownResponsiveAlignment2Example = () => {
  return (
    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
      <CDropdownToggle color="secondary">
        Right-aligned but left aligned when large screen
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

## Dropdown menu content

### Headers

```html
import React from 'react'
import { CDropdownHeader, CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentHeadersExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownHeader>Dropdown header</CDropdownHeader>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Dividers

```html
import React from 'react'
import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentDividersExample = () => {
  return (
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider />
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  )
}
```

### Text

```html
import React from 'react'
import { CDropdownMenu } from '@coreui/react'

export const DropdownMenuContentTextExample = () => {
  return (
    <CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
      <p>Some example text that's free-flowing within the dropdown menu.</p>
      <p className="mb-0">And this is more example text.</p>
    </CDropdownMenu>
  )
}
```

### Forms

```html
import React from 'react'
import {
  CButton,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
} from '@coreui/react'

export const DropdownMenuContentFormsExample = () => {
  return (
    <CDropdownMenu>
      <CForm className="px-4 py-4">
        <div className="mb-3">
          <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
          <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
        </div>
        <div className="mb-3">
          <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
          <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
        </div>
        <div className="mb-3">
          <CFormCheck id="dropdownCheck" label="Remember me" />
        </div>
        <CButton color="primary" type="submit">
          Sign in
        </CButton>
      </CForm>
      <CDropdownDivider />
      <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
      <CDropdownItem href="#">Forgot password?</CDropdownItem>
    </CDropdownMenu>
  )
}
```

## API reference

Refer to the API below for full details on available components and props in the React Bootstrap Dropdown:

- [&lt;CDropdown /&gt;](../api/#cdropdown)
- [&lt;CDropdownDivider /&gt;](../api/#cdropdowndivider)
- [&lt;CDropdownHeader /&gt;](../api/#cdropdownheader)
- [&lt;CDropdownItem /&gt;](../api/#cdropdownitem)
- [&lt;CDropdownItemPlain /&gt;](../api/#cdropdownitemplain)
- [&lt;CDropdownMenu /&gt;](../api/#cdropdownmenu)
- [&lt;CDropdownToggle /&gt;](../api/#cdropdowntoggle)


---

# React Dropdown Component Styling

> Learn how to customize the React Dropdown component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-dropdown-zindex: #{$zindex-dropdown};
--cui-dropdown-min-width: #{$dropdown-min-width};
--cui-dropdown-padding-x: #{$dropdown-padding-x};
--cui-dropdown-padding-y: #{$dropdown-padding-y};
--cui-dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --cui-dropdown-font-size);
--cui-dropdown-color: #{$dropdown-color};
--cui-dropdown-bg: #{$dropdown-bg};
--cui-dropdown-border-color: #{$dropdown-border-color};
--cui-dropdown-border-radius: #{$dropdown-border-radius};
--cui-dropdown-border-width: #{$dropdown-border-width};
--cui-dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--cui-dropdown-divider-bg: #{$dropdown-divider-bg};
--cui-dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--cui-dropdown-box-shadow: #{$dropdown-box-shadow};
--cui-dropdown-link-color: #{$dropdown-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-link-hover-color};
--cui-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--cui-dropdown-item-padding-x: #{$dropdown-item-padding-x};
--cui-dropdown-item-padding-y: #{$dropdown-item-padding-y};
--cui-dropdown-header-color: #{$dropdown-header-color};
--cui-dropdown-header-padding-x: #{$dropdown-header-padding-x};
--cui-dropdown-header-padding-y: #{$dropdown-header-padding-y};
```

Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.

```scss
--cui-dropdown-color: #{$dropdown-dark-color};
--cui-dropdown-bg: #{$dropdown-dark-bg};
--cui-dropdown-border-color: #{$dropdown-dark-border-color};
--cui-dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--cui-dropdown-link-color: #{$dropdown-dark-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--cui-dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--cui-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--cui-dropdown-header-color: #{$dropdown-dark-header-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-dropdown-color': '#777',
  '--cui-dropdown-bg': '#efefef',
}

return <CDropdown style={customVars}>{/* Dropdown content */}</CDropdown>
```

### SASS variables

```scss
$dropdown-min-width:                10rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                $font-size-base !default;
$dropdown-color:                    var(--cui-body-color) !default;
$dropdown-bg:                       var(--cui-body-bg) !default;
$dropdown-border-color:             var(--cui-border-color-translucent) !default;
$dropdown-border-radius:            var(--cui-border-radius) !default;
$dropdown-border-width:             var(--cui-border-width) !default;
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color !default;
$dropdown-divider-margin-y:         $spacer * .5 !default;
$dropdown-box-shadow:               var(--cui-box-shadow) !default;

$dropdown-link-color:               var(--cui-body-color) !default;
$dropdown-link-hover-color:         $dropdown-link-color !default;
$dropdown-link-hover-bg:            var(--cui-tertiary-bg) !default;

$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;

$dropdown-link-disabled-color:      var(--cui-tertiary-color) !default;

$dropdown-item-padding-y:           $spacer * .25 !default;
$dropdown-item-padding-x:           $spacer !default;

$dropdown-header-color:             $gray-600 !default;
$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
$dropdown-header-padding-y:         $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v4.2.6
// fusv-enable
```

Variables for the dark dropdown:

```scss
$dropdown-dark-color:               $gray-300 !default;
$dropdown-dark-bg:                  $gray-800 !default;
$dropdown-dark-border-color:        $dropdown-border-color !default;
$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
$dropdown-dark-box-shadow:          null !default;
$dropdown-dark-link-color:          $dropdown-dark-color !default;
$dropdown-dark-link-hover-color:    $white !default;
$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color:        $gray-500 !default;
```

Variables for the CSS-based carets that indicate a dropdown's interactivity:

```scss
$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;
```


---

# React Focus Trap Accessibility

> Learn how to implement WCAG 2.1 compliant focus management with the React Focus Trap component for better accessibility.

## WCAG 2.1 Compliance

The React Focus Trap component helps achieve WCAG 2.1 compliance by implementing proper focus management patterns required for accessible web applications. Focus traps are essential for meeting several WCAG success criteria:

### Success Criteria Met

- **2.1.2 No Keyboard Trap (Level A)**: Ensures users can navigate away from trapped content using standard keyboard commands
- **2.4.3 Focus Order (Level A)**: Maintains logical focus order within the trapped area
- **2.4.7 Focus Visible (Level AA)**: Preserves focus indicators within the trap
- **3.2.1 On Focus (Level A)**: Prevents unexpected context changes when focus moves

## Keyboard Navigation

### Tab and Shift+Tab Cycling

When a focus trap is active, the Tab and Shift+Tab keys cycle through focusable elements within the trapped container:

1. **Tab**: Moves focus to the next focusable element
2. **Shift+Tab**: Moves focus to the previous focusable element
3. **Wrapping**: When reaching the last element, Tab wraps to the first element
4. **Reverse Wrapping**: When reaching the first element, Shift+Tab wraps to the last element

### Escape Key Handling

While React Focus Trap doesn't handle the Escape key directly, it's recommended to implement Escape key handling in your application:

```jsx
useEffect(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && trapActive) {
      setTrapActive(false)
    }
  }

  document.addEventListener('keydown', handleEscape)
  return () => document.removeEventListener('keydown', handleEscape)
}, [trapActive])
```

## Screen Reader Support

### Focus Management

React Focus Trap works seamlessly with screen readers by:

- **Maintaining Focus Flow**: Screen readers follow the trapped focus order
- **Preserving Announcements**: Focus changes trigger appropriate screen reader announcements
- **Supporting Navigation**: Screen reader navigation commands work within the trapped area

### ARIA Implementation

When using React Focus Trap, ensure proper ARIA attributes on the container:

```jsx
// Modal Dialog
<CFocusTrap active={isModalOpen} restoreFocus={true}>
  <div 
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    aria-describedby="modal-description"
  >
    <h2 id="modal-title">Dialog Title</h2>
    <p id="modal-description">Dialog description</p>
    {/* Modal content */}
  </div>
</CFocusTrap>

// Menu
<CFocusTrap active={isMenuOpen} focusFirstElement={true}>
  <div role="menu" aria-orientation="vertical">
    <button role="menuitem">Option 1</button>
    <button role="menuitem">Option 2</button>
  </div>
</CFocusTrap>
```

## Best Practices

### When to Use Focus Traps

✅ **Always Use For:**
- Modal dialogs and overlays
- Dropdown and popup menus
- Temporary slide-out panels
- Multi-step wizards or forms

❌ **Avoid Using For:**
- Main page content
- Persistent navigation elements
- Non-interactive content areas

### Focus Restoration

Always use `restoreFocus={true}` for temporary UI elements:

```jsx
// ✅ Good - Temporary overlay
<CFocusTrap active={showModal} restoreFocus={true}>
  <div role="dialog">Modal content</div>
</CFocusTrap>

// ⚠️ Consider carefully - Navigation change
<CFocusTrap active={showSidebar} restoreFocus={false}>
  <nav>Permanent navigation</nav>
</CFocusTrap>
```

### Initial Focus Strategies

Choose the appropriate `focusFirstElement` setting:

- **`focusFirstElement={true}`**: For forms, menus, and interactive content
- **`focusFirstElement={false}`**: For containers, scrollable regions, or when the container itself should receive focus

### Container Requirements

Ensure your container meets accessibility requirements:

```jsx
// ✅ Proper container setup
<CFocusTrap active={true}>
  <div 
    tabIndex={-1}           // Make container focusable
    role="dialog"           // Appropriate role
    aria-label="Settings"  // Accessible name
  >
    {/* Focusable content */}
  </div>
</CFocusTrap>
```

## Testing Guidelines

### Manual Testing

1. **Keyboard Navigation Test**:
   - Use only Tab and Shift+Tab to navigate
   - Verify focus stays within the trapped area
   - Test focus wrapping (first ↔ last element)

2. **Screen Reader Test**:
   - Test with NVDA, JAWS, or VoiceOver
   - Verify proper announcements
   - Check element labels and descriptions

3. **Focus Restoration Test**:
   - Activate trap from different starting elements
   - Verify focus returns to the correct element
   - Test with keyboard and mouse activation

### Automated Testing

```jsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('focus trap maintains keyboard navigation', async () => {
  const user = userEvent.setup()
  
  render(
    <CFocusTrap active={true} focusFirstElement={true}>
      <div>
        <button data-testid="first">First</button>
        <button data-testid="second">Second</button>
      </div>
    </CFocusTrap>
  )

  // First element should receive focus
  await waitFor(() => {
    expect(screen.getByTestId('first')).toHaveFocus()
  })

  // Tab should move to second element
  await user.tab()
  expect(screen.getByTestId('second')).toHaveFocus()

  // Tab should wrap to first element
  await user.tab()
  expect(screen.getByTestId('first')).toHaveFocus()
})
```

## Common Accessibility Issues

### Issue 1: Missing Focus Indicators

**Problem**: Focus indicators are removed or unclear within the trap.

```css
/* ❌ Bad - Removes focus indicators */
.focus-trap *:focus {
  outline: none;
}

/* ✅ Good - Maintains or improves focus indicators */
.focus-trap *:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}
```

### Issue 2: Inaccessible Elements

**Problem**: Elements within the trap cannot receive focus.

```jsx
// ❌ Bad - Button cannot receive focus
<button tabIndex={-1} disabled>Inaccessible</button>

// ✅ Good - Properly focusable elements
<button type="button">Accessible Button</button>
<input type="text" aria-label="Search" />
```

### Issue 3: Missing Labels

**Problem**: Focusable elements lack accessible names.

```jsx
// ❌ Bad - No accessible name
<button onClick={close}>×</button>

// ✅ Good - Clear accessible name
<button onClick={close} aria-label="Close dialog">×</button>
```

## Integration with Other Accessibility Tools

### React Testing Library

Use the `@testing-library/jest-dom` matchers for accessibility testing:

```jsx
expect(element).toHaveFocus()
expect(element).toBeVisible()
expect(element).toHaveAccessibleName('Close dialog')
```

### axe-core Integration

Test focus traps with automated accessibility testing:

```javascript
import { axe, toHaveNoViolations } from 'jest-axe'

test('focus trap has no accessibility violations', async () => {
  const { container } = render(<FocusTrapComponent />)
  const results = await axe(container)
  expect(results).toHaveNoViolations()
})
```

## Resources

- [ARIA Authoring Practices Guide - Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)
- [WebAIM - Keyboard Accessibility](https://webaim.org/techniques/keyboard/)
- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [MDN - Using tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)


---

# React Focus Trap Component API

> Explore the API reference for the React Focus Trap component and discover how to effectively utilize its props for accessibility compliance.

## CFocusTrap

```jsx
import { CFocusTrap } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | `true` | Controls whether the focus trap is active or inactive. When `true`, focus will be trapped within the child element. When `false`, normal focus behavior is restored. |
| `additionalContainer` | `RefObject<HTMLElement \| null> \| undefined` | - | Additional container elements to include in the focus trap. Useful for floating elements like tooltips or popovers that are rendered outside the main container but should be part of the trap. |
| `children` | `ReactElement` | - | Single React element that renders a DOM node and forwards refs properly. The focus trap will be applied to this element and all its focusable descendants. Requirements: - Must be a single ReactElement (not an array or fragment) - Must forward the ref to a DOM element - Should contain focusable elements for proper trap behavior |
| `focusFirstElement` | `boolean \| undefined` | `false` | Controls whether to focus the first selectable element or the container itself. When `true`, focuses the first tabbable element within the container. When `false`, focuses the container element directly. This is useful for containers that should receive focus themselves, such as scrollable regions or custom interactive components. |
| `onActivate` | `(() => void) \| undefined` | - | Callback function invoked when the focus trap becomes active. Useful for triggering additional accessibility announcements or analytics. |
| `onDeactivate` | `(() => void) \| undefined` | - | Callback function invoked when the focus trap is deactivated. Can be used for cleanup, analytics, or triggering state changes. |
| `restoreFocus` | `boolean \| undefined` | `true` | Automatically restores focus to the previously focused element when the trap is deactivated. This is crucial for accessibility as it maintains the user's place in the document when returning from modal dialogs or overlay components. Recommended to be `true` for modal dialogs and popover components. |


---

# React Image Component API

> Explore the API reference for the React Image component and discover how to effectively utilize its props for customization.

## CImage

```jsx
import { CImage } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end" \| undefined` | - | Set the horizontal aligment. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `fluid` | `boolean \| undefined` | - | Make image responsive. |
| `rounded` | `boolean \| undefined` | - | Make image rounded. |
| `thumbnail` | `boolean \| undefined` | - | Give an image a rounded 1px border appearance. |


---

# React Bootstrap Image Component

> Learn how to use the React Bootstrap Image component from CoreUI to create responsive, aligned, and styled images using Bootstrap-friendly utilities and props.

## Responsive React Bootstrap Images

The React Bootstrap Image component supports responsive behavior using the `fluid` prop. This applies `max-width: 100%` and `height: auto` to ensure images scale with their parent container.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageResponsiveExample = () => {
  return <CImage fluid src={'/assets/img/react.jpg'} />
}
```

## React Bootstrap Image thumbnails

Use the `thumbnail` prop to give an image a subtle border and padding, resulting in a thumbnail-style appearance. You can combine it with [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders) for rounded corners.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageThumbnailExample = () => {
  return <CImage rounded thumbnail src={'/assets/img/react400.jpg'} width={200} height={200} />
}
```

## Aligning React Bootstrap Images

Use the `align` prop to control image alignment within the container. This allows you to float images left, right, or center them using Bootstrap-aligned values.

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligningExample = () => {
  return (
    <div className="clearfix">
      <CImage align="start" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
      <CImage align="end" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligning2Example = () => {
  return (
    <div className="clearfix">
      <CImage align="center" rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

```html
import React from 'react'
import { CImage } from '@coreui/react'

export const ImageAligning3Example = () => {
  return (
    <div className="text-center">
      <CImage rounded src={'/assets/img/react400.jpg'} width={200} height={200} />
    </div>
  )
}
```

## API reference

Explore all available props and customization options for the React Bootstrap Image component below:

- [&lt;CImage /&gt;](../api/#cimage)


---

# React List Group Component API

> Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization.

## CListGroup

```jsx
import { CListGroup } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `flush` | `boolean \| undefined` | - | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`). |
| `layout` | `"horizontal" \| "horizontal-sm" \| "horizontal-md" \| "horizontal-lg" \| "horizontal-xl" \| "horizontal-xxl" \| undefined` | - | Specify a layout type. |

## CListGroupItem

```jsx
import { CListGroupItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "li") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `li` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |


---

# React Bootstrap List Group Component

> Learn how to use the React Bootstrap List Group component from CoreUI to display flexible and interactive lists with badges, buttons, contextual styles, and more.

## Basic usage of React Bootstrap List Group

The React Bootstrap List Group component allows you to display a list of content using Bootstrap-styled list items. The default setup uses an unordered list with proper classes.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupExample = () => {
  return (
    <CListGroup>
      <CListGroupItem>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Active items

Add the `active` prop to a `<CListGroupItem>` to visually mark it as the selected item.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupActiveItemsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem active>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Disabled items

Use the `disabled` prop to disable interaction with a list item.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupDisabledItemsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem disabled>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## List group as links or buttons

You can use `<a>` or `<button>` elements for actionable React Bootstrap List Group items. Add the `as="a"` or `as="button"` prop as needed.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupLinksAndButtonsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#" active>
        Cras justo odio
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        Dapibus ac facilisis in
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        {' '}
        Morbi leo risus
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        Porta ac consectetur ac
      </CListGroupItem>
      <CListGroupItem as="a" href="#" disabled>
        Vestibulum at eros
      </CListGroupItem>
    </CListGroup>
  )
}
```
```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupLinksAndButtons2Example = () => {
  return (
    <CListGroup>
      <CListGroupItem as="button" active>
        Cras justo odio
      </CListGroupItem>
      <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
      <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem as="button" disabled>
        Vestibulum at eros
      </CListGroupItem>
    </CListGroup>
  )
}
```

## Flush list group

Remove borders and padding using the `flush` prop. This is especially useful inside Bootstrap-styled cards.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupFlushExample = () => {
  return (
    <CListGroup flush>
      <CListGroupItem>Cras justo odio</CListGroupItem>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem>Morbi leo risus</CListGroupItem>
      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

## Horizontal list group

Add `layout="horizontal"` to display the list items horizontally. For responsive behavior, use values like `horizontal-md`, `horizontal-lg`, etc.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupHorizontalExample = () => {
  const breakpoints: Array<
    | 'horizontal'
    | 'horizontal-sm'
    | 'horizontal-md'
    | 'horizontal-lg'
    | 'horizontal-xl'
    | 'horizontal-xxl'
  > = [
    'horizontal',
    'horizontal-sm',
    'horizontal-md',
    'horizontal-lg',
    'horizontal-xl',
    'horizontal-xxl',
  ]
  return (
    <>
      {breakpoints.map((breakpoint, index) => (
        <CListGroup className="mb-2" layout={breakpoint} key={index}>
          <CListGroupItem>Cras justo odio</CListGroupItem>
          <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
          <CListGroupItem>Morbi leo risus</CListGroupItem>
        </CListGroup>
      ))}
    </>
  )
}
```

> ⚠️ Horizontal list groups cannot be used in combination with `flush`.

## Contextual styling for list items

Use Bootstrap contextual classes such as `color="primary"`, `color="success"`, etc. to style list items based on intent or state.

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupContextualClassesExample = () => {
  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
  return (
    <CListGroup>
      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
      {colors.map((color, index) => (
        <CListGroupItem color={color} key={index}>
          A simple {color} list group item
        </CListGroupItem>
      ))}
    </CListGroup>
  )
}
```
```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupContextualClasses2Example = () => {
  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#">
        Dapibus ac facilisis in
      </CListGroupItem>
      {colors.map((color, index) => (
        <CListGroupItem as="a" href="#" color={color} key={index}>
          A simple {color} list group item
        </CListGroupItem>
      ))}
    </CListGroup>
  )
}
```

## List group with badges

Combine list items with badges to indicate notifications, counts, or statuses.

```html
import React from 'react'
import { CBadge, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupWithBadgesExample = () => {
  return (
    <CListGroup>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Cras justo odio
        <CBadge color="primary" shape="rounded-pill">
          14
        </CBadge>
      </CListGroupItem>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <CBadge color="primary" shape="rounded-pill">
          2
        </CBadge>
      </CListGroupItem>
      <CListGroupItem className="d-flex justify-content-between align-items-center">
        Morbi leo risus
        <CBadge color="primary" shape="rounded-pill">
          1
        </CBadge>
      </CListGroupItem>
    </CListGroup>
  )
}
```

## Custom content inside list group

React Bootstrap List Groups support custom content such as headings, paragraphs, or even full layouts using [Flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/).

```html
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCustomContentExample = () => {
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#" active>
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small>Donec id elit non mi porta.</small>
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small className="text-body-secondary">Donec id elit non mi porta.</small>
      </CListGroupItem>
      <CListGroupItem as="a" href="#">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">List group item heading</h5>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
          blandit.
        </p>
        <small className="text-body-secondary">Donec id elit non mi porta.</small>
      </CListGroupItem>
    </CListGroup>
  )
}
```

## List group with checkboxes and radios

Embed checkboxes or radio buttons inside list items for interactive list selection.

```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadiosExample = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck label="Cras justo odio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Morbi leo risus" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="orta ac consectetur ac" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Vestibulum at eros" />
      </CListGroupItem>
    </CListGroup>
  )
}
```
```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadios2Example = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="First React.js radio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="Second React.js radio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck type="radio" name="reactListGroupRadio" label="Third React.js radio" />
      </CListGroupItem>
    </CListGroup>
  )
}
```
```html
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'

export const ListGroupCheckboxesAndRadios3Example = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck
          hitArea="full"
          label="Second checkbox"
          value=""
          id="secondCheckboxStretched"
          defaultChecked
        />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched" />
      </CListGroupItem>
    </CListGroup>
  )
}
```

## API reference

Explore the full API for the React Bootstrap List Group components:

- [&lt;CListGroup /&gt;](../api/#clistgroup)
- [&lt;CListGroupItem /&gt;](../api/#clistgroupitem)


---

# React ListGroup Component Styling

> Learn how to customize the React ListGroup component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React List Group supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-list-group-color: #{$list-group-color};
--cui-list-group-bg: #{$list-group-bg};
--cui-list-group-border-color: #{$list-group-border-color};
--cui-list-group-border-width: #{$list-group-border-width};
--cui-list-group-border-radius: #{$list-group-border-radius};
--cui-list-group-item-padding-x: #{$list-group-item-padding-x};
--cui-list-group-item-padding-y: #{$list-group-item-padding-y};
--cui-list-group-action-color: #{$list-group-action-color};
--cui-list-group-action-hover-color: #{$list-group-action-hover-color};
--cui-list-group-action-hover-bg: #{$list-group-hover-bg};
--cui-list-group-action-active-color: #{$list-group-action-active-color};
--cui-list-group-action-active-bg: #{$list-group-action-active-bg};
--cui-list-group-disabled-color: #{$list-group-disabled-color};
--cui-list-group-disabled-bg: #{$list-group-disabled-bg};
--cui-list-group-active-color: #{$list-group-active-color};
--cui-list-group-active-bg: #{$list-group-active-bg};
--cui-list-group-active-border-color: #{$list-group-active-border-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-list-group-color': '#ffe484',
  '--cui-list-group-bg': '#efefef',
}

return <CListGroup style={customVars}>{/* List Group content */}</CListGroup>
```

### SASS variables

```scss
$list-group-color:                  var(--cui-body-color) !default;
$list-group-bg:                     var(--cui-body-bg) !default;
$list-group-border-color:           var(--cui-border-color) !default;
$list-group-border-width:           var(--cui-border-width) !default;
$list-group-border-radius:          var(--cui-border-radius) !default;

$list-group-item-padding-y:         $spacer * .5 !default;
$list-group-item-padding-x:         $spacer !default;
// fusv-disable
$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.0.0
$list-group-item-color-scale:       40% !default; // Deprecated in v5.0.0
// fusv-enable

$list-group-hover-bg:               var(--cui-tertiary-bg) !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;

$list-group-disabled-color:         var(--cui-secondary-color) !default;
$list-group-disabled-bg:            $list-group-bg !default;

$list-group-action-color:           var(--cui-secondary-color) !default;
$list-group-action-hover-color:     var(--cui-emphasis-color) !default;

$list-group-action-active-color:    var(--cui-body-color) !default;
$list-group-action-active-bg:       var(--cui-secondary-bg) !default;
```


---

# React Loading Button Component API

> Explore the API reference for the React Loading Button component and discover how to effectively utilize its props for customization.

## CLoadingButton

```jsx
import { CLoadingButton } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `ElementType \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `disabledOnLoading` | `boolean \| undefined` | - | Makes button disabled when loading. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |
| `loading` | `boolean \| undefined` | - | Loading state (set to true to start animation). |
| `role` | `string \| undefined` | - | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `spinnerType` | `"border" \| "grow" \| undefined` | `border` | Sets type of spinner. |
| `timeout` | `number \| undefined` | - | Automatically starts loading animation and stops after a determined amount of milliseconds. |
| `toggle` | `boolean \| undefined` | - | Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the `aria-pressed` attribute. |
| `type` | `"button" \| "submit" \| "reset" \| undefined` | - | Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element. |
| `variant` | `"outline" \| "ghost" \| undefined` | - | Set the button variant to an outlined button or a ghost button. |


---

# React Modal Component API

> Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.

## CModal

```jsx
import { CModal } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `alignment` | `"top" \| "center" \| undefined` | - | Align the modal in the center or top of the screen. |
| `backdrop` | `boolean \| "static" \| undefined` | `true` | Apply a backdrop on body while modal is open. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | - | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. |
| `focus` | `boolean \| undefined` | `true` | Puts the focus on the modal when shown. |
| `fullscreen` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` | - | Set modal to covers the entire user viewport. |
| `keyboard` | `boolean \| undefined` | `true` | Closes the modal when escape key is pressed. |
| `onClose` | `(() => void) \| undefined` | - | Callback fired when the component requests to be closed. |
| `onClosePrevented` | `(() => void) \| undefined` | - | Callback fired when the component requests to be closed. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. |
| `portal` | `boolean \| undefined` | `true` | Generates modal using createPortal. |
| `scrollable` | `boolean \| undefined` | - | Create a scrollable modal that allows scrolling the modal body. |
| `size` | `"sm" \| "lg" \| "xl" \| undefined` | - | Size the component small, large, or extra large. |
| `transition` | `boolean \| undefined` | `true` | Remove animation to create modal that simply appear rather than fade in to view. |
| `unmountOnClose` | `boolean \| undefined` | `true` | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of modal component. |

## CModalBody

```jsx
import { CModalBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CModalFooter

```jsx
import { CModalFooter } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CModalHeader

```jsx
import { CModalHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaCloseLabel` | `string \| undefined` | - | Sets the `aria-label` of the close button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `closeButton` | `boolean \| undefined` | `true` | Add a close button component to the header. |

## CModalTitle

```jsx
import { CModalTitle } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h5") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h5` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |


---

# React Bootstrap Modal Component

> Learn how to use the React Bootstrap Modal component from CoreUI to create accessible, responsive dialogs, confirmations, and popups using Bootstrap-styled modals.

## How to use the React Bootstrap Modal component

The React Bootstrap Modal component offers a lightweight, flexible popup for dialogs, alerts, and forms. It's fully customizable and accessible, with support for animations, scrollable content, multiple sizes, and more.

### Static React Bootstrap Modal example

This static modal example shows the structure of a modal with header, body, and footer content.

```jsx
<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</CModal>
```

### Live demo

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalLiveDemoExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="LiveDemoExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Static backdrop

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalStaticBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch static backdrop modal
      </CButton>
      <CModal
        backdrop="static"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="StaticBackdropExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          I will not close if you click outside me. Don't even try to press escape key.
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Scrolling long content

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalScrollingLongContentExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="ScrollingLongContentExampleLabel"
      >
        <CModalHeader>
          <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalScrollingLongContent2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered scrollable modal
      </CButton>
      <CModal
        alignment="center"
        scrollable
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredScrollableExample2"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Vertically centered modals

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalVerticallyCenteredExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered modal
      </CButton>
      <CModal
        alignment="center"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredExample"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalVerticallyCenteredScrollableExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Vertically centered scrollable modal
      </CButton>
      <CModal
        alignment="center"
        scrollable
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="VerticallyCenteredScrollableExample2"
      >
        <CModalHeader>
          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Tooltips and popovers in modals

```html
import React, { useState } from 'react'
import {
  CButton,
  CModal,
  CModalBody,
  CModalFooter,
  CModalHeader,
  CModalTitle,
  CLink,
  CPopover,
  CTooltip,
} from '@coreui/react'

export const ModalTooltipsAndPopoversExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Launch demo modal
      </CButton>
      <CModal
        alignment="center"
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="TooltipsAndPopoverExample"
      >
        <CModalHeader>
          <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <h5>Popover in a modal</h5>
          <p>
            This
            <CPopover title="Popover title" content="Popover body content is set in this property.">
              <CButton color="primary">button</CButton>
            </CPopover>{' '}
            triggers a popover on click.
          </p>
          <hr />
          <h5>Tooltips in a modal</h5>
          <p>
            <CTooltip content="Tooltip">
              <CLink>This link</CLink>
            </CTooltip>{' '}
            and
            <CTooltip content="Tooltip">
              <CLink>that link</CLink>
            </CTooltip>{' '}
            have tooltips on hover.
          </p>
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Toggle between modals

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalToggleBetweenModalsExample = () => {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Open first modal
      </CButton>
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="ToggleBetweenModalsExample1"
      >
        <CModalHeader>
          <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>Show a second modal and hide this one with the button below.</p>
        </CModalBody>
        <CModalFooter>
          <CButton
            color="primary"
            onClick={() => {
              setVisible(false)
              setVisible2(true)
            }}
          >
            Open second modal
          </CButton>
        </CModalFooter>
      </CModal>
      <CModal
        visible={visible2}
        onClick={() => {
          setVisible(true)
          setVisible2(false)
        }}
        aria-labelledby="ToggleBetweenModalsExample2"
      >
        <CModalHeader>
          <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p>Hide this modal and show the first with the button below.</p>
        </CModalBody>
        <CModalFooter>
          <CButton
            color="primary"
            onClick={() => {
              setVisible(true)
              setVisible2(false)
            }}
          >
            Back to first
          </CButton>
        </CModalFooter>
      </CModal>
    </>
  )
}
```

### Change modal animation

Use Sass variables like `$modal-fade-transform` and `$modal-show-transform` to customize animation. For example:

```scss
$modal-fade-transform: scale(0.8);
```

### Remove modal animation

Disable animation with:

```jsx
<CModal transition={false}>...</CModal>
```

### Accessibility tips

Use `aria-labelledby` and `aria-describedby` on `<CModal>` for improved screen reader support. CoreUI adds required roles and aria attributes automatically.

## React Bootstrap Modal sizes

Modals come in predefined sizes via the `size` prop.

| Size        | Prop     | Max width |
|-------------|----------|-----------|
| Small       | `'sm'`   | 300px     |
| Default     | —        | 500px     |
| Large       | `'lg'`   | 800px     |
| Extra large | `'xl'`   | 1140px    |

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalOptionalSizesExample = () => {
  const [visibleXL, setVisibleXL] = useState(false)
  const [visibleLg, setVisibleLg] = useState(false)
  const [visibleSm, setVisibleSm] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
        Extra large modal
      </CButton>
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
        Large modal
      </CButton>
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
        Small modal
      </CButton>
      <CModal
        size="xl"
        visible={visibleXL}
        onClose={() => setVisibleXL(false)}
        aria-labelledby="OptionalSizesExample1"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        size="lg"
        visible={visibleLg}
        onClose={() => setVisibleLg(false)}
        aria-labelledby="OptionalSizesExample2"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        size="sm"
        visible={visibleSm}
        onClose={() => setVisibleSm(false)}
        aria-labelledby="OptionalSizesExample3"
      >
        <CModalHeader>
          <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
    </>
  )
}
```

## Fullscreen React Bootstrap Modals

Use the `fullscreen` prop to make modals expand to full viewport width/height. You can apply it conditionally based on breakpoints.

| Fullscreen prop | Breakpoint         |
|------------------|--------------------|
| `true`           | Always             |
| `'sm'`           | Below 576px        |
| `'md'`           | Below 768px        |
| `'lg'`           | Below 992px        |
| `'xl'`           | Below 1200px       |
| `'xxl'`          | Below 1400px       |

```html
import React, { useState } from 'react'
import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'

export const ModalFullscreenExample = () => {
  const [visible, setVisible] = useState(false)
  const [visibleSm, setVisibleSm] = useState(false)
  const [visibleMd, setVisibleMd] = useState(false)
  const [visibleLg, setVisibleLg] = useState(false)
  const [visibleXL, setVisibleXL] = useState(false)
  const [visibleXXL, setVisibleXXL] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Full screen
      </CButton>
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
        Full screen below sm
      </CButton>
      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
        Full screen below md
      </CButton>
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
        Full screen below lg
      </CButton>
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
        Full screen below xl
      </CButton>
      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
        Full screen below xxl
      </CButton>
      <CModal
        fullscreen
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="FullscreenExample1"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="sm"
        visible={visibleSm}
        onClose={() => setVisibleSm(false)}
        aria-labelledby="FullscreenExample2"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="md"
        visible={visibleMd}
        onClose={() => setVisibleMd(false)}
        aria-labelledby="FullscreenExample3"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="lg"
        visible={visibleLg}
        onClose={() => setVisibleLg(false)}
        aria-labelledby="FullscreenExample4"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="xl"
        visible={visibleXL}
        onClose={() => setVisibleXL(false)}
        aria-labelledby="FullscreenExample5"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
      <CModal
        fullscreen="xxl"
        visible={visibleXXL}
        onClose={() => setVisibleXXL(false)}
        aria-labelledby="FullscreenExample6"
      >
        <CModalHeader>
          <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
        </CModalHeader>
        <CModalBody>...</CModalBody>
      </CModal>
    </>
  )
}
```

## API reference

Explore the API for the React Bootstrap Modal component and its related parts:

- [&lt;CModal /&gt;](../api/#cmodal)
- [&lt;CModalBody /&gt;](../api/#cmodalbody)
- [&lt;CModalFooter /&gt;](../api/#cmodalfooter)
- [&lt;CModalHeader /&gt;](../api/#cmodalheader)
- [&lt;CModalTitle /&gt;](../api/#cmodaltitle)


---

# React Modal Component Styling

> Learn how to customize the React Modal component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Modal supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-modal-zindex: #{$zindex-modal};
--cui-modal-width: #{$modal-md};
--cui-modal-padding: #{$modal-inner-padding};
--cui-modal-margin: #{$modal-dialog-margin};
--cui-modal-color: #{$modal-content-color};
--cui-modal-bg: #{$modal-content-bg};
--cui-modal-border-color: #{$modal-content-border-color};
--cui-modal-border-width: #{$modal-content-border-width};
--cui-modal-border-radius: #{$modal-content-border-radius};
--cui-modal-box-shadow: #{$modal-content-box-shadow-xs};
--cui-modal-inner-border-radius: #{$modal-content-inner-border-radius};
--cui-modal-header-padding-x: #{$modal-header-padding-x};
--cui-modal-header-padding-y: #{$modal-header-padding-y};
--cui-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--cui-modal-header-border-color: #{$modal-header-border-color};
--cui-modal-header-border-width: #{$modal-header-border-width};
--cui-modal-title-line-height: #{$modal-title-line-height};
--cui-modal-footer-gap: #{$modal-footer-margin-between};
--cui-modal-footer-bg: #{$modal-footer-bg};
--cui-modal-footer-border-color: #{$modal-footer-border-color};
--cui-modal-footer-border-width: #{$modal-footer-border-width};
```

```scss
--cui-backdrop-zindex: #{$zindex-modal-backdrop};
--cui-backdrop-bg: #{$modal-backdrop-bg};
--cui-backdrop-opacity: #{$modal-backdrop-opacity};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-modal-color': '#555',
  '--cui-modal-bg': '#efefef',
}

return <CModal style={customVars}>{/* Modal content */}</CModal>
```

### SASS variables

```scss
$modal-inner-padding:               $spacer !default;

$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               var(--cui-body-color) !default;
$modal-content-bg:                  var(--cui-body-bg) !default;
$modal-content-border-color:        var(--cui-border-color-translucent) !default;
$modal-content-border-width:        var(--cui-border-width) !default;
$modal-content-border-radius:       var(--cui-border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       var(--cui-box-shadow-sm) !default;
$modal-content-box-shadow-sm-up:    var(--cui-box-shadow) !default;

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;

$modal-header-border-color:         var(--cui-border-color) !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-footer-bg:                   null !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-footer-border-width:         $modal-header-border-width !default;

$modal-sm:                          300px !default;
$modal-md:                          500px !default;
$modal-lg:                          800px !default;
$modal-xl:                          1140px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;
```

### SASS loops

[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.

```scss
@each $breakpoint in map.keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  // stylelint-disable-next-line scss/at-function-named-arguments
  $postfix: if(sass($infix != ""): $infix + "-down"; else: "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}
```


---

# React Navbar Component API

> Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.

## CNavbar

```jsx
import { CNavbar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "nav") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `nav` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `colorScheme` | `"dark" \| "light" \| undefined` | - | Sets if the color of text should be colored for a light or dark background. |
| `container` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| "fluid" \| undefined` | - | Defines optional container wrapping children elements. |
| `expand` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` | - | Defines the responsive breakpoint to determine when content collapses. |
| `placement` | `"fixed-top" \| "fixed-bottom" \| "sticky-top" \| undefined` | - | Place component in non-static positions. |

## CNavbarBrand

```jsx
import { CNavbarBrand } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "a") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |

## CNavbarNav

```jsx
import { CNavbarNav } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CNavbarText

```jsx
import { CNavbarText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CNavbarToggler

```jsx
import { CNavbarToggler } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |


---

# React Bootstrap Navbar Component

> Learn how to use the React Bootstrap Navbar component from CoreUI to create responsive navigation headers with branding, dropdowns, collapsible content, and placement options.

## Supported subcomponents in React Bootstrap Navbar

The React Bootstrap Navbar component includes flexible subcomponents for building responsive headers:

- `<CNavbarBrand>` – branding/logo.
- `<CNavbarNav>` – navigation links and dropdowns.
- `<CNavbarToggler>` – toggles content collapse.
- `<CNavbarText>` – inline text.
- `<CCollapse>` – groups and hides navbar content.

## Basic usage of React Bootstrap Navbar

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar expand="lg" className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler onClick={() => setVisible(!visible)} />
        <CCollapse className="navbar-collapse" visible={visible}>
          <CNavbarNav className="me-auto">
            <CNavItem>
              <CNavLink href="#" active>
                Home
              </CNavLink>
            </CNavItem>
            <CNavItem>
              <CNavLink href="#">Link</CNavLink>
            </CNavItem>
            <CDropdown variant="nav-item" popper={false}>
              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Something else here</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
            <CNavItem>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavItem>
          </CNavbarNav>
          <CForm className="d-flex">
            <CFormInput type="search" className="me-2" placeholder="Search" />
            <CButton type="submit" color="success" variant="outline">
              Search
            </CButton>
          </CForm>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}
```

### Branding

Use `<CNavbarBrand>` to display your brand name or logo.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrandExample = () => {
  return (
    <>
      {/* As a link */}
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>

      {/* As a heading */}
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>
    </>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrand2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">
          <img src={'/assets/brand/coreui-signet.svg'} alt="CoreUI Signet" width="22" height="24" />
        </CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarBrand3Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">
          <img src={'/assets/brand/coreui-signet.svg'} alt="CoreUI Signet" width="22" height="24" />{' '}
          CoreUI
        </CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

### Navigation links and dropdowns

Navigation inside the React Bootstrap Navbar uses `<CNavbarNav>`.

```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarNavExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Features</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Pricing</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavLink,
} from '@coreui/react'

export const NavbarNav2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav as="nav">
              <CNavLink href="#" active>
                Home
              </CNavLink>
              <CNavLink href="#">Features</CNavLink>
              <CNavLink href="#">Pricing</CNavLink>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarNav3Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Features</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Pricing</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle>Dropdown link</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
            </CNavbarNav>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### Forms in navbars

Include inputs, buttons, or entire forms in your navbar layout.

```html
import React from 'react'
import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react'

export const NavbarFormsExample = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CForm className="d-flex">
          <CFormInput type="search" className="me-2" placeholder="Search" />
          <CButton type="submit" color="success" variant="outline">
            Search
          </CButton>
        </CForm>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CButton, CContainer, CForm, CFormInput, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarForms2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CForm className="d-flex">
          <CFormInput type="search" className="me-2" placeholder="Search" />
          <CButton type="submit" color="success" variant="outline">
            Search
          </CButton>
        </CForm>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react'

export const NavbarForms3Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CForm className="container-fluid">
        <CInputGroup>
          <CInputGroupText id="basic-addon1">@</CInputGroupText>
          <CFormInput
            placeholder="Username"
            aria-label="Username"
            aria-describedby="basic-addon1"
          />
        </CInputGroup>
      </CForm>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CButton, CForm, CNavbar } from '@coreui/react'

export const NavbarForms4Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CForm className="container-fluid justify-content-start">
        <CButton type="button" color="success" variant="outline" className="me-2">
          Main button
        </CButton>
        <CButton type="button" color="secondary" variant="outline" size="sm">
          Smaller button
        </CButton>
      </CForm>
    </CNavbar>
  )
}
```

### Text in navbars

Use `<CNavbarText>` for inline text blocks.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarText } from '@coreui/react'

export const NavbarText = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarText>Navbar text with an inline element</CNavbarText>
      </CContainer>
    </CNavbar>
  )
}
```

## React Bootstrap Navbar color schemes

Use `colorScheme="light"` or `colorScheme="dark"` combined with `.bg-*` utilities for full control of background and text colors.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarColorSchemesExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="light" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
      <br />
      <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="light" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
      <br />
      <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="primary" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

## Containers

Wrap your navbar in a `<CContainer>` to center its content or apply spacing.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarContainersExample = () => {
  return (
    <CContainer>
      <CNavbar className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
        </CContainer>
      </CNavbar>
    </CContainer>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarContainers2Example = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer md>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

## Navbar placement

Use the `placement` prop to fix navbars to the top or bottom or make them sticky.

```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementExample = () => {
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Default</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementFixedTopExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="fixed-top">
      <CContainer fluid>
        <CNavbarBrand href="#">Fixed top</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementFixedBottomExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="fixed-bottom">
      <CContainer fluid>
        <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React from 'react'
import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'

export const NavbarPlacementStickyTopExample = () => {
  return (
    <CNavbar className="bg-body-tertiary" placement="sticky-top">
      <CContainer fluid>
        <CNavbarBrand href="#">Sticky top</CNavbarBrand>
      </CContainer>
    </CNavbar>
  )
}
```

## Responsive behaviors in React Bootstrap Navbar

Use `expand` prop to control when the navbar collapses:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveTogglerExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveToggler2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavbarResponsiveToggler3Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CNavbar expand="lg" className="bg-body-tertiary">
        <CContainer fluid>
          <CNavbarToggler
            aria-label="Toggle navigation"
            aria-expanded={visible}
            onClick={() => setVisible(!visible)}
          />
          <CNavbarBrand href="#">Navbar</CNavbarBrand>
          <CCollapse className="navbar-collapse" visible={visible}>
            <CNavbarNav className="me-auto mb-2 mb-lg-0">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </CCollapse>
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### External content

You can toggle external containers using collapse plugins.

```html
import React, { useState } from 'react'
import { CCollapse, CContainer, CNavbar, CNavbarToggler } from '@coreui/react'

export const NavbarResponsiveExternalContentExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
        <div className="bg-dark p-4">
          <h5 className="text-body-emphasis h4">Collapsed content</h5>
          <span className="text-body-secondary">Toggleable via the navbar brand.</span>
        </div>
      </CCollapse>
      <CNavbar colorScheme="dark" className="bg-dark">
        <CContainer fluid>
          <CNavbarToggler
            aria-controls="navbarToggleExternalContent"
            aria-label="Toggle navigation"
            onClick={() => setVisible(!visible)}
          />
        </CContainer>
      </CNavbar>
    </>
  )
}
```

### Offcanvas navbars

Turn the responsive navbar into an offcanvas drawer with `expand="*"` or `expand="xxl"`.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  CContainer,
  CDropdown,
  CDropdownItem,
  CDropdownDivider,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const NavbarResponsiveOffcanvasExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
        <CNavbarToggler
          aria-controls="offcanvasNavbar"
          aria-label="Toggle navigation"
          onClick={() => setVisible(!visible)}
        />
        <COffcanvas
          id="offcanvasNavbar"
          placement="end"
          portal={false}
          visible={visible}
          onHide={() => setVisible(false)}
        >
          <COffcanvasHeader>
            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
          </COffcanvasHeader>
          <COffcanvasBody>
            <CNavbarNav>
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </COffcanvasBody>
        </COffcanvas>
      </CContainer>
    </CNavbar>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  CContainer,
  CDropdown,
  CDropdownItem,
  CDropdownDivider,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const NavbarResponsiveOffcanvas2Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar className="bg-body-tertiary" expand="xxl">
      <CContainer fluid>
        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
        <CNavbarToggler
          aria-controls="offcanvasNavbar2"
          aria-label="Toggle navigation"
          onClick={() => setVisible(!visible)}
        />
        <COffcanvas
          id="offcanvasNavbar2"
          placement="end"
          portal={false}
          visible={visible}
          onHide={() => setVisible(false)}
        >
          <COffcanvasHeader>
            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
          </COffcanvasHeader>
          <COffcanvasBody>
            <CNavbarNav className="me-auto">
              <CNavItem>
                <CNavLink href="#" active>
                  Home
                </CNavLink>
              </CNavItem>
              <CNavItem>
                <CNavLink href="#">Link</CNavLink>
              </CNavItem>
              <CDropdown variant="nav-item" popper={false}>
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
                <CDropdownMenu>
                  <CDropdownItem href="#">Action</CDropdownItem>
                  <CDropdownItem href="#">Another action</CDropdownItem>
                  <CDropdownDivider />
                  <CDropdownItem href="#">Something else here</CDropdownItem>
                </CDropdownMenu>
              </CDropdown>
              <CNavItem>
                <CNavLink href="#" disabled>
                  Disabled
                </CNavLink>
              </CNavItem>
            </CNavbarNav>
            <CForm className="d-flex">
              <CFormInput type="search" className="me-2" placeholder="Search" />
              <CButton type="submit" color="success" variant="outline">
                Search
              </CButton>
            </CForm>
          </COffcanvasBody>
        </COffcanvas>
      </CContainer>
    </CNavbar>
  )
}
```

## API reference

Explore the full API for React Bootstrap Navbar components:

- [&lt;CNavbar /&gt;](../api/#cnavbar)
- [&lt;CNavbarBrand /&gt;](../api/#cnavbarbrand)
- [&lt;CNavbarNav /&gt;](../api/#cnavbarnav)
- [&lt;CNavbarText /&gt;](../api/#cnavbartext)
- [&lt;CNavbarToggler /&gt;](../api/#cnavbartoggler)


---

# React Navbar Component Styling

> Learn how to customize the React Navbar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
// stylelint-disable-next-line scss/at-function-named-arguments
--cui-navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
--cui-navbar-padding-y: #{$navbar-padding-y};
--cui-navbar-color: #{$navbar-light-color};
--cui-navbar-hover-color: #{$navbar-light-hover-color};
--cui-navbar-disabled-color: #{$navbar-light-disabled-color};
--cui-navbar-active-color: #{$navbar-light-active-color};
--cui-navbar-brand-padding-y: #{$navbar-brand-padding-y};
--cui-navbar-brand-margin-end: #{$navbar-brand-margin-end};
--cui-navbar-brand-font-size: #{$navbar-brand-font-size};
--cui-navbar-brand-color: #{$navbar-light-brand-color};
--cui-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--cui-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--cui-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--cui-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--cui-navbar-toggler-font-size: #{$navbar-toggler-font-size};
--cui-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--cui-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--cui-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--cui-navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--cui-navbar-toggler-transition: #{$navbar-toggler-transition};
```

Some additional CSS variables are also present on `.navbar-nav`:

```scss
--cui-nav-link-padding-x: 0;
--cui-nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --cui-nav-link-font-size);
--cui-nav-link-font-weight: #{$nav-link-font-weight};
--cui-nav-link-color: var(--cui-navbar-color);
--cui-nav-link-hover-color: var(--cui-navbar-hover-color);
--cui-nav-link-disabled-color: var(--cui-navbar-disabled-color);
```

Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.

```scss
--cui-navbar-color: #{$navbar-dark-color};
--cui-navbar-hover-color: #{$navbar-dark-hover-color};
--cui-navbar-disabled-color: #{$navbar-dark-disabled-color};
--cui-navbar-active-color: #{$navbar-dark-active-color};
--cui-navbar-brand-color: #{$navbar-dark-brand-color};
--cui-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--cui-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--cui-navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-navbar-color': '#24e484',
  '--cui-navbar-hover-color': '1a1a1a',
}

return <CNavbar style={customVars}>{/* Navbar content */}</CNavbar>
```

### SASS variables

Variables for all navbars:

```scss
$navbar-padding-y:                  $spacer * .5 !default;
$navbar-padding-x:                  null !default;

$navbar-nav-link-padding-x:         .5rem !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end:           1rem !default;

$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .75rem !default;
$navbar-toggler-font-size:          $font-size-lg !default;
$navbar-toggler-border-radius:      $btn-border-radius !default;
$navbar-toggler-focus-width:        $btn-focus-width !default;
$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;

$navbar-light-color:                rgba(var(--cui-emphasis-color-rgb), .65) !default;
$navbar-light-hover-color:          rgba(var(--cui-emphasis-color-rgb), .8) !default;
$navbar-light-active-color:         rgba(var(--cui-emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color:       rgba(var(--cui-emphasis-color-rgb), .3) !default;
$navbar-light-icon-color:           rgba($body-color, .75) !default;
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--cui-emphasis-color-rgb), .15) !default;
$navbar-light-brand-color:          $navbar-light-active-color !default;
$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
```

Variables for the [dark navbar](#color-schemes):

```scss
$navbar-dark-color:                 rgba($white, .55) !default;
$navbar-dark-hover-color:           rgba($white, .75) !default;
$navbar-dark-active-color:          $white !default;
$navbar-dark-disabled-color:        rgba($white, .25) !default;
$navbar-dark-icon-color:            $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color:  rgba($white, .1) !default;$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
$navbar-dark-brand-color:           $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
```

### SASS loops

[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.

```scss
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map.keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--cui-navbar-nav-link-padding-x);
            padding-left: var(--cui-navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}
```


---

# React Navs & Tabs Components API

> Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.

## CNav

```jsx
import { CNav } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `layout` | `"fill" \| "justified" \| undefined` | - | Specify a layout type for component. |
| `variant` | `"enclosed" \| "enclosed-pills" \| "pills" \| "tabs" \| "underline" \| "underline-border" \| undefined` | - | Set the nav variant to tabs or pills. |

## CNavItem

```jsx
import { CNavItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "li") \| (ElementType & "cite") \| (ElementType & "data") \| ... 175 more ... \| undefined` | `li` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |

## CNavLink

```jsx
import { CNavLink } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "a") \| (ElementType & "cite") \| (ElementType & "data") \| ... 175 more ... \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `href` | `string \| undefined` | - | The href attribute specifies the URL of the page the link goes to. |

## CTabContent

```jsx
import { CTabContent } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CTabPane

```jsx
import { CTabPane } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `transition` | `boolean \| undefined` | `true` | Enable fade in and fade out transition. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of component. |


---

# React Bootstrap Navs and Tabs Component

> Learn how to use the React Bootstrap Navs and Tabs component from CoreUI to build navigations, tabbed interfaces, dropdowns, and more with responsive and accessible markup.

## React Bootstrap Base Nav

The React Bootstrap Navs and Tabs component provides a flexible base for building navigations. The `<CNav>` component is built with flexbox and supports active, disabled, tabbed, and pill-styled variations.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavExample = () => {
  return (
    <CNav>
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

You can structure navigation with `<ul>`, `<ol>`, or even `<nav>`, as seen here:

```html
import React from 'react'
import { CNav, CNavLink } from '@coreui/react'

export const Nav2Example = () => {
  return (
    <CNav as="nav">
      <CNavLink href="#" active>
        Active
      </CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#" disabled>
        Disabled
      </CNavLink>
    </CNav>
  )
}
```

## React Bootstrap Nav Styles

### Horizontal alignment

Use flexbox utilities to align nav items center or right.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavHorizontalAlignmentExample = () => {
  return (
    <CNav className="justify-content-center">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```
```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavHorizontalAlignment2Example = () => {
  return (
    <CNav className="justify-content-end">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Vertical navs

Stack items vertically using `.flex-column`.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavVerticalExample = () => {
  return (
    <CNav className="flex-column">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Tabs

Switch to tabbed navigation with `variant="tabs"`.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavTabsExample = () => {
  return (
    <CNav variant="tabs">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Pills

Use `variant="pills"` for pill-style nav links.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavPillsExample = () => {
  return (
    <CNav variant="pills">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Underline

Switch to underline style using `variant="underline"`.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavUnderlineExample = () => {
  return (
    <CNav variant="underline">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Underline border

Apply `variant="underline-border"` to create a bordered underline nav.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavUnderlineBorderExample = () => {
  return (
    <CNav variant="underline-border">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Fill and justify navs

Use `layout="fill"` to fill available space, or `layout="justified"` for equal width nav items.

```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavFillAndJustifyExample = () => {
  return (
    <CNav variant="pills" layout="fill">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```
```html
import React from 'react'
import { CNav, CNavItem, CNavLink } from '@coreui/react'

export const NavFillAndJustify2Example = () => {
  return (
    <CNav variant="pills" layout="justified">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

## Flex utility-based responsive navs

Combine responsive flex utilities for fully adaptive nav layouts.

```html
import React from 'react'
import { CNav, CNavLink } from '@coreui/react'

export const NavWorkingWithFlexUtilitiesExample = () => {
  return (
    <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
      <CNavLink href="#" active>
        Active
      </CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#">Link</CNavLink>
      <CNavLink href="#" disabled>
        Disabled
      </CNavLink>
    </CNav>
  )
}
```

## Accessibility in React Bootstrap Navs and Tabs

- Use `role="navigation"` on a parent container.
- Don’t use `role="tablist"` unless you’re building dynamic tab panels.
- CoreUI handles dynamic tab ARIA attributes automatically.

## React Bootstrap Navs with Dropdowns

### Tabs with dropdowns

```html
import React from 'react'
import {
  CDropdown,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavTabsWithDropdownExample = () => {
  return (
    <CNav>
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CDropdown variant="nav-item">
        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

### Pills with dropdowns

```html
import React from 'react'
import {
  CDropdown,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CNav,
  CNavItem,
  CNavLink,
} from '@coreui/react'

export const NavPillsWithDropdownExample = () => {
  return (
    <CNav variant="pills">
      <CNavItem>
        <CNavLink href="#" active>
          Active
        </CNavLink>
      </CNavItem>
      <CDropdown variant="nav-item">
        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
        <CDropdownMenu>
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdownMenu>
      </CDropdown>
      <CNavItem>
        <CNavLink href="#">Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink href="#" disabled>
          Disabled
        </CNavLink>
      </CNavItem>
    </CNav>
  )
}
```

## React Bootstrap Tab Panes

Build dynamic tabbed interfaces using `<CTabContent>` and `<CTabPane>`. These components follow ARIA best practices.

```html
import React, { useState } from 'react'
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'

export const NavTabPanesExample = () => {
  const [activeKey, setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="tabs" role="tablist">
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
            Profile
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
            Contact
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu
          stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles
          vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
          banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee
          squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim
          craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s
          organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
          pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
          mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer
          blog stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'

export const NavTabPanes2Example = () => {
  const [activeKey, setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="pills" role="tablist">
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
            Profile
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
            Contact
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu
          stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles
          vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
          banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee
          squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim
          craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s
          organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
          pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
          mlkshk vice blog. Scenester cred you probably haven&#39;t heard of them, vinyl craft beer
          blog stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}
```

## API reference

Explore the full list of props and components used in React Bootstrap Navs and Tabs:

- [&lt;CNav /&gt;](../api/#cnav)
- [&lt;CNavItem /&gt;](../api/#cnavitem)
- [&lt;CNavLink /&gt;](../api/#cnavlink)
- [&lt;CTabContent /&gt;](../api/#ctabcontent)
- [&lt;CTabPane /&gt;](../api/#ctabpane)


---

# React Navs & Tabs Components Styling

> Learn how to customize the React Navs & Tabs components with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

On the `.nav` base class:

```scss
--cui-nav-link-padding-x: #{$nav-link-padding-x};
--cui-nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --cui-nav-link-font-size);
--cui-nav-link-font-weight: #{$nav-link-font-weight};
--cui-nav-link-color: #{$nav-link-color};
--cui-nav-link-hover-color: #{$nav-link-hover-color};
--cui-nav-link-disabled-color: #{$nav-link-disabled-color};
```

On the `.nav-tabs` modifier class:

```scss
--cui-nav-tabs-border-width: #{$nav-tabs-border-width};
--cui-nav-tabs-border-color: #{$nav-tabs-border-color};
--cui-nav-tabs-border-radius: #{$nav-tabs-border-radius};
--cui-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--cui-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--cui-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--cui-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
```

On the `.nav-pills` modifier class:

```scss
--cui-nav-pills-border-radius: #{$nav-pills-border-radius};
--cui-nav-pills-link-active-color: #{$nav-pills-link-active-color};
--cui-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
```

_Added in 5.0.0._

On the `.nav-underline` modifier class:

```scss
--cui-nav-underline-gap: #{$nav-underline-gap};
--cui-nav-underline-border-width: #{$nav-underline-border-width};
--cui-nav-underline-link-active-color: #{$nav-underline-link-active-color};
```

_Added in 5.0.0._

On the `.nav-underline-border` modifier class:

```scss
--cui-nav-underline-border-gap: #{$nav-underline-border-gap};
--cui-nav-underline-border-border-color: #{$nav-underline-border-border-color};
--cui-nav-underline-border-border-width: #{$nav-underline-border-border-width};
--cui-nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
--cui-nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
--cui-nav-underline-border-link-color: #{$nav-underline-border-link-color};
--cui-nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
--cui-nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-nav-link-color': '#555',
  '--cui-nav-link-disabled-color': '#afaeef',
}

return <CNav style={customVars}>{/* Nav content */}</CNav>
```

### SASS variables

```scss
$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-font-size:                null !default;
$nav-link-font-weight:              null !default;
$nav-link-color:                    var(--cui-link-color) !default;
$nav-link-hover-color:              var(--cui-link-hover-color) !default;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color:           var(--cui-secondary-color) !default;
$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;

$nav-tabs-border-color:             var(--cui-border-color) !default;
$nav-tabs-border-width:             var(--cui-border-width) !default;
$nav-tabs-border-radius:            var(--cui-border-radius) !default;
$nav-tabs-link-hover-border-color:  var(--cui-secondary-bg) var(--cui-secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        var(--cui-emphasis-color) !default;
$nav-tabs-link-active-bg:           var(--cui-body-bg) !default;
$nav-tabs-link-active-border-color: var(--cui-border-color) var(--cui-border-color) $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           var(--cui-border-radius) !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

$nav-underline-gap:                 1rem !default;
$nav-underline-border-width:        .125rem !default;
$nav-underline-link-active-color:   var(--cui-emphasis-color) !default;

$nav-underline-border-gap:                  .5rem !default;
$nav-underline-border-border-color:         var(--cui-border-color) !default;
$nav-underline-border-border-width:         .125rem !default;
$nav-underline-border-link-padding-y:       .5rem !default;
$nav-underline-border-link-padding-x:       .5rem !default;
$nav-underline-border-link-color:           var(--cui-secondary-color) !default;
$nav-underline-border-link-active-color:    var(--cui-primary) !default;
$nav-underline-border-link-disabled-color:  var(--cui-tertiary-color) !default;

$nav-enclosed-padding:                   .125rem !default;
$nav-enclosed-bg:                        var(--cui-tertiary-bg) !default;
$nav-enclosed-border-radius:             $border-radius-lg !default;
$nav-enclosed-link-padding-y:            .375rem !default;
$nav-enclosed-link-padding-x:            .875rem !default;
$nav-enclosed-link-color:                var(--cui-body-color) !default;
$nav-enclosed-link-border-width:         1px !default;
$nav-enclosed-link-active-color:         var(--cui-body-color) !default;
$nav-enclosed-link-active-bg:            var(--cui-body-bg) !default;
$nav-enclosed-link-active-border-color:  var(--cui-border-color) !default;
$nav-enclosed-link-hover-box-shadow:     var(--cui-box-shadow-sm) !default;
$nav-enclosed-link-disabled-color:       var(--cui-secondary-color) !default;
```


---

# React Offcanvas Component API

> Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.

## COffcanvas

```jsx
import { COffcanvas } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `backdrop` | `boolean \| "static" \| undefined` | `true` | Apply a backdrop on body while offcanvas is open. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `dark` | `boolean \| undefined` | - | Sets a darker color scheme. |
| `keyboard` | `boolean \| undefined` | `true` | Closes the offcanvas when escape key is pressed. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `placement` | `"start" \| "end" \| "top" \| "bottom"` | - | Components placement, there’s no default placement. |
| `portal` | `boolean \| undefined` | `false` | Generates modal using createPortal. |
| `responsive` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` | `true` | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. |
| `scroll` | `boolean \| undefined` | `false` | Allow body scrolling while offcanvas is open |
| `visible` | `boolean \| undefined` | `false` | Toggle the visibility of offcanvas component. |

## COffcanvasBody

```jsx
import { COffcanvasBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## COffcanvasHeader

```jsx
import { COffcanvasHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## COffcanvasTitle

```jsx
import { COffcanvasTitle } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "h5") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `h5` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Offcanvas Component

> Learn how to use the React Bootstrap Offcanvas component from CoreUI to create hidden sidebars and sliding panels for navigation, shopping carts, or any additional UI element.

## React Bootstrap Offcanvas examples

The React Bootstrap Offcanvas component allows you to build sidebar-like panels that slide into view from any edge of the screen. These panels are great for navigation menus, shopping carts, and more.

### Static offcanvas component

Here’s a React Bootstrap Offcanvas that is shown by default using `visible={true}`. It includes a header with a close button and a padded body.

```html
import React from 'react'
import {
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasExample = () => {
  return (
    <COffcanvas backdrop={false} placement="start" scroll visible={true}>
      <COffcanvasHeader>
        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
        <CCloseButton className="text-reset" />
      </COffcanvasHeader>
      <COffcanvasBody>
        Content for the offcanvas goes here. You can place just about any React component or custom
        elements here.
      </COffcanvasBody>
    </COffcanvas>
  )
}
```

### Live demo

Click the buttons to toggle visibility of the offcanvas.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasLiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle offcanvas
      </CButton>
      <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Scrollable body

Use the `scroll` prop to allow page scrolling while the offcanvas is visible. Combine it with `backdrop` to control overlay behavior.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasBodyScrollingExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Enable body scrolling
      </CButton>
      <COffcanvas
        backdrop={false}
        placement="start"
        scroll={true}
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Scrollable body with backdrop

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasBodyScrollingAndBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Enable both scrolling &amp; backdrop
      </CButton>
      <COffcanvas
        placement="start"
        scroll={true}
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

### Static backdrop

Prevent closing the React Bootstrap Offcanvas on backdrop click by setting `backdrop="static"`.

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasStaticBackdropExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle static offcanvas
      </CButton>
      <COffcanvas
        backdrop="static"
        placement="start"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Try scrolling the rest of the page to see this option in action.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Dark variant

Add the `dark` prop to match the React Bootstrap Offcanvas with dark themes or layouts.

```html
import React from 'react'
import {
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasDarkExample = () => {
  return (
    <COffcanvas backdrop={false} dark placement="start" scroll visible={true}>
      <COffcanvasHeader>
        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
        <CCloseButton className="text-reset" />
      </COffcanvasHeader>
      <COffcanvasBody>
        Content for the offcanvas goes here. You can place just about any React component or custom
        elements here.
      </COffcanvasBody>
    </COffcanvas>
  )
}
```

## Responsive behavior

Use the `responsive` prop to show the offcanvas below specific breakpoints (e.g., `responsive="lg"`). Above that breakpoint, the offcanvas behaves as a regular visible container.

```html
import React, { useState } from 'react'
import {
  CAlert,
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasResponsiveExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>
        Toggle offcanvas
      </CButton>
      <CAlert className="d-none d-lg-block" color="info">
        Resize your browser to show the responsive offcanvas toggle.
      </CAlert>
      <COffcanvas
        backdrop="static"
        placement="start"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          This is content within an <code>.offcanvas-lg</code>.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Placement options for React Bootstrap Offcanvas

Choose the offcanvas placement with the `placement` prop:

- `placement="start"` – left
- `placement="end"` – right
- `placement="top"` – top
- `placement="bottom"` – bottom

Examples:

```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementTopExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle top offcanvas
      </CButton>
      <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementRightExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle right offcanvas
      </CButton>
      <COffcanvas placement="end" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```
```html
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'

export const OffcanvasPlacementBottomExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle bottom offcanvas
      </CButton>
      <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or
          custom elements here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## Accessibility considerations

React Bootstrap Offcanvas behaves like a modal. Use `aria-labelledby` to link the offcanvas title to assistive technologies. CoreUI automatically adds `role="dialog"` and other ARIA attributes for accessibility.

## API reference

Review the full API for the React Bootstrap Offcanvas component and its parts:

- [&lt;COffcanvas /&gt;](../api/#coffcanvas)
- [&lt;COffcanvasBody /&gt;](../api/#coffcanvasbody)
- [&lt;COffcanvasHeader /&gt;](../api/#coffcanvasheader)
- [&lt;COffcanvasTitle /&gt;](../api/#coffcanvastitle)


---

# React Offcanvas Component Styling

> Learn how to customize the React Offcanvas component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-offcanvas-zindex: #{$zindex-offcanvas};
--cui-offcanvas-width: #{$offcanvas-horizontal-width};
--cui-offcanvas-height: #{$offcanvas-vertical-height};
--cui-offcanvas-padding-x: #{$offcanvas-padding-x};
--cui-offcanvas-padding-y: #{$offcanvas-padding-y};
--cui-offcanvas-color: #{$offcanvas-color};
--cui-offcanvas-bg: #{$offcanvas-bg-color};
--cui-offcanvas-border-width: #{$offcanvas-border-width};
--cui-offcanvas-border-color: #{$offcanvas-border-color};
--cui-offcanvas-box-shadow: #{$offcanvas-box-shadow};
--cui-offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--cui-offcanvas-title-line-height: #{$offcanvas-title-line-height};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-offcanvas-color': '#555',
  '--cui-offcanvas-bg': '#fff',
}

return <COffcanvas style={customVars}>{/* Offcanvas content */}</COffcanvas>
```

### SASS variables

```scss
$offcanvas-padding-y:               $modal-inner-padding !default;
$offcanvas-padding-x:               $modal-inner-padding !default;
$offcanvas-horizontal-width:        400px !default;
$offcanvas-vertical-height:         30vh !default;
$offcanvas-transition-duration:     .3s !default;
$offcanvas-border-color:            $modal-content-border-color !default;
$offcanvas-border-width:            $modal-content-border-width !default;
$offcanvas-title-line-height:       $modal-title-line-height !default;
$offcanvas-bg-color:                var(--cui-body-bg) !default;
$offcanvas-color:                   var(--cui-body-color) !default;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
```


---

# React Pagination Component API

> Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization.

## CPagination

```jsx
import { CPagination } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end" \| undefined` | - | Set the alignment of pagination components. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |

## CPaginationItem

```jsx
import { CPaginationItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Toggle the active state for the component. |
| `as` | `(ElementType & string) \| (ElementType & ComponentClass<any, any>) \| (ElementType & FunctionComponent<any>) \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |


---

# React Bootstrap Pagination Component

> Learn how to use the React Bootstrap Pagination component from CoreUI to create accessible and responsive navigation between pages, including sizing, alignment, and icon support.

## Overview of React Bootstrap Pagination

The React Bootstrap Pagination component helps you build navigation for multi-page content, such as search results or article listings. It's based on semantic HTML with `<ul>` and `<li>` elements, ensuring accessibility and screen reader compatibility.

Wrap the component in a `<nav>` element and use a descriptive `aria-label` like `aria-label="Search results pages"` for clarity.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## Using icons in pagination

You can replace text in pagination buttons with icons or symbols. Make sure to include proper `aria-labels` for accessibility.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationWorkingWithIconsExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}
```

## Disabled and active pagination items

Use the `disabled` prop to indicate non-interactive items and the `.active` class to highlight the current page. CoreUI handles keyboard accessibility with `tabindex="-1"` and JS-based interaction disabling.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationDisabledAndActiveExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem aria-label="Previous" disabled>
        <span aria-hidden="true">&laquo;</span>
      </CPaginationItem>
      <CPaginationItem active>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </CPaginationItem>
    </CPagination>
  )
}
```

## Pagination sizing

Adjust the size of the React Bootstrap Pagination component with the `size` prop. Available values: `lg` (large), `sm` (small).

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingLargeExample = () => {
  return (
    <CPagination size="lg" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```
```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationSizingSmallExample = () => {
  return (
    <CPagination size="sm" aria-label="Page navigation example">
      <CPaginationItem>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## Pagination alignment

Change pagination alignment using the `align` prop: `"start"`, `"center"`, or `"end"`.

```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignmentExample = () => {
  return (
    <CPagination align="center" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```
```html
import React from 'react'
import { CPagination, CPaginationItem } from '@coreui/react'

export const PaginationAlignment2Example = () => {
  return (
    <CPagination align="end" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}
```

## API reference

Here’s the API reference for the React Bootstrap Pagination component:

- [&lt;CPagination /&gt;](../api/#cpagination)
- [&lt;CPaginationItem /&gt;](../api/#cpaginationitem)


---

# React Pagination Component Styling

> Learn how to customize the React Pagination component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React pagination uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-pagination-padding-x: #{$pagination-padding-x};
--cui-pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --cui-pagination-font-size);
--cui-pagination-color: #{$pagination-color};
--cui-pagination-bg: #{$pagination-bg};
--cui-pagination-border-width: #{$pagination-border-width};
--cui-pagination-border-color: #{$pagination-border-color};
--cui-pagination-border-radius: #{$pagination-border-radius};
--cui-pagination-hover-color: #{$pagination-hover-color};
--cui-pagination-hover-bg: #{$pagination-hover-bg};
--cui-pagination-hover-border-color: #{$pagination-hover-border-color};
--cui-pagination-focus-color: #{$pagination-focus-color};
--cui-pagination-focus-bg: #{$pagination-focus-bg};
--cui-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--cui-pagination-active-color: #{$pagination-active-color};
--cui-pagination-active-bg: #{$pagination-active-bg};
--cui-pagination-active-border-color: #{$pagination-active-border-color};
--cui-pagination-disabled-color: #{$pagination-disabled-color};
--cui-pagination-disabled-bg: #{$pagination-disabled-bg};
--cui-pagination-disabled-border-color: #{$pagination-disabled-border-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-pagination-color': '#555',
  '--cui-pagination-bg': '#fff',
}

return <CPagination style={customVars}>{/* Pagination content */}</CPagination>
```

### SASS variables

```scss
$pagination-padding-y:              .375rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;

$pagination-font-size:              $font-size-base !default;

$pagination-color:                  var(--cui-link-color) !default;
$pagination-bg:                     var(--cui-body-bg) !default;
$pagination-border-radius:          var(--cui-border-radius) !default;
$pagination-border-width:           var(--cui-border-width) !default;
$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color:           var(--cui-border-color) !default;

$pagination-focus-color:            var(--cui-link-hover-color) !default;
$pagination-focus-bg:               var(--cui-secondary-bg) !default;
$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
$pagination-focus-outline:          0 !default;

$pagination-hover-color:            var(--cui-link-hover-color) !default;
$pagination-hover-bg:               var(--cui-tertiary-bg) !default;
$pagination-hover-border-color:     var(--cui-border-color) !default; // Todo in v6: remove this?

$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              $component-active-bg !default;
$pagination-active-border-color:    $component-active-bg !default;

$pagination-disabled-color:         var(--cui-secondary-color) !default;
$pagination-disabled-bg:            var(--cui-secondary-bg) !default;
$pagination-disabled-border-color:  var(--cui-border-color) !default;

$pagination-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;

$pagination-border-radius-sm:       var(--cui-border-radius-sm) !default;
$pagination-border-radius-lg:       var(--cui-border-radius-lg) !default;
```


---

# React Placeholder Component API

> Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization.

## CPlaceholder

```jsx
import { CPlaceholder } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `"glow" \| "wave" \| undefined` | - | Set animation type to better convey the perception of something being actively loaded. |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "span") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `span` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `lg` | `number \| undefined` | - | The number of columns on large devices (<1200px). |
| `md` | `number \| undefined` | - | The number of columns on medium devices (<992px). |
| `size` | `"xs" \| "sm" \| "lg" \| undefined` | - | Size the component extra small, small, or large. |
| `sm` | `number \| undefined` | - | The number of columns on small devices (<768px). |
| `xl` | `number \| undefined` | - | The number of columns on X-Large devices (<1400px). |
| `xs` | `number \| undefined` | - | The number of columns on extra small devices (<576px). |
| `xxl` | `number \| undefined` | - | The number of columns on XX-Large devices (≥1400px). |


---

# React Bootstrap Placeholder Component

> Learn how to use the React Bootstrap Placeholder component from CoreUI to create animated loading placeholders that simulate content before it loads.

## About React Bootstrap Placeholder

The React Bootstrap Placeholder component lets you create skeleton loading effects using only HTML and CSS. It's useful for improving perceived performance while content is loading.

React placeholders are fully customizable using utility classes and support animations, sizing, colors, and layout variations.

## React Bootstrap Placeholder example

Here we simulate a "loading card" layout using placeholder elements. The dimensions match the final content layout for a seamless transition.

```html
import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'

export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}
```

## How React Bootstrap Placeholder works

Use the `<CPlaceholder>` component and specify width using grid props like `xs={6}` or utility classes. You can place it inside existing elements or use it standalone.

```html
import React from 'react'
import { CButton, CPlaceholder } from '@coreui/react'

export const Placeholder2Example = () => {
  return (
    <>
      <p aria-hidden="true">
        <CPlaceholder xs={6} />
      </p>
      <CPlaceholder
        as={CButton}
        color="primary"
        aria-hidden="true"
        disabled
        href="#"
        tabIndex={-1}
        xs={4}
      />
    </>
  )
}
```

> The use of aria-hidden="true" hides the placeholder from screen readers. You may need JavaScript to toggle content and notify assistive technologies of updates.

### Width

Set the width of placeholders with utility classes, inline styles, or grid props.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderWidthExample = () => {
  return (
    <>
      <CPlaceholder xs={6} />
      <CPlaceholder className="w-75" />
      <CPlaceholder style={{ width: '30%' }} />
    </>
  )
}
```

### Color

By default, placeholders use `currentColor`, but you can apply any color using Bootstrap utility classes.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderColorExample = () => {
  return (
    <>
      <CPlaceholder xs={12} />

      <CPlaceholder color="primary" xs={12} />
      <CPlaceholder color="secondary" xs={12} />
      <CPlaceholder color="success" xs={12} />
      <CPlaceholder color="danger" xs={12} />
      <CPlaceholder color="warning" xs={12} />
      <CPlaceholder color="info" xs={12} />
      <CPlaceholder color="light" xs={12} />
      <CPlaceholder color="dark" xs={12} />
    </>
  )
}
```

### Sizing

Use the `size` prop (`lg`, `sm`, or `xs`) to adjust the height and line spacing of placeholders to match the parent typography.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderSizingExample = () => {
  return (
    <>
      <CPlaceholder xs={12} size="lg" />
      <CPlaceholder xs={12} />
      <CPlaceholder xs={12} size="sm" />
      <CPlaceholder xs={12} size="xs" />
    </>
  )
}
```

### Animation

Make React Bootstrap Placeholder elements feel dynamic by using `animation="glow"` or `animation="wave"`.

```html
import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderAnimationExample = () => {
  return (
    <>
      <CPlaceholder as="p" animation="glow">
        <CPlaceholder xs={12} />
      </CPlaceholder>
      <CPlaceholder as="p" animation="wave">
        <CPlaceholder xs={12} />
      </CPlaceholder>
    </>
  )
}
```

## API reference

Review the available props for the React Bootstrap Placeholder component:

- [&lt;CPlaceholder /&gt;](../api/#cplaceholder)


---

# React Placeholder Component Styling

> Learn how to customize the React Placeholder component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$placeholder-opacity-max:           .5 !default;
$placeholder-opacity-min:           .2 !default;
```


---

# React Popover Component API

> Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.

## CPopover

```jsx
import { CPopover } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `boolean \| undefined` | `true` | Adds a fade transition animation to the React Popover. |
| `className` | `string \| undefined` | - | Custom class name(s) for additional styling. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | `document.body` | Defines the container element to which the React Popover is appended. Accepts: - A DOM element (`HTMLElement` or `DocumentFragment`) - A function that returns a single element - `null` (defaults to `document.body`) |
| `content` | `ReactNode` | - | Main content of the React Popover. It can be a string or any valid React node. |
| `delay` | `number \| { show: number; hide: number; } \| undefined` | `0` | Delay (in milliseconds) before showing or hiding the React Popover. - If a number is provided, that delay applies to both "show" and "hide". - If an object is provided, use separate values for "show" and "hide". |
| `fallbackPlacements` | `'top', 'right', 'bottom', 'left' \| ('top', 'right', 'bottom', 'left')[]` | `['top', 'right', 'bottom', 'left']` | Specifies the fallback placements when the preferred `placement` cannot be met. |
| `offset` | `[number, number] \| undefined` | `[0, 8]` | Offset of the React Popover relative to its toggle element, in the form `[x, y]`. |
| `onHide` | `(() => void) \| undefined` | - | Invoked when the React Popover is about to hide. |
| `onShow` | `(() => void) \| undefined` | - | Invoked when the React Popover is about to show. |
| `placement` | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| undefined` | `top` | Placement of the React Popover. Popper.js may override this based on available space. |
| `popperConfig` | `Partial<Options> \| ((defaultPopperConfig: Partial<Options>) => Partial<Options>) \| undefined` | - | Allows customization of the Popper.js configuration for the React Popover. Can be an object or a function returning a modified configuration. [Learn more](https://popper.js.org/docs/v2/constructors/#options) |
| `title` | `ReactNode` | - | Title for the React Popover header. Can be a string or any valid React node. |
| `trigger` | `'hover' \| 'focus' \| 'click' \| ('hover' \| 'focus' \| 'click')[]` | `click` | Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers. |
| `visible` | `boolean \| undefined` | - | Controls the visibility of the React Popover. - `true` shows the popover. - `false` hides the popover. |


---

# React Bootstrap Popover Component

> Learn how to use the React Bootstrap Popover component from CoreUI to create interactive overlays for additional information, tooltips, or custom content.

## React Bootstrap Popover examples

The React Bootstrap Popover component lets you display small overlay content on hover, click, or focus. Use it for tooltips, inline help, or contextual info without cluttering the UI.

### Live demo

Trigger the React Bootstrap Popover on click.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverLiveExample = () => {
  return (
    <CPopover
      title="Popover title"
      content="And here’s some amazing content. It’s very engaging. Right?"
      placement="right"
    >
      <CButton color="danger" size="lg">
        Click to toggle popover
      </CButton>
    </CPopover>
  )
}
```

### Four directions

React Bootstrap Popovers support top, right, bottom, and left placement. Direction is automatically mirrored in RTL layouts.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverFourDirectionsExample = () => {
  return (
    <>
      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <CButton color="secondary">Popover on top</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <CButton color="secondary">Popover on right</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <CButton color="secondary">Popover on bottom</CButton>
      </CPopover>
      <CPopover
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="left"
      >
        <CButton color="secondary">Popover on left</CButton>
      </CPopover>
    </>
  )
}
```

### Custom popovers

Use inline `style` or CSS variables to override the popover's appearance.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverCustomPopoversExample = () => {
  const customPopoverStyle = {
    '--cui-popover-max-width': '200px',
    '--cui-popover-border-color': 'var(--cui-primary)',
    '--cui-popover-header-bg': 'var(--cui-primary)',
    '--cui-popover-header-color': 'var(--cui-white)',
    '--cui-popover-body-padding-x': '1rem',
    '--cui-popover-body-padding-y': '.5rem',
  } as React.CSSProperties

  return (
    <CPopover
      content="This popover is themed via CSS variables."
      placement="right"
      title="Custom popover"
      style={customPopoverStyle}
    >
      <CButton color="secondary">Custom popover</CButton>
    </CPopover>
  )
}
```

### Dismiss on next click

Use `trigger="focus"` to automatically hide the popover when clicking outside the element.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverDismissExample = () => {
  return (
    <CPopover
      content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
      placement="right"
      title="Dismissible popover"
      trigger="focus"
    >
      <CButton color="danger">Dismissible popover</CButton>
    </CPopover>
  )
}
```

## Usage details

### Popovers on disabled elements

HTML elements with the `disabled` attribute cannot trigger popovers. Wrap them in a `<span>` or `<div>` and use `tabIndex="0"` to keep the element accessible. You can also use `trigger={['hover', 'focus']}` to ensure visual feedback.

```html
import React from 'react'
import { CButton, CPopover } from '@coreui/react'

export const PopoverDisabledElementsExample = () => {
  return (
    <CPopover content="Disabled popover" placement="right" trigger={['hover', 'focus']}>
      <span className="d-inline-block" tabIndex={0}>
        <CButton color="primary" disabled>
          Disabled button
        </CButton>
      </span>
    </CPopover>
  )
}
```

## API reference

Explore the full API for the React Bootstrap Popover component:

- [&lt;CPopover /&gt;](../api/#cpopover)


---

# React Popover Component Styling

> Learn how to customize the React Popover component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Popover supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-popover-zindex: #{$zindex-popover};
--cui-popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --cui-popover-font-size);
--cui-popover-bg: #{$popover-bg};
--cui-popover-border-width: #{$popover-border-width};
--cui-popover-border-color: #{$popover-border-color};
--cui-popover-border-radius: #{$popover-border-radius};
--cui-popover-inner-border-radius: #{$popover-inner-border-radius};
--cui-popover-box-shadow: #{$popover-box-shadow};
--cui-popover-header-padding-x: #{$popover-header-padding-x};
--cui-popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --cui-popover-header-font-size);
--cui-popover-header-color: #{$popover-header-color};
--cui-popover-header-bg: #{$popover-header-bg};
--cui-popover-body-padding-x: #{$popover-body-padding-x};
--cui-popover-body-padding-y: #{$popover-body-padding-y};
--cui-popover-body-color: #{$popover-body-color};
--cui-popover-arrow-width: #{$popover-arrow-width};
--cui-popover-arrow-height: #{$popover-arrow-height};
--cui-popover-arrow-border: var(--cui-popover-border-color);
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-popover-body-color': '#888',
  '--cui-popover-bg': '#f2f4f6',
}

return <CPopover style={customVars}>{/* Popover content */}</CPopover>
```

### SASS variables

```scss
$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        var(--cui-body-bg) !default;
$popover-max-width:                 276px !default;
$popover-border-width:              var(--cui-border-width) !default;
$popover-border-color:              var(--cui-border-color-translucent) !default;
$popover-border-radius:             var(--cui-border-radius-lg) !default;
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                var(--cui-box-shadow) !default;

$popover-header-font-size:          $font-size-base !default;
$popover-header-bg:                 var(--cui-secondary-bg) !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          $spacer !default;

$popover-body-color:                var(--cui-body-color) !default;
$popover-body-padding-y:            $spacer !default;
$popover-body-padding-x:            $spacer !default;

$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
```


---

# React Progress Component API

> Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.

## CProgress

```jsx
import { CProgress } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animated` | `boolean \| undefined` | - | Use to animate the stripes right to left via CSS3 animations. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `{'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-gradient' \| 'secondary-gradient' \| 'success-gradient' \| 'danger-gradient' \| 'warning-gradient' \| 'info-gradient' \| 'dark-gradient' \| 'light-gradient' \| string }` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `height` | `number \| undefined` | - | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. |
| `progressBarClassName` | `string \| undefined` | - | A string of all className you want applied to the `<CProgressBar/>` component. |
| `thin` | `boolean \| undefined` | - | Makes progress bar thinner. |
| `value` | `number \| undefined` | - | The percent to progress the ProgressBar (out of 100). |
| `variant` | `"striped" \| undefined` | - | Set the progress bar variant to optional striped. |
| `white` | `boolean \| undefined` | - | Change the default color to white. |

## CProgressBar

```jsx
import { CProgressBar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animated` | `boolean \| undefined` | - | Use to animate the stripes right to left via CSS3 animations. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `{'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-gradient' \| 'secondary-gradient' \| 'success-gradient' \| 'danger-gradient' \| 'warning-gradient' \| 'info-gradient' \| 'dark-gradient' \| 'light-gradient' \| string }` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `value` | `number \| undefined` | `0` | The percent to progress the ProgressBar. |
| `variant` | `"striped" \| undefined` | - | Set the progress bar variant to optional striped. |


---

# React Bootstrap Progress Component

> Learn how to use the React Bootstrap Progress component from CoreUI to create progress bars with labels, stripes, animation, stacked sections, and custom colors.

## React Bootstrap Progress Component

The React Bootstrap Progress component helps you visually represent progress or completion rates in tasks, processes, or downloads. These bars are fully customizable with colors, labels, sizes, and animations.

## Basic usage

Create a simple React Bootstrap progress bar using `<CProgress>` and `<CProgressBar>`.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressExample = () => {
  return (
    <>
      <CProgress value={0} />
      <CProgress value={25} />
      <CProgress value={50} />
      <CProgress value={75} />
      <CProgress value={100} />
    </>
  )
}
```

## Labels inside progress bars

Add text labels to your progress bar by inserting content inside the `<CProgressBar>` element.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressLabelsExample = () => {
  return <CProgress value={25}>25%</CProgress>
}
```

When using long labels, ensure they are visible by applying `.overflow-visible` and setting a readable text color.

```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressLabels2Example = () => {
  return (
    <CProgress value={10}>
      <CProgressBar className="overflow-visible text-dark px-2" color="success">
        Long label text for the progress bar, set to a dark color
      </CProgressBar>
    </CProgress>
  )
}
```

Or use the `progressBarClassName` prop directly on `<CProgress>`:

```jsx
<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" value={10}>
  Long label text for the progress bar
</CProgress>
```

## Adjusting height

Change the height of the React Bootstrap Progress component with utility classes or inline styles.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressHeightExample = () => {
  return (
    <>
      <CProgress height={1} value={25} />
      <CProgress height={20} value={25} />
    </>
  )
}
```
```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressHeight2Example = () => {
  return (
    <>
      <CProgress height={1}>
        <CProgressBar value={25}></CProgressBar>
      </CProgress>
      <CProgress height={20}>
        <CProgressBar value={25}></CProgressBar>
      </CProgress>
    </>
  )
}
```

## Custom backgrounds

Use the `color` prop to set background colors for progress bars.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressBackgroundsExample = () => {
  return (
    <>
      <CProgress color="success" value={25} />
      <CProgress color="info" value={50} />
      <CProgress color="warning" value={75} />
      <CProgress color="danger" value={100} />
    </>
  )
}
```

If using labels, apply an appropriate text color for contrast:

```html
import React from 'react'
import { CProgress, CProgressBar } from '@coreui/react'

export const ProgressBackgrounds2Example = () => {
  return (
    <>
      <CProgress color="success" value={25}>
        <CProgressBar>25%</CProgressBar>
      </CProgress>
      <CProgress color="info" value={50}>
        <CProgressBar className="text-dark">50%</CProgressBar>
      </CProgress>
      <CProgress color="warning" value={75}>
        <CProgressBar className="text-dark">75%</CProgressBar>
      </CProgress>
      <CProgress color="danger" value={100}>
        <CProgressBar>100%</CProgressBar>
      </CProgress>
    </>
  )
}
```

Or use the `progressBarClassName` prop:

```jsx
<CProgress color="success" value={25}>25%</CProgress>
<CProgress color="info" progressBarClassName="text-dark" value={50}>50%</CProgress>
<CProgress color="warning" progressBarClassName="text-dark" value={75}>75%</CProgress>
<CProgress color="danger" value={100}>100%</CProgress>
```

## Stacked progress bars

React Bootstrap Progress supports multiple stacked bars inside a single `<CProgress>` or using the newer `<CProgressStacked>`.

> Use the `` component introduced in v4.9.0 for stacked progress bars. Older syntax remains supported for now.

```html
import React from 'react'
import { CProgress, CProgressStacked } from '@coreui/react'

export const ProgressMultipleBarsExample = () => {
  return (
    <CProgressStacked>
      <CProgress value={15} />
      <CProgress color="success" value={30} />
      <CProgress color="info" value={20} />
    </CProgressStacked>
  )
}
```

Previous structure:

```jsx
<CProgress>
  <CProgressBar value={15} />
  <CProgressBar color="success" value={30} />
  <CProgressBar color="info" value={20} />
</CProgress>
```

## Striped variant

Add stripes to any progress bar using `variant="striped"`.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressStripedExample = () => {
  return (
    <>
      <CProgress color="success" variant="striped" value={25} />
      <CProgress color="info" variant="striped" value={50} />
      <CProgress color="warning" variant="striped" value={75} />
      <CProgress color="danger" variant="striped" value={100} />
    </>
  )
}
```

## Animated stripes

Make stripes animated using the `animated` prop.

```html
import React from 'react'
import { CProgress } from '@coreui/react'

export const ProgressAnimatedStripedExample = () => {
  return (
    <>
      <CProgress color="success" variant="striped" animated value={25} />
      <CProgress color="info" variant="striped" animated value={50} />
      <CProgress color="warning" variant="striped" animated value={75} />
      <CProgress color="danger" variant="striped" animated value={100} />
    </>
  )
}
```

## API reference

Explore the full API for the React Bootstrap Progress component:

- [&lt;CProgress /&gt;](../api/#cprogress)
- [&lt;CProgressBar /&gt;](../api/#cprogressbar)


---

# React Progress Component Styling

> Learn how to customize the React Progress component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Progress supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-progress-height: #{$progress-height};
@include rfs($progress-font-size, --cui-progress-font-size);
--cui-progress-bg: #{$progress-bg};
--cui-progress-border-radius: #{$progress-border-radius};
--cui-progress-box-shadow: #{$progress-box-shadow};
--cui-progress-bar-color: #{$progress-bar-color};
--cui-progress-bar-bg: #{$progress-bar-bg};
--cui-progress-bar-transition: #{$progress-bar-transition};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-progress-bar-color': '#888',
  '--cui-progress-bar-bg': '#f2f4f6',
}

return <CProgress style={customVars}>...</CProgress>
```

### SASS variables

```scss
$progress-height:                   1rem !default;
$progress-font-size:                $font-size-base * .75 !default;
$progress-bg:                       var(--cui-secondary-bg) !default;
$progress-border-radius:            var(--cui-border-radius) !default;
$progress-box-shadow:               var(--cui-box-shadow-inset) !default;
$progress-bar-color:                $white !default;
$progress-bar-bg:                   var(--cui-primary) !default;
$progress-bar-animation-timing:     1s linear infinite !default;
$progress-bar-transition:           width .6s ease !default;

// TODO: clean-up ???
$progress-group-margin-bottom:         $spacer !default;
$progress-group-header-margin-bottom:  $spacer * .25 !default;
```


---

# React Search Button Component API

> Explore the API reference for the React Search Button component and discover how to effectively utilize its props for customization.

## CSearchButton

```jsx
import { CSearchButton } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | Content to customize the full button body. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `icon` | `ReactNode` | - | Custom icon displayed before the placeholder text. |
| `onTrigger` | `(() => void) \| undefined` | - | Callback fired when the component is activated by click or keyboard shortcut. |
| `placeholder` | `ReactNode` | `Search` | Placeholder content rendered inside `.search-button-placeholder`. |
| `preventDefault` | `boolean \| undefined` | `true` | Prevent the browser's default behavior when the configured shortcut matches. |
| `shortcut` | `string \| undefined` | `meta+/,ctrl+/` | Comma-separated shortcut list. The component matches all configured shortcuts and renders the platform-preferred one. |


---

# React Bootstrap Search Button Component

> Learn how to use the React Bootstrap Search Button component from CoreUI to create keyboard-aware search entry points, command palettes, modals, and offcanvas panels.

## Using the React Bootstrap Search Button component

The React Bootstrap Search Button component provides a keyboard-aware trigger for search interfaces and command-style actions. It keeps native button behavior, shows a platform-appropriate shortcut hint, and uses `onTrigger` as the shared activation callback.

```html
import React, { useState } from 'react'
import {
  CBadge,
  CFormInput,
  CListGroup,
  CListGroupItem,
  CModal,
  CModalBody,
  CModalHeader,
  CModalTitle,
  CSearchButton,
} from '@coreui/react'

export const SearchButtonExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CSearchButton
        onTrigger={() => setVisible(true)}
        aria-label="Open search dialog"
        aria-controls="search-button-modal"
        shortcut="meta+/,ctrl+/"
      />
      <CModal
        visible={visible}
        onClose={() => setVisible(false)}
        aria-labelledby="search-button-modal-title"
      >
        <CModalHeader>
          <CModalTitle id="search-button-modal-title" className="w-100">
            <CFormInput type="search" placeholder="Search" aria-label="Search" />
          </CModalTitle>
        </CModalHeader>
        <CModalBody>
          <p className="text-body-secondary small mb-2">Recent searches</p>
          <CListGroup flush>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              CoreUI components overview
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              Modal dialog examples
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
            <CListGroupItem
              as="button"
              type="button"
              className="d-flex justify-content-between align-items-center"
            >
              Sidebar navigation customization
              <CBadge color="secondary" shape="rounded-pill">
                Open
              </CBadge>
            </CListGroupItem>
          </CListGroup>
        </CModalBody>
      </CModal>
    </>
  )
}
```

## Custom shortcut

Pass the `shortcut` prop to customize the visible key combination and the keyboard trigger behavior.

```html
import React, { useState } from 'react'
import { CAlert, CSearchButton } from '@coreui/react'

export const SearchButtonCustomShortcutExample = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <CSearchButton
        placeholder="Command palette"
        shortcut="meta+i,ctrl+i"
        onTrigger={() => setCount((value) => value + 1)}
        aria-label="Open command palette"
      />
      <CAlert color="info" className="mt-3 mb-0">
        Triggered {count} {count === 1 ? 'time' : 'times'} with click or shortcut.
      </CAlert>
    </div>
  )
}
```

## Launch an offcanvas

Use the component as the trigger for a controlled React Bootstrap-style offcanvas panel.

```html
import React, { useState } from 'react'
import {
  CCloseButton,
  CFormInput,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
  CSearchButton,
} from '@coreui/react'

export const SearchButtonOffcanvasExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CSearchButton
        onTrigger={() => setVisible(true)}
        shortcut="meta+shift+o,ctrl+shift+o"
        aria-label="Open search panel"
        aria-controls="search-button-offcanvas"
      />

      <COffcanvas
        id="search-button-offcanvas"
        placement="end"
        visible={visible}
        onHide={() => setVisible(false)}
      >
        <COffcanvasHeader>
          <COffcanvasTitle>Search panel</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          <CFormInput
            type="search"
            className="mb-3"
            placeholder="Search..."
            aria-label="Search in panel"
          />
          <p className="mb-0">Use this space for filters, recent searches, or command shortcuts.</p>
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

## API reference

Check the API documentation below for the full list of props available in the React Bootstrap Search Button component:

- [&lt;CSearchButton /&gt;](../api/#csearchbutton)


---

# React Search Button Component Styling

> Learn how to customize the React Search Button component with CSS variables and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Search Button uses local CSS variables on `.search-button` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-search-button-height: #{$search-button-height};
--cui-search-button-padding-x: #{$search-button-padding-x};
--cui-search-button-font-family: #{$search-button-font-family};
--cui-search-button-font-size: #{$search-button-font-size};
--cui-search-button-font-weight: #{$search-button-font-weight};
--cui-search-button-color: #{$search-button-color};
--cui-search-button-bg: #{$search-button-bg};
--cui-search-button-border-width: #{$search-button-border-width};
--cui-search-button-border-color: #{$search-button-border-color};
--cui-search-button-border-radius: #{$search-button-border-radius};
--cui-search-button-box-shadow: #{$search-button-box-shadow};
--cui-search-button-transition: #{$search-button-transition};
--cui-search-button-focus-color: #{$search-button-focus-color};
--cui-search-button-focus-bg: #{$search-button-focus-bg};
--cui-search-button-focus-border-color: #{$search-button-focus-border-color};
--cui-search-button-focus-box-shadow: #{$search-button-focus-box-shadow};
--cui-search-button-icon-size: #{$search-button-icon-size};
--cui-search-button-keys-gap: #{$search-button-keys-gap};
--cui-search-button-key-width: #{$search-button-key-width};
--cui-search-button-key-height: #{$search-button-key-height};
--cui-search-button-key-padding-inline: #{$search-button-key-padding-inline};
--cui-search-button-key-font-size: #{$search-button-key-font-size};
--cui-search-button-key-bg: #{$search-button-key-bg};
--cui-search-button-key-border-radius: #{$search-button-key-border-radius};
--cui-search-button-key-active-bg: #{$search-button-key-active-bg};
--cui-search-button-placeholder-margin-inline: #{$search-button-placeholder-margin-inline};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-search-button-bg': 'var(--cui-tertiary-bg)',
  '--cui-search-button-color': 'var(--cui-body-color)',
  '--cui-search-button-border-color': 'var(--cui-primary)',
}

return (
  <CSearchButton
    placeholder="Search docs"
    onTrigger={() => {}}
    style={customVars}
  />
)
```

### SASS variables

```scss
$search-button-height:              $input-height !default;
$search-button-padding-x:           $input-padding-x !default;
$search-button-font-family:         $input-font-family !default;
$search-button-font-size:           $input-font-size !default;
$search-button-font-weight:         $input-font-weight !default;
$search-button-color:               $input-placeholder-color !default;
$search-button-bg:                  $input-bg !default;
$search-button-border-width:        $input-border-width !default;
$search-button-border-color:        $input-border-color !default;
$search-button-border-radius:       $input-border-radius !default;
$search-button-box-shadow:          $input-box-shadow !default;
$search-button-transition:          $input-transition !default;

$search-button-focus-color:         $input-focus-color !default;
$search-button-focus-bg:            $input-focus-bg !default;
$search-button-focus-border-color:  $input-focus-border-color !default;
$search-button-focus-box-shadow:    $input-focus-box-shadow !default;

$search-button-icon-size:           1.125rem !default;

$search-button-keys-gap:            .25rem !default;
$search-button-key-width:           1.5rem !default;
$search-button-key-height:          1.5rem !default;
$search-button-key-padding-inline:  .25rem !default;
$search-button-key-font-size:       .75rem !default;
$search-button-key-bg:              var(--cui-tertiary-bg) !default;
$search-button-key-border-radius:   var(--cui-border-radius-sm) !default;
$search-button-key-active-bg:       var(--cui-secondary-bg) !default;

$search-button-placeholder-margin-inline:  .55rem 2rem !default;
```


---

# React Sidebar Component API

> Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.

## CSidebar

```jsx
import { CSidebar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `colorScheme` | `'dark' \| 'light'` | - | Sets if the color of text should be colored for a light or dark dark background. |
| `narrow` | `boolean \| undefined` | - | Make sidebar narrow. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `onVisibleChange` | `((visible: boolean) => void) \| undefined` | - | Event emitted after visibility of component changed. |
| `overlaid` | `boolean \| undefined` | - | Set sidebar to overlaid variant. |
| `placement` | `'start' \| 'end'` | - | Components placement, there’s no default placement. |
| `position` | `"fixed" \| "sticky" \| undefined` | - | Place sidebar in non-static positions. |
| `size` | `"sm" \| "lg" \| "xl" \| undefined` | - | Size the component small, large, or extra large. |
| `unfoldable` | `boolean \| undefined` | - | Expand narrowed sidebar on hover. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of sidebar component. |

## CSidebarBrand

```jsx
import { CSidebarBrand } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "a") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `a` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CSidebarFooter

```jsx
import { CSidebarFooter } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CSidebarHeader

```jsx
import { CSidebarHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |

## CSidebarNav

```jsx
import { CSidebarNav } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "ul") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `ul` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `compact` | `boolean \| undefined` | - | Make navigation more compact by cutting link padding in half. |
| `variant` | `"tree" \| undefined` | - | Sets the navigation variant. |

## CSidebarToggler

```jsx
import { CSidebarToggler } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Sidebar Component

> Learn how to use the React Bootstrap Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.

## React Bootstrap Sidebar Component

The React Bootstrap Sidebar component provides a flexible vertical navigation layout with support for branding, navigation links, toggling, and theming. It’s perfect for admin panels, dashboards, and mobile navigation.

## Supported sub-components

The sidebar includes built-in support for these components:

- `<CSidebarHeader>` – optional top section.
- `<CSidebarBrand>` – brand or logo section.
- `<CSidebarNav>` – main vertical navigation area.
- `<CSidebarFooter>` – optional bottom section.
- `<CSidebarToggler>` – toggler for sidebar minimization or expansion.

## React Bootstrap Sidebar examples

### Standard sidebar

By default, the sidebar is shown on desktop viewports and hidden on mobile.

```html
import React, { useState } from 'react'
import {
  CAvatar,
  CBadge,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CSidebar,
  CSidebarBrand,
  CSidebarFooter,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
  CButton,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import {
  cilAccountLogout,
  cilCloudDownload,
  cilCreditCard,
  cilMinus,
  cilOptions,
  cilPlus,
  cilPuzzle,
  cilSettings,
  cilSidebarClose,
  cilSidebarOpen,
  cilSpeedometer,
  cilUser,
} from '@coreui/icons'

export const SidebarExample = () => {
  const [unfoldable, setUnfoldable] = useState(false)

  return (
    <CSidebar className="border-end h-100" unfoldable={unfoldable}>
      <CSidebarHeader className="position-relative">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            className="d-sidebar-narrow-none"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            className="d-sidebar-narrow"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
        <CButton
          className="d-flex d-sidebar-narrow-none"
          size="sm"
          variant="ghost"
          onClick={() => setUnfoldable(!unfoldable)}
        >
          <CIcon className="icon icon-lg d-sidebar-narrow-unfoldable" icon={cilSidebarOpen} />
          <CIcon className="icon icon-lg d-sidebar-narrow-unfoldable-none" icon={cilSidebarClose} />
        </CButton>
      </CSidebarHeader>
      <CSidebarNav variant="tree">
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem disabled href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
              <span className="nav-group-toggle-indicator">
                <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
              </span>
            </>
          )}
          compact
          visible
        >
          <CNavItem href="#">Item</CNavItem>
          <CNavItem href="#">Item</CNavItem>
          <CNavGroup
            toggler={({ visible }) => (
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Items group 2
                <span className="nav-group-toggle-indicator">
                  <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                </span>
              </>
            )}
            visible
          >
            <CNavItem href="#">Item</CNavItem>
            <CNavItem href="#">Item</CNavItem>
            <CNavGroup
              toggler={({ visible }) => (
                <>
                  <span className="nav-icon">
                    <span className="nav-icon-bullet"></span>
                  </span>{' '}
                  Items group 3
                  <span className="nav-group-toggle-indicator">
                    <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                  </span>
                </>
              )}
            >
              <CNavItem href="#">Item</CNavItem>
              <CNavItem href="#">Item</CNavItem>
            </CNavGroup>
          </CNavGroup>
        </CNavGroup>
        <CNavGroup
          toggler={({ visible }) => (
            <>
              <CIcon customClassName="nav-icon" icon={cilSettings} /> Settings group
              <span className="nav-group-toggle-indicator">
                <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
              </span>
            </>
          )}
        >
          <CNavItem href="#">Item</CNavItem>
          <CNavItem href="#">Item</CNavItem>
          <CNavGroup
            toggler={({ visible }) => (
              <>
                <span className="nav-icon">
                  <span className="nav-icon-bullet"></span>
                </span>{' '}
                Nested group
                <span className="nav-group-toggle-indicator">
                  <CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
                </span>
              </>
            )}
          >
            <CNavItem href="#">Item</CNavItem>
            <CNavItem href="#">Item</CNavItem>
          </CNavGroup>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
      </CSidebarNav>
      <CSidebarFooter>
        <CDropdown className="w-100" direction="dropup">
          <CDropdownToggle
            caret={false}
            className="w-100 d-flex gap-2 p-1 align-items-center"
            variant="ghost"
          >
            <CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
            <div className="small text-start d-sidebar-narrow-none">
              <div className="fw-semibold">Lena Scaffold</div>
              <div>lena@acme.com</div>
            </div>
            <CIcon className="nav-icon ms-auto d-sidebar-narrow-none" icon={cilOptions} />
          </CDropdownToggle>
          <CDropdownMenu className="w-100">
            <div className="d-flex gap-2 px-2">
              <CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
              <div className="small text-start">
                <div className="fw-semibold">Lena Scaffold</div>
                <div>lena@acme.com</div>
              </div>
            </div>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilUser} />
                Account
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilCreditCard} />
                Billing
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilSettings} />
                Settings
              </div>
            </CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilAccountLogout} />
                Logout
              </div>
            </CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CSidebarFooter>
    </CSidebar>
  )
}
```

### Narrow sidebar

Use the `narrow` prop to collapse the sidebar into a compact version, showing only icons.

```html
import React from 'react'
import {
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavItem,
  CTooltip,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCart, cilCloudDownload, cilSpeedometer } from '@coreui/icons'

export const SidebarNarrowExample = () => {
  return (
    <CSidebar className="border-end" narrow>
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CTooltip content="Nav item" placement="right">
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Nav item" placement="right">
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Download" placement="right">
          <CNavItem href="https://coreui.io">
            <CIcon customClassName="nav-icon" icon={cilCloudDownload} />
          </CNavItem>
        </CTooltip>
        <CTooltip content="Get CoreUI PRO" placement="right">
          <CNavItem href="https://coreui.io/pricing/">
            <CIcon customClassName="nav-icon" icon={cilCart} />
          </CNavItem>
        </CTooltip>
      </CSidebarNav>
    </CSidebar>
  )
}
```

### Unfoldable sidebar

Add `unfoldable` to create a narrow sidebar that expands on hover.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarUnfoldableExample = () => {
  return (
    <CSidebar className="border-end" unfoldable>
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            className="d-sidebar-narrow-none"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
          <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            className="d-sidebar-narrow"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
            </>
          }
          visible
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Items group item
          </CNavItem>
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Items group item
          </CNavItem>
        </CNavGroup>
        <CNavItem className="mt-auto" href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
        <CNavItem href="https://coreui.io/pricing/">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
        </CNavItem>
      </CSidebarNav>
    </CSidebar>
  )
}
```

## Dark mode sidebar

Apply `colorScheme="dark"` to match your sidebar to a dark theme.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarDarkExample = () => {
  return (
    <CSidebar className="border-end" colorScheme="dark">
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>
          <svg
            role="img"
            aria-label="CoreUI Logo Full"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style={{ fill: 'currentColor' }}>
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
        </CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
            </>
          }
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Nav dropdown item
          </CNavItem>
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span>{' '}
            Nav dropdown item
          </CNavItem>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
        <CNavItem href="https://coreui.io/pricing/">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
        </CNavItem>
      </CSidebarNav>
    </CSidebar>
  )
}
```

## Sidebar placement

By default, the React Bootstrap Sidebar appears on the left. Use the `placement` prop to change this:

- `placement="start"` – left side (default)
- `placement="end"` – right side

## API reference

Explore the available props for the React Bootstrap Sidebar component and its subcomponents:

- [&lt;CSidebar /&gt;](../api/#csidebar)
- [&lt;CSidebarBrand /&gt;](../api/#csidebarbrand)
- [&lt;CSidebarFooter /&gt;](../api/#csidebarfooter)
- [&lt;CSidebarHeader /&gt;](../api/#csidebarheader)
- [&lt;CSidebarNav /&gt;](../api/#csidebarnav)
- [&lt;CSidebarToggler /&gt;](../api/#csidebartoggler)


---

# React Sidebar Component Styling

> Learn how to customize the React Sidebar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-sidebar-zindex: #{$zindex-sidebar};
--cui-sidebar-width: #{$sidebar-width};
--cui-sidebar-bg: #{$sidebar-bg};
--cui-sidebar-padding-x: #{$sidebar-padding-x};
--cui-sidebar-padding-y: #{$sidebar-padding-y};
--cui-sidebar-color: #{$sidebar-color};
--cui-sidebar-brand-color: #{$sidebar-brand-color};
--cui-sidebar-brand-bg: #{$sidebar-brand-bg};
```

```scss
--cui-sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
```

```scss
--cui-sidebar-narrow-width: #{$sidebar-narrow-width};
--cui-sidebar-padding-x: #{$sidebar-narrow-padding-x};
```

```scss
--cui-sidebar-nav-padding-x: #{$sidebar-nav-padding-x};
--cui-sidebar-nav-padding-y: #{$sidebar-nav-padding-y};
--cui-sidebar-nav-gap: #{$sidebar-nav-gap};

--cui-sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
--cui-sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
--cui-sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
--cui-sidebar-nav-title-color: #{$sidebar-nav-title-color};

--cui-sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
--cui-sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
--cui-sidebar-nav-link-color: #{$sidebar-nav-link-color};
--cui-sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
--cui-sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
--cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
--cui-sidebar-nav-link-border-width: #{$sidebar-nav-link-border-width};

--cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
--cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
--cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
--cui-sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
--cui-sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};

--cui-sidebar-nav-link-icon-margin: #{$sidebar-nav-link-icon-margin};
--cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
--cui-sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width};
--cui-sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height};
--cui-sidebar-nav-link-icon-font-size: #{$sidebar-nav-link-icon-font-size};
--cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
--cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
--cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};

--cui-sidebar-nav-link-icon-bullet-size: #{$sidebar-nav-link-icon-bullet-size};
--cui-sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-link-icon-bullet-bg};
--cui-sidebar-nav-link-icon-bullet-border-width: #{$sidebar-nav-link-icon-bullet-border-width};
--cui-sidebar-nav-link-icon-bullet-border-radius: #{$sidebar-nav-link-icon-bullet-border-radius};
--cui-sidebar-nav-link-icon-bullet-border-color: #{$sidebar-nav-link-icon-bullet-border-color};
--cui-sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-link-active-icon-bullet-bg};
--cui-sidebar-nav-link-active-icon-bullet-border-color: #{$sidebar-nav-link-active-icon-bullet-border-color};
--cui-sidebar-nav-link-disabled-icon-bullet-bg: #{$sidebar-nav-link-disabled-icon-bullet-bg};
--cui-sidebar-nav-link-disabled-icon-bullet-border-color: #{$sidebar-nav-link-disabled-icon-bullet-border-color};
--cui-sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-link-hover-icon-bullet-bg};
--cui-sidebar-nav-link-hover-icon-bullet-border-color: #{$sidebar-nav-link-hover-icon-bullet-border-color};

--cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
--cui-sidebar-nav-group-border-width: #{$sidebar-nav-group-border-width};
--cui-sidebar-nav-group-border-radius: #{$sidebar-nav-group-border-radius};
--cui-sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
--cui-sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
--cui-sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
--cui-sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};
--cui-sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
--cui-sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
--cui-sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
--cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
```

```scss
--cui-sidebar-toggler-width: #{$sidebar-toggler-width};
--cui-sidebar-toggler-height: #{$sidebar-toggler-height};
--cui-sidebar-toggler-bg: #{$sidebar-toggler-bg};
--cui-sidebar-toggler-color: #{$sidebar-toggler-color};
--cui-sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)};
--cui-sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
--cui-sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
--cui-sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
--cui-sidebar-toggler-transition: #{$sidebar-toggler-transition};
```

```scss
--cui-backdrop-zindex: #{$zindex-sidebar-backdrop};
--cui-backdrop-bg: #{$sidebar-backdrop-bg};
--cui-backdrop-opacity: #{$sidebar-backdrop-opacity};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-sidebar-bg': '#121212',
  '--cui-sidebar-color': '#eee',
}

return <CSidebar style={customVars}>{/* Sidebar content */}</CSidebar>
```

### SASS variables

```scss
$sidebar-width:                            16rem !default;
$sidebar-widths: (
  sm: 12rem,
  lg: 20rem,
  xl: 24rem
) !default;
$sidebar-padding-y:                        $spacer !default;
$sidebar-padding-x:                        $spacer !default;
$sidebar-color:                            var(--cui-body-color) !default;
$sidebar-bg:                               var(--cui-body-bg) !default;
$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
$sidebar-brand-color:                      var(--cui-body-color) !default;
$sidebar-brand-bg:                         rgba($black, .2) !default;
$sidebar-backdrop-bg:                      $black !default;
$sidebar-backdrop-opacity:                 .5 !default;
$sidebar-overlaid-box-shadow:              var(--cui-box-shadow) !default;

$sidebar-narrow-width:                     4rem !default;
$sidebar-narrow-padding-x:                 .5rem !default;
$sidebar-narrow-unfoldable-box-shadow:     var(--cui-box-shadow) !default;
```

```scss
$sidebar-toggler-width:             .5rem !default;
$sidebar-toggler-height:            .5rem !default;
$sidebar-toggler-padding-x:         .25rem !default;
$sidebar-toggler-padding-y:         .25rem !default;
$sidebar-toggler-bg:                transparent !default;
$sidebar-toggler-color:             var(--cui-tertiary-color) !default;
$sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
$sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
$sidebar-toggler-hover-color:       var(--cui-secondary-color) !default;
$sidebar-toggler-focus-color:       var(--cui-secondary-color) !default;
$sidebar-toggler-transition:        transform .15s !default;
```


---

# React Smart Pagination Component API

> Explore the API reference for the React Smart Pagination component and discover how to effectively utilize its props for customization.

## CSmartPagination

```jsx
import { CSmartPagination } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activePage` | `number \| undefined` | `1` | Current page number. |
| `align` | `"start" \| "center" \| "end" \| undefined` | `start` | Horizontall align. |
| `arrows` | `boolean \| undefined` | `true` | Show/hide arrows. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `dots` | `boolean \| undefined` | `true` | Show/hide dots. |
| `doubleArrows` | `boolean \| undefined` | `true` | Show double arrows buttons. |
| `firstButton` | `ReactNode` | `<React.Fragment>&laquo;</React.Fragment>` | The content of `firstButton` button. |
| `lastButton` | `ReactNode` | `<React.Fragment>&raquo;</React.Fragment>` | The content of `lastButton` button. |
| `limit` | `number \| undefined` | `5` | Maximum items number. |
| `nextButton` | `ReactNode` | `<React.Fragment>&rsaquo;</React.Fragment>` | The content of `nextButton` button. |
| `onActivePageChange` | `((activePage: number) => void) \| undefined` | - | On active page change callback. |
| `pages` | `number` | - | Number of pages. |
| `previousButton` | `ReactNode` | `<React.Fragment>&lsaquo;</React.Fragment>` | The content of `previousButton` button. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size of pagination, valid values: 'sm', 'lg'. |


---

# React Smart Table Component (DataTable) API

> Explore the API reference for the React Smart Table component and discover how to effectively utilize its props for customization.

## CSmartTable

```jsx
import { CSmartTable } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activePage` | `number \| undefined` | `1` | Sets active page. If 'pagination' prop is enabled, activePage is set only initially. |
| `cleaner` | `boolean \| undefined` | - | When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set) Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot. |
| `clickableRows` | `boolean \| undefined` | - | Style table items as clickable. |
| `columnFilter` | `boolean \| ColumnFilter \| undefined` | - | When set, displays additional filter row between table header and items, allowing filtering by specific column. Column filter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic filtering inside component. - lazy (Boolean) - Set to true to trigger filter updates only on change event. |
| `columnFilterValue` | `ColumnFilterValue \| undefined` | - | Value of table filter. To set pass object where keys are column names and values are filter strings e.g.: `{ user: 'John', age: 12 }` |
| `columns` | `(string \| Column)[] \| undefined` | - | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_classes') In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - _classes (String/Array/Object) - adds classes to all cels in column - _style (String/Array/Object) - adds styles to the column header (useful for defining widths) - sorter (Boolean) - disables sorting of the column when set to false - filter (Boolean) - removes filter from column when set to false. |
| `columnSorter` | `boolean \| Sorter \| undefined` | - | Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number. Sorter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic sorting inside the component, allowing for external sorting control. - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order will be maintained across multiple columns based on the order of interaction. - resetable (Boolean) - If set to true, clicking on the sorter cycles through three states: ascending, descending, and null (no sorting). The third click on the sorter will reset the sorting and restore the table to its original order. |
| `elementCover` | `ReactNode` | - | ReactNode for passing custom CElementCover content. |
| `footer` | `boolean \| (string \| FooterItem)[] \| undefined` | - | If `true` Displays table footer, which mirrors table header. (without column filter). Or Array of objects or strings, where each element represents one cell in the table footer. Example items: `['FooterCell', 'FooterCell', 'FooterCell']` or `[{ label: 'FooterCell', _props: { color: 'success' }, ...]` |
| `header` | `boolean \| undefined` | `true` | Set to false to remove table header. |
| `items` | `Item[] \| undefined` | `[]` | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}` |
| `itemsNumber` | `number \| undefined` | - | The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items. |
| `itemsPerPage` | `number \| undefined` | `10` | Number of items per page. Only applicable when `pagination` is enabled. |
| `itemsPerPageLabel` | `string \| undefined` | `Items per page:` | Label for items per page selector. |
| `itemsPerPageOptions` | `number[] \| undefined` | `[5, 10, 20, 50]` | Items per page selector options. |
| `itemsPerPageSelect` | `boolean \| ItemsPerPageSelect \| undefined` | - | Adds select element over table, which is used for control items per page in pagination. Only applicable when `pagination` is enabled. If you want to customize this element, pass object with optional values: - external (Boolean) - disables automatic 'itemsPerPage' change. |
| `loading` | `boolean \| undefined` | - | When set, table will have loading style: loading spinner and reduced opacity. |
| `noItemsLabel` | `ReactNode` | `No items found` | ReactNode or string for passing custom noItemsLabel texts. |
| `onActivePageChange` | `((value: number) => void) \| undefined` | - | Page change callback. |
| `onColumnFilterChange` | `((value: ColumnFilterValue) => void) \| undefined` | - | Column filter change callback. |
| `onFilteredItemsChange` | `((items: Item[]) => void) \| undefined` | - | Filtered items change callback. |
| `onItemsPerPageChange` | `((value: number) => void) \| undefined` | - | Pagination change callback. |
| `onRowChecked` | `((item: Item, value: boolean) => void) \| undefined` | - | Row checked callback. |
| `onRowClick` | `((item: Item, index: number, columnName: string, event: boolean \| MouseEvent<Element, MouseEvent>) => void) \| undefined` | - | Row click callback. |
| `onSelectAll` | `(() => void) \| undefined` | - | Select all callback. |
| `onSelectedItemsChange` | `((items: Item[]) => void) \| undefined` | - | Selected items change callback. |
| `onSorterChange` | `((value: SorterValue \| SorterValue[]) => void) \| undefined` | - | Sorter value change callback. |
| `onTableFilterChange` | `((value?: string \| undefined) => void) \| undefined` | - | Table filter change callback. |
| `pagination` | `boolean \| Pagination \| undefined` | - | Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead. |
| `paginationProps` | `CSmartPaginationProps \| undefined` | - | Properties to `CSmartPagination` component - https://coreui.io/react/docs/components/smart-pagination#csmartpagination |
| `scopedColumns` | `ScopedColumns \| undefined` | - | Scoped columns. |
| `selectable` | `boolean \| undefined` | - | Add checkboxes to make table rows selectable. |
| `selectAll` | `boolean \| { external?: boolean \| undefined; } \| undefined` | `true` | Enables select all checkbox displayed in the header of the table. Can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic selection inside the component. |
| `selected` | `Item[] \| undefined` | - | Array of selected objects, where each object represents one item - row in table. Example item: `{ name: 'John' , age: 12 }` |
| `sorterValue` | `SorterValue \| SorterValue[] \| undefined` | - | State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. |
| `sortingIcon` | `ReactNode` | `<CIcon width={18} icon={cilSwapVertical} key="csv" />` | Sorter icon when items are unsorted. |
| `sortingIconAscending` | `ReactNode` | `<CIcon width={18} icon={cilArrowTop} key="cat" />` | Sorter icon when items are sorted ascending. |
| `sortingIconDescending` | `ReactNode` | `<CIcon width={18} icon={cilArrowBottom} key="cab" />` | Sorter icon when items are sorted descending. |
| `tableBodyProps` | `CTableBodyProps \| undefined` | - | Properties to `CTableBody` component - https://coreui.io/react/docs/components/table/#ctablebody |
| `tableFilter` | `boolean \| TableFilter \| undefined` | - | When set, displays table filter above table, allowing filtering by specific column. Column filter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic filtering inside component. - lazy (Boolean) - Set to true to trigger filter updates only on change event. |
| `tableFilterLabel` | `string \| undefined` | `Filter:` | The element represents a caption for a component. |
| `tableFilterPlaceholder` | `string \| undefined` | `type string...` | Specifies a short hint that is visible in the search input. |
| `tableFilterValue` | `string \| undefined` | - | Value of table filter. |
| `tableFootProps` | `CTableFootProps \| undefined` | - | Properties to `CTableFoot` component - https://coreui.io/react/docs/components/table/#ctablefoot |
| `tableHeadProps` | `CTableHeadProps \| undefined` | - | Properties to `CTableHead` component - https://coreui.io/react/docs/components/table/#ctablehead |
| `tableProps` | `CTableProps \| undefined` | - | Properties to `CTable` component - https://coreui.io/react/docs/components/table/#ctable |


---

# React Spinner Component API

> Explore the API reference for the React Spinner component and discover how to effectively utilize its props for customization.

## CSpinner

```jsx
import { CSpinner } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `size` | `"sm" \| undefined` | - | Size the component small. |
| `variant` | `"border" \| "grow" \| undefined` | `border` | Set the button variant to an outlined button or a ghost button. |
| `visuallyHiddenLabel` | `string \| undefined` | `Loading...` | Set visually hidden label for accessibility purposes. |


---

# React Bootstrap Spinner Component

> Learn how to use the React Bootstrap Spinner component from CoreUI to show loading states in your app with animated indicators, color options, alignment, and sizing.

## React Bootstrap Spinner Component

The React Bootstrap Spinner component displays a visual loading indicator in your app. Use it to communicate that content is loading, such as form submissions, page data, or background processes.

All spinners are built with HTML and CSS—no JavaScript needed. You can easily customize appearance, color, size, and placement using utility classes.

## Border spinner

Use the border spinner as a lightweight, animated loading indicator.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderExample = () => {
  return <CSpinner />
}
```

### Spinner colors

The React Bootstrap Spinner uses `currentColor`, so you can customize it using any text color utility class.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderColorsExample = () => {
  return (
    <>
      <CSpinner color="primary" />
      <CSpinner color="secondary" />
      <CSpinner color="success" />
      <CSpinner color="danger" />
      <CSpinner color="warning" />
      <CSpinner color="info" />
      <CSpinner color="light" />
      <CSpinner color="dark" />
    </>
  )
}
```

## Grow spinner

An alternative to the border version is the grow spinner. It expands and fades instead of spinning.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerGrowExample = () => {
  return <CSpinner variant="grow" />
}
```
```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerGrowColorsExample = () => {
  return (
    <>
      <CSpinner color="primary" variant="grow" />
      <CSpinner color="secondary" variant="grow" />
      <CSpinner color="success" variant="grow" />
      <CSpinner color="danger" variant="grow" />
      <CSpinner color="warning" variant="grow" />
      <CSpinner color="info" variant="grow" />
      <CSpinner color="light" variant="grow" />
      <CSpinner color="dark" variant="grow" />
    </>
  )
}
```

## Spinner alignment

React Bootstrap Spinners use `inline-flex`, so they align well in many layout contexts.

### Margin utilities

Use Bootstrap spacing utilities for control over margin and spacing.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderMarginExample = () => {
  return <CSpinner className="m-5" />
}
```

### Flex alignment

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFlexExample = () => {
  return (
    <div className="d-flex justify-content-center">
      <CSpinner />
    </div>
  )
}
```
```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFlex2Example = () => {
  return (
    <div className="d-flex align-items-center">
      <strong role="status">Loading...</strong>
      <CSpinner className="ms-auto" />
    </div>
  )
}
```

### Float placement

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementFloatsExample = () => {
  return (
    <div className="clearfix">
      <CSpinner className="float-end" />
    </div>
  )
}
```

### Text alignment

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerBorderPlacementTextAlignExample = () => {
  return (
    <div className="text-center">
      <CSpinner />
    </div>
  )
}
```

## Spinner size

Use the `size="sm"` prop for a compact spinner.

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerSizeSmallExample = () => {
  return (
    <>
      <CSpinner size="sm" />
      <CSpinner size="sm" variant="grow" />
    </>
  )
}
```

For full control, use inline styles or custom CSS:

```html
import React from 'react'
import { CSpinner } from '@coreui/react'

export const SpinnerSizeCustomExample = () => {
  return (
    <>
      <CSpinner style={{ width: '3rem', height: '3rem' }} />
      <CSpinner variant="grow" style={{ width: '3rem', height: '3rem' }} />
    </>
  )
}
```

## Spinners in buttons

Show React Bootstrap Spinners inside buttons to indicate loading states during form submissions or API requests.

```html
import React from 'react'
import { CButton, CSpinner } from '@coreui/react'

export const SpinnerButtonsExample = () => {
  return (
    <>
      <CButton color="primary" disabled>
        <CSpinner as="span" size="sm" aria-hidden="true" />
        <span className="visually-hidden" role="status">
          Loading...
        </span>
      </CButton>
      <CButton color="primary" disabled>
        <CSpinner as="span" className="me-2" size="sm" aria-hidden="true" />
        <span role="status">Loading...</span>
      </CButton>
    </>
  )
}
```
```html
import React from 'react'
import { CButton, CSpinner } from '@coreui/react'

export const SpinnerButtons2Example = () => {
  return (
    <>
      <CButton color="primary" disabled>
        <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
        <span className="visually-hidden" role="status">
          Loading...
        </span>
      </CButton>
      <CButton color="primary" disabled>
        <CSpinner as="span" className="me-2" size="sm" variant="grow" aria-hidden="true" />
        <span role="status">Loading...</span>
      </CButton>
    </>
  )
}
```

## Accessibility

Each spinner includes `role="status"` and a visually hidden `<span>` with `"Loading..."` for screen readers. You can customize the text based on context.

## API reference

Explore the full API for the React Bootstrap Spinner component:

- [&lt;CSpinner /&gt;](../api/#cspinner)


---

# React Spinner Component Styling

> Learn how to customize the React Spinner component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React spinners use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Border spinner variables:

```scss
--cui-spinner-width: #{$spinner-width};
--cui-spinner-height: #{$spinner-height};
--cui-spinner-vertical-align: #{$spinner-vertical-align};
--cui-spinner-border-width: #{$spinner-border-width};
--cui-spinner-animation-speed: #{$spinner-animation-speed};
--cui-spinner-animation-name: spinner-border;
```

Growing spinner variables:

```scss
--cui-spinner-width: #{$spinner-width};
--cui-spinner-height: #{$spinner-height};
--cui-spinner-vertical-align: #{$spinner-vertical-align};
--cui-spinner-animation-speed: #{$spinner-animation-speed};
--cui-spinner-animation-name: spinner-grow;
```

For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:

```scss
--cui-spinner-width: #{$spinner-width-sm};
--cui-spinner-height: #{$spinner-height-sm};
--cui-spinner-border-width: #{$spinner-border-width-sm};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-spinner-width': '3rem',
  '--cui-spinner-height': '3rem',
}

return <CCallout style={customVars}>...</CCallout>
```

### SASS variables

```scss
$spinner-width:           2rem !default;
$spinner-height:          $spinner-width !default;
$spinner-vertical-align:  -.125em !default;
$spinner-border-width:    .25em !default;
$spinner-animation-speed: .75s !default;

$spinner-width-sm:        1rem !default;
$spinner-height-sm:       $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
```

### Keyframes

Used for creating the CSS animations for our spinners. Included in `_spinners.scss`.

```scss
@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
```

```scss
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
```


---

# React Table Component API

> Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.

## CTable

```jsx
import { CTable } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `string \| undefined` | - | Set the vertical aligment. |
| `borderColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the border color of the component to one of CoreUI’s themed colors. |
| `bordered` | `boolean \| undefined` | - | Add borders on all sides of the table and cells. |
| `borderless` | `boolean \| undefined` | - | Remove borders on all sides of the table and cells. |
| `caption` | `string \| undefined` | - | Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption. |
| `captionTop` | `string \| undefined` | - | Set the text of the table caption and the caption on the top of the table. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `columns` | `(string \| Column)[] \| undefined` | - | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props') In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`, - _style (Object) - adds styles to the column header (useful for defining widths) |
| `footer` | `(string \| FooterItem)[] \| undefined` | - | Array of objects or strings, where each element represents one cell in the table footer. Example items: `['FooterCell', 'FooterCell', 'FooterCell']` or `[{ label: 'FooterCell', _props: { color: 'success' }, ...]` |
| `hover` | `boolean \| undefined` | - | Enable a hover state on table rows within a `<CTableBody>`. |
| `items` | `Item[] \| undefined` | - | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}` |
| `responsive` | `boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` | - | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. |
| `small` | `boolean \| undefined` | - | Make table more compact by cutting all cell `padding` in half. |
| `striped` | `boolean \| undefined` | - | Add zebra-striping to any table row within the `<CTableBody>`. |
| `stripedColumns` | `boolean \| undefined` | - | Add zebra-striping to any table column. |
| `tableFootProps` | `CTableFootProps \| undefined` | - | Properties that will be passed to the table footer component. |
| `tableHeadProps` | `CTableHeadProps \| undefined` | - | Properties that will be passed to the table head component. |

## CTableBody

```jsx
import { CTableBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |

## CTableDataCell

```jsx
import { CTableDataCell } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Highlight a table row or cell. |
| `align` | `string \| undefined` | - | Set the vertical aligment. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |

## CTableFoot

```jsx
import { CTableFoot } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |

## CTableHead

```jsx
import { CTableHead } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |

## CTableHeaderCell

```jsx
import { CTableHeaderCell } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |

## CTableRow

```jsx
import { CTableRow } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | - | Highlight a table row or cell.. |
| `align` | `string \| undefined` | - | Set the vertical aligment. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |


---

# React Bootstrap Table Component

> Learn how to use CoreUI’s React Bootstrap Table component to build responsive, feature-rich tables styled with Bootstrap in your React app.

## How to use React Bootstrap Table component

The `<CTable>` component with Bootstrap theming lets you build responsive and accessible React tables using CoreUI components. Define structure manually or use the `columns` and `items` API for easier table generation.

```html
import { CTable } from '@coreui/react'

export const TableExample = (props) => {
  const columns = [
    {
      key: 'id',
      label: '#',
      _props: { scope: 'col' },
    },
    {
      key: 'class',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_1',
      label: 'Heading',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_2',
      label: 'Heading',
      _props: { scope: 'col' },
    },
  ]
  const items = [
    {
      id: 1,
      class: 'Mark',
      heading_1: 'Otto',
      heading_2: '@mdo',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 2,
      class: 'Jacob',
      heading_1: 'Thornton',
      heading_2: '@fat',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 3,
      class: 'Larry the Bird',
      heading_2: '@twitter',
      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
    },
  ]
  return <CTable columns={columns} items={items} {...props} />
}
```

In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
  },
]
return <CTable columns={columns} items={items} />
```

You can also put all table components together manually as hitherto.

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">2</CTableHeaderCell>
      <CTableDataCell>Jacob</CTableDataCell>
      <CTableDataCell>Thornton</CTableDataCell>
      <CTableDataCell>@fat</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

Both methods produce the same html code.

## Variants

Use contextual classes to color react tables, table rows or individual cells.

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">Default</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="primary">
      <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="secondary">
      <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="success">
      <CTableHeaderCell scope="row">Success</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="danger">
      <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="warning">
      <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="info">
      <CTableHeaderCell scope="row">Info</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="light">
      <CTableHeaderCell scope="row">Light</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
    <CTableRow color="dark">
      <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
      <CTableDataCell>Cell</CTableDataCell>
      <CTableDataCell>Cell</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

Since version **4.3.0** also this way.

```jsx
const columns = [
  { key: 'class', _props: { scope: 'col' } },
  { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
  { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const items = [
  {
    class: 'Default',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
  },
  {
    class: 'Primary',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'primary' },
  },
  {
    class: 'Secondary',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'secondary' },
  },
  {
    class: 'Success',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'success' },
  },
  {
    class: 'Danger',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'danger' },
  },
  {
    class: 'Warning',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'warning' },
  },
  {
    class: 'Info',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'info' },
  },
  {
    class: 'Light',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'light' },
  },
  {
    class: 'Dark',
    heading_1: 'Cell',
    heading_2: 'Cell',
    _cellProps: { class: { scope: 'row' } },
    _props: { color: 'dark' },
  },
]
return <CTable columns={columns} items={items} />
```

## Accented tables

### Striped rows

Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.

```jsx
<CTable striped>
  ...
</CTable>
```

### Striped columns

Enable `striped` to alternate row background colors for better visual distinction.

```jsx
<CTable stripedColumns>
  ...
</CTable>
```

These classes can also be added to react table variants:

```jsx
<CTable color="dark" striped>
  ...
</CTable>
```

```jsx
<CTable color="dark" stripedColumns>
  ...
</CTable>
```

```jsx
<CTable color="success" striped>
  ...
</CTable>
```

```jsx
<CTable color="success" stripedColumns>
  ...
</CTable>
```

### Hoverable rows

Use the `hover` prop to highlight rows when hovered by the user.

```jsx
<CTable hover>
  ...
</CTable>
```

```jsx
<CTable color="dark" hover>
  ...
</CTable>
```

These hoverable rows can also be combined with the striped variant:

```jsx
<CTable striped hover>
  ...
</CTable>
```

### Active tables

Highlight a table row or cell by adding a `active` property.

As mentioned before since version **4.3.0** we have two ways to generate tables, also with custom properties for rows, and cells.

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _props: { active: true },
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
  },
]
return <CTable columns={columns} items={items} />
```

```jsx
<CTable>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow active>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">2</CTableHeaderCell>
      <CTableDataCell>Jacob</CTableDataCell>
      <CTableDataCell>Thornton</CTableDataCell>
      <CTableDataCell>@fat</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2} active>
        Larry the Bird
      </CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

```jsx
const columns = [
  {
    key: 'id',
    label: '#',
    _props: { scope: 'col' },
  },
  {
    key: 'class',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_1',
    label: 'Heading',
    _props: { scope: 'col' },
  },
  {
    key: 'heading_2',
    label: 'Heading',
    _props: { scope: 'col' },
  },
]
const items = [
  {
    id: 1,
    class: 'Mark',
    heading_1: 'Otto',
    heading_2: '@mdo',
    _props: { active: true },
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 2,
    class: 'Jacob',
    heading_1: 'Thornton',
    heading_2: '@fat',
    _cellProps: { id: { scope: 'row' } },
  },
  {
    id: 3,
    class: 'Larry the Bird',
    heading_2: '@twitter',
    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
  },
]
return <CTable color="dark" columns={columns} items={items} />
```

## Table borders

### Bordered tables

Add `bordered` property for borders on all sides of the table and cells.

```jsx
<CTable bordered>
  ...
</CTable>
```

[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:

```jsx
<CTable bordered borderColor="primary">
  ...
</CTable>
```

### Tables without borders

Add `borderless` property for a react table without borders.

```jsx
<CTable borderless>
  ...
</CTable>
```

```jsx
<CTable color="dark" borderless>
  ...
</CTable>
```

## Small tables

Add `small` property to make any `<CTable>` more compact by cutting all cell `padding` in half.

```jsx
<CTable small>
  ...
</CTable>
```

## Vertical alignment

Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table cells in `<CTableBody>` inherit their alignment from `<CTable>` and are aligned to the the top by default. Use the align property to re-align where needed.

In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).

```jsx
const columns = [
  {
    key: 'heading_1',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_2',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_3',
    _props: { className: 'w-25', scope: 'col' },
  },
  {
    key: 'heading_4',
    _props: { className: 'w-25', scope: 'col' },
  },
]
const items = [
  {
    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
  },
  {
    heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
    _props: { align: 'bottom' }
  },
  {
    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
    heading_3: 'This cell is aligned to the top.',
    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
      _cellProps: { heading_3: { align: 'top' }},
  },
]
return <CTable align="middle" columns={columns} items={items} />
```

You can also put all table components together manually as hitherto.

```jsx
<CTable align="middle" responsive>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 1
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 2
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 3
      </CTableHeaderCell>
      <CTableHeaderCell scope="col" className="w-25">
        Heading 4
      </CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
    <CTableRow align="bottom">
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: bottom;</code> from the table row
      </CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell>
        This cell inherits <code>vertical-align: middle;</code> from the table
      </CTableDataCell>
      <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
      <CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
      </CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

## Nesting

Border styles, active styles, and react table component variants are not inherited by nested tables.

```jsx
<CTable striped>
  <CTableHead>
    <CTableRow>
      <CTableHeaderCell scope="col">#</CTableHeaderCell>
      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
    </CTableRow>
  </CTableHead>
  <CTableBody>
    <CTableRow>
      <CTableHeaderCell scope="row">1</CTableHeaderCell>
      <CTableDataCell>Mark</CTableDataCell>
      <CTableDataCell>Otto</CTableDataCell>
      <CTableDataCell>@mdo</CTableDataCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell colSpan={4}>
        <CTable>
          <CTableHead>
            <CTableRow>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
            </CTableRow>
          </CTableHead>
          <CTableBody>
            <CTableRow>
              <CTableHeaderCell scope="row">A</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
            <CTableRow>
              <CTableHeaderCell scope="row">B</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
            <CTableRow>
              <CTableHeaderCell scope="row">C</CTableHeaderCell>
              <CTableDataCell>First</CTableDataCell>
              <CTableDataCell>Last</CTableDataCell>
            </CTableRow>
          </CTableBody>
        </CTable>
      </CTableHeaderCell>
    </CTableRow>
    <CTableRow>
      <CTableHeaderCell scope="row">3</CTableHeaderCell>
      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
      <CTableDataCell>@twitter</CTableDataCell>
    </CTableRow>
  </CTableBody>
</CTable>
```

## Anatomy

### Table head

Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make `<CTableHead>`s appear light or dark gray.

```jsx
<CTable>
  <CTableHead color="light">
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

If you generate a table using the new method incorporated in version **4.3.0**, you have to use `tableHeadProps` property to pass properties to the table header component.

```jsx
const columns = [...]
const items = [...]

return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light' }} />
```

```jsx
<CTable>
  <CTableHead color="dark">
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable columns={columns} items={items} tableHeadProps={{ color: 'dark' }} />
```

### Table foot

```jsx
<CTable>
  <CTableHead color="light">
    ...
  </CTableHead>
  <CTableBody>
    ...
  <CTableHead>
    <CTableRow>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
    </CTableRow>
  </CTableHead>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const footer = [
  'Footer',
  'Footer',
  'Footer',
  'Footer',
]
const items = [...]

return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
```

### Captions

A `<CTableCaption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

```jsx
<CTable>
  <CTableCaption>List of users</CTableCaption>
  <CTableHead>
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Starting from version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable caption="List of users" columns={columns} items={items} />
```

You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.

```jsx
<CTable caption="top">
  <CTableCaption>List of users</CTableCaption>
  <CTableHead>
    ...
  </CTableHead>
  <CTableBody>
    ...
  </CTableBody>
</CTable>
```

Since version **4.3.0** also this way.

```jsx
const columns = [...]
const items = [...]

return <CTable captionTop="List of users" columns={columns} items={items} />
```

## Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`.

```jsx
<CTable responsive>
  ...
</CTable>
```

```jsx
<CTable responsive="sm">
  ...
</CTable>
```

```jsx
<CTable responsive="md">
  ...
</CTable>
```

```jsx
<CTable responsive="lg">
  ...
</CTable>
```

```jsx
<CTable responsive="xl">
  ...
</CTable>
```

```jsx
<CTable responsive="xxl">
  ...
</CTable>
```

## API

Explore all available props and component options in the API reference below.

- [&lt;CTable /&gt;](../api/#ctable)
- [&lt;CTableBody /&gt;](../api/#ctablebody)
- [&lt;CTableDataCell /&gt;](../api/#ctabledatacell)
- [&lt;CTableFoot /&gt;](../api/#ctablefoot)
- [&lt;CTableHead /&gt;](../api/#ctablehead)
- [&lt;CTableHeaderCell /&gt;](../api/#ctableheadercell)
- [&lt;CTableRow /&gt;](../api/#ctablerow)


---

# React Table Component Styling

> Learn how to customize the React Table component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$table-cell-padding-y:        .5rem !default;
$table-cell-padding-x:        .5rem !default;
$table-cell-padding-y-sm:     .25rem !default;
$table-cell-padding-x-sm:     .25rem !default;

$table-cell-vertical-align:   top !default;

$table-color:                 var(--cui-emphasis-color) !default;
$table-bg:                    var(--cui-body-bg) !default;
$table-accent-bg:             transparent !default;

$table-th-font-weight:        null !default;

$table-striped-color:         $table-color !default;
$table-striped-bg-factor:     .05 !default;
$table-striped-bg:            rgba(var(--cui-emphasis-color-rgb), $table-striped-bg-factor) !default;

$table-active-color:          $table-color !default;
$table-active-bg-factor:      .1 !default;
$table-active-bg:             rgba(var(--cui-emphasis-color-rgb), $table-active-bg-factor) !default;

$table-hover-color:           $table-color !default;
$table-hover-bg-factor:       .075 !default;
$table-hover-bg:              rgba(var(--cui-emphasis-color-rgb), $table-hover-bg-factor) !default;

$table-border-factor:         .2 !default;
$table-border-width:          var(--cui-border-width) !default;
$table-border-color:          var(--cui-border-color) !default;

$table-striped-order:         odd !default;
$table-striped-columns-order: even !default;

$table-group-separator-color: currentcolor !default;

$table-caption-color:         var(--cui-secondary-color) !default;

$table-bg-scale:              -80% !default;
```

### SASS loops

```scss
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
) !default;
```


---

# React Tabs Component API

> Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.

## CTab

```jsx
import { CTab } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `itemKey` | `string \| number` | - | Item key. |

## CTabContent

```jsx
import { CTabContent } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CTabList

```jsx
import { CTabList } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `layout` | `"fill" \| "justified" \| undefined` | - | Specify a layout type for component. |
| `variant` | `"enclosed" \| "enclosed-pills" \| "pills" \| "tabs" \| "underline" \| "underline-border" \| undefined` | - | Set the nav variant to tabs or pills. |

## CTabPanel

```jsx
import { CTabPanel } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `itemKey` | `string \| number` | - | Item key. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `transition` | `boolean \| undefined` | `true` | Enable fade in and fade out transition. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of component. |

## CTabs

```jsx
import { CTabs } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeItemKey` | `string \| number \| undefined` | - | Controls the currently active tab. When provided, the component operates in a controlled mode. You must handle tab switching manually by updating this prop. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `defaultActiveItemKey` | `string \| number \| undefined` | - | Sets the initially active tab when the component mounts. After initialization, the component manages active tab changes internally. Use `defaultActiveItemKey` for uncontrolled usage. |
| `onChange` | `((value: string \| number) => void) \| undefined` | - | Callback fired when the active tab changes. - In controlled mode (`activeItemKey` provided), you must update `activeItemKey` yourself based on the value received. - In uncontrolled mode, this callback is called after internal state updates. |


---

# React Bootstrap Tabs Component

> Learn how to create tabbed navigation interfaces in React using CoreUI's components styled like Bootstrap tabs and pills.

## How to use React Bootstrap Tabs component

Use CoreUI's React tabs styled with Bootstrap to organize content into multiple sections that users can switch between using tabs or pills.

### Tabs style

The default `variant="tabs"` creates traditional Bootstrap-style tabbed navigation.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList variant="tabs">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Unstyled

Without the `variant` prop, tabs render with minimal default styles.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledExample = () => {
  return (
    <CTabs defaultActiveItemKey="profile">
      <CTabList>
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Pills style

Use `variant="pills"` to display tabs styled like Bootstrap pills.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsPillsExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="pills">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Underline style

Use `variant="underline"` to show a bottom border underline beneath the active tab.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnderlineExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="underline">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Underline border

Use `variant="underline-border"` to show a full underline across the width of the tab.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnderlineBorderExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="underline-border">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Fill and justify

Use `layout="fill"` or `layout="justified"` to control how tabs stretch to fill the horizontal space.

```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledFillAndJustifyExample = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="tabs" layout="fill">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile tab with longer content
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```
```html
import React from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsUnstyledFillAndJustify2Example = () => {
  return (
    <CTabs defaultActiveItemKey={2}>
      <CTabList variant="tabs" layout="justified">
        <CTab aria-controls="home-tab-pane" itemKey={1}>
          Home
        </CTab>
        <CTab aria-controls="profile-tab-pane" itemKey={2}>
          Profile
        </CTab>
        <CTab aria-controls="contact-tab-pane" itemKey={3}>
          Contact
        </CTab>
        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
          Home tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
          Profile tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
          Contact tab content
        </CTabPanel>
        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

### Controlled tabs

Use `activeItemKey` and `onChange` to fully control the active tab from your component state.

```html
import React, { useState } from 'react'
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'

export const TabsControlledExample = () => {
  const [activeTab, setActiveTab] = useState<number | string>('profile')

  return (
    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
      <CTabList variant="tabs">
        <CTab itemKey="home">Home</CTab>
        <CTab itemKey="profile">Profile</CTab>
        <CTab itemKey="contact">Contact</CTab>
        <CTab disabled itemKey="disabled">
          Disabled
        </CTab>
      </CTabList>
      <CTabContent>
        <CTabPanel className="p-3" itemKey="home">
          Home tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="profile">
          Profile tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="contact">
          Contact tab content
        </CTabPanel>
        <CTabPanel className="p-3" itemKey="disabled">
          Disabled tab content
        </CTabPanel>
      </CTabContent>
    </CTabs>
  )
}
```

## Accessibility

CoreUI's Tabs component automatically manages `aria-` and `role="..."` attributes to match Bootstrap and WAI-ARIA accessibility guidelines for tabs.

## API reference

Refer to the API documentation for detailed descriptions of all available props and usage patterns.

- [&lt;CTabs /&gt;](../api/#ctabs)
- [&lt;CTabList /&gt;](../api/#ctablist)
- [&lt;CTab /&gt;](../api/#ctab)
- [&lt;CTabContent /&gt;](../api/#ctabcontent)
- [&lt;CTabPanel /&gt;](../api/#ctabpanel)


---

# React Tabs Component Styling

> Learn how to customize the React Tabs component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

On the `.nav` base class:

```scss
--cui-nav-link-padding-x: #{$nav-link-padding-x};
--cui-nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --cui-nav-link-font-size);
--cui-nav-link-font-weight: #{$nav-link-font-weight};
--cui-nav-link-color: #{$nav-link-color};
--cui-nav-link-hover-color: #{$nav-link-hover-color};
--cui-nav-link-disabled-color: #{$nav-link-disabled-color};
```

On the `.nav-tabs` modifier class:

```scss
--cui-nav-tabs-border-width: #{$nav-tabs-border-width};
--cui-nav-tabs-border-color: #{$nav-tabs-border-color};
--cui-nav-tabs-border-radius: #{$nav-tabs-border-radius};
--cui-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--cui-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--cui-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--cui-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
```

On the `.nav-pills` modifier class:

```scss
--cui-nav-pills-border-radius: #{$nav-pills-border-radius};
--cui-nav-pills-link-active-color: #{$nav-pills-link-active-color};
--cui-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
```

_Added in 5.0.0._

On the `.nav-underline` modifier class:

```scss
--cui-nav-underline-gap: #{$nav-underline-gap};
--cui-nav-underline-border-width: #{$nav-underline-border-width};
--cui-nav-underline-link-active-color: #{$nav-underline-link-active-color};
```

_Added in 5.0.0._

On the `.nav-underline-border` modifier class:

```scss
--cui-nav-underline-border-gap: #{$nav-underline-border-gap};
--cui-nav-underline-border-border-color: #{$nav-underline-border-border-color};
--cui-nav-underline-border-border-width: #{$nav-underline-border-border-width};
--cui-nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
--cui-nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
--cui-nav-underline-border-link-color: #{$nav-underline-border-link-color};
--cui-nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
--cui-nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-nav-link-color': '#555',
  '--cui-nav-link-disabled-color': '#afaeef',
}

return <CTabs style={customVars}>{/* Tabs content */}</CTabs>
```

### SASS variables

```scss
$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-font-size:                null !default;
$nav-link-font-weight:              null !default;
$nav-link-color:                    var(--cui-link-color) !default;
$nav-link-hover-color:              var(--cui-link-hover-color) !default;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color:           var(--cui-secondary-color) !default;
$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;

$nav-tabs-border-color:             var(--cui-border-color) !default;
$nav-tabs-border-width:             var(--cui-border-width) !default;
$nav-tabs-border-radius:            var(--cui-border-radius) !default;
$nav-tabs-link-hover-border-color:  var(--cui-secondary-bg) var(--cui-secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        var(--cui-emphasis-color) !default;
$nav-tabs-link-active-bg:           var(--cui-body-bg) !default;
$nav-tabs-link-active-border-color: var(--cui-border-color) var(--cui-border-color) $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           var(--cui-border-radius) !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

$nav-underline-gap:                 1rem !default;
$nav-underline-border-width:        .125rem !default;
$nav-underline-link-active-color:   var(--cui-emphasis-color) !default;

$nav-underline-border-gap:                  .5rem !default;
$nav-underline-border-border-color:         var(--cui-border-color) !default;
$nav-underline-border-border-width:         .125rem !default;
$nav-underline-border-link-padding-y:       .5rem !default;
$nav-underline-border-link-padding-x:       .5rem !default;
$nav-underline-border-link-color:           var(--cui-secondary-color) !default;
$nav-underline-border-link-active-color:    var(--cui-primary) !default;
$nav-underline-border-link-disabled-color:  var(--cui-tertiary-color) !default;

$nav-enclosed-padding:                   .125rem !default;
$nav-enclosed-bg:                        var(--cui-tertiary-bg) !default;
$nav-enclosed-border-radius:             $border-radius-lg !default;
$nav-enclosed-link-padding-y:            .375rem !default;
$nav-enclosed-link-padding-x:            .875rem !default;
$nav-enclosed-link-color:                var(--cui-body-color) !default;
$nav-enclosed-link-border-width:         1px !default;
$nav-enclosed-link-active-color:         var(--cui-body-color) !default;
$nav-enclosed-link-active-bg:            var(--cui-body-bg) !default;
$nav-enclosed-link-active-border-color:  var(--cui-border-color) !default;
$nav-enclosed-link-hover-box-shadow:     var(--cui-box-shadow-sm) !default;
$nav-enclosed-link-disabled-color:       var(--cui-secondary-color) !default;
```


---

# React Toast Component API

> Explore the API reference for the React Toast component and discover how to effectively utilize its props for customization.

## CToast

```jsx
import { CToast } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `boolean \| undefined` | `true` | Apply a CSS fade transition to the toast. |
| `autohide` | `boolean \| undefined` | `true` | Auto hide the toast. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `delay` | `number \| undefined` | `5000` | Delay hiding the toast (ms). |
| `onClose` | `((index: number \| null) => void) \| undefined` | - | Callback fired when the component requests to be closed. |
| `onShow` | `((index: number \| null) => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `visible` | `boolean \| undefined` | `false` | Toggle the visibility of component. |

## CToastHeader

```jsx
import { CToastHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaCloseLabel` | `string \| undefined` | - | Sets the `aria-label` of the close button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `closeButton` | `boolean \| undefined` | - | Automatically add a close button to the header. |

## CToastBody

```jsx
import { CToastBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CToastClose

```jsx
import { CToastClose } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string \| undefined` | `'Close'` | Sets the `aria-label` attribute of the close button. |
| `as` | `(ElementType & string) \| (ElementType & ComponentClass<any, any>) \| (ElementType & FunctionComponent<any>) \| undefined` | - | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `dark` | `boolean \| undefined` | - | Invert the default color. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `white` | `boolean \| undefined` | - | Change the default color to white. |

## CToaster

```jsx
import { CToaster } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `placement` | `'top-start' \| 'top' \| 'top-end' \| 'middle-start' \| 'middle' \| 'middle-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| string` | - | Describes the placement of your component. |
| `push` | `ReactElement` | - | Adds new `CToast` to `CToaster`. |


---

# React Bootstrap Toast Component

> Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.

## How to use React Bootstrap Toast component

Use CoreUI's React toast notifications styled like Bootstrap to provide lightweight, dismissible alerts for your application. Toasts can include headers, body content, icons, or be customized entirely.

### Basic usage

Toasts support headers and body content. Use the `autohide` prop to configure automatic dismissal behavior.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastExample = () => {
  return (
    <CToast animation={false} autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```
```html
import React, { useRef, useState } from 'react'
import { CButton, CToast, CToastBody, CToaster, CToastHeader } from '@coreui/react'

export const ToastLiveExample = () => {
  const [toast, addToast] = useState<any>()
  const toaster = useRef(null)
  const exampleToast = (
    <CToast>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
  return (
    <>
      <CButton color="primary" onClick={() => addToast(exampleToast)}>
        Send a toast
      </CButton>
      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
    </>
  )
}
```

### Translucent background

Toasts have a slightly translucent background by default, giving a modern Bootstrap feel.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastTranslucentExample = () => {
  return (
    <CToast autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```

### Stacked toasts

Wrap multiple toasts in a container to stack them vertically with spacing.

```html
import React from 'react'
import { CToast, CToastBody, CToastHeader, CToaster } from '@coreui/react'

export const ToastStackingExample = () => {
  return (
    <CToaster className="position-static">
      <CToast autohide={false} visible={true}>
        <CToastHeader closeButton>
          <svg
            className="rounded me-2"
            width="20"
            height="20"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
            role="img"
          >
            <rect width="100%" height="100%" fill="#007aff"></rect>
          </svg>
          <div className="fw-bold me-auto">CoreUI for React.js</div>
          <small>7 min ago</small>
        </CToastHeader>
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
      </CToast>
      <CToast autohide={false} visible={true}>
        <CToastHeader closeButton>
          <svg
            className="rounded me-2"
            width="20"
            height="20"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
            role="img"
          >
            <rect width="100%" height="100%" fill="#007aff"></rect>
          </svg>
          <div className="fw-bold me-auto">CoreUI for React.js</div>
          <small>7 min ago</small>
        </CToastHeader>
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
      </CToast>
    </CToaster>
  )
}
```

### Custom content

You can customize toasts by omitting headers, replacing close buttons, or applying utility classes and icons.

```html
import React from 'react'
import { CToast, CToastBody, CToastClose } from '@coreui/react'

export const ToastCustomContentExample = () => {
  return (
    <CToast autohide={false} visible={true} className="align-items-center">
      <div className="d-flex">
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
        <CToastClose className="me-2 m-auto" />
      </div>
    </CToast>
  )
}
```
```html
import React from 'react'
import { CToast, CToastBody, CToastHeader } from '@coreui/react'

export const ToastCustomContent2Example = () => {
  return (
    <CToast animation={false} autohide={false} visible={true}>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
}
```

### Color schemes

Use CoreUI’s utility classes and props like `color`, `text-white`, and `border-0` to create Bootstrap-styled toast variants.

```html
import React from 'react'
import { CToast, CToastBody, CToastClose } from '@coreui/react'

export const ToastColorSchemesExample = () => {
  return (
    <CToast
      autohide={false}
      visible={true}
      color="primary"
      className="text-white align-items-center"
    >
      <div className="d-flex">
        <CToastBody>Hello, world! This is a toast message.</CToastBody>
        <CToastClose className="me-2 m-auto" white />
      </div>
    </CToast>
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React.

- [&lt;CToast /&gt;](../api/#ctoast)
- [&lt;CToastHeader /&gt;](../api/#ctoastheader)
- [&lt;CToastBody /&gt;](../api/#ctoastbody)
- [&lt;CToastClose /&gt;](../api/#ctoastclose)
- [&lt;CToaster /&gt;](../api/#ctoaster)


---

# React Toast Component Styling

> Learn how to customize the React Toast component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Toast supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-toast-zindex: #{$zindex-toast};
--cui-toast-padding-x: #{$toast-padding-x};
--cui-toast-padding-y: #{$toast-padding-y};
--cui-toast-spacing: #{$toast-spacing};
--cui-toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --cui-toast-font-size);
--cui-toast-color: #{$toast-color};
--cui-toast-bg: #{$toast-background-color};
--cui-toast-border-width: #{$toast-border-width};
--cui-toast-border-color: #{$toast-border-color};
--cui-toast-border-radius: #{$toast-border-radius};
--cui-toast-box-shadow: #{$toast-box-shadow};
--cui-toast-header-color: #{$toast-header-color};
--cui-toast-header-bg: #{$toast-header-background-color};
--cui-toast-header-border-color: #{$toast-header-border-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-toast-spacing': '2rem',
  '--cui-toast-color': '#f2f3f4',
}

return <CToast style={customVars}>{/* Toast content */}</CToast>
```

### SASS variables

```scss
$toast-max-width:                   350px !default;
$toast-padding-x:                   .75rem !default;
$toast-padding-y:                   .5rem !default;
$toast-font-size:                   .875rem !default;
$toast-color:                       null !default;
$toast-background-color:            rgba(var(--cui-body-bg-rgb), .85) !default;
$toast-border-width:                var(--cui-border-width) !default;
$toast-border-color:                var(--cui-border-color-translucent) !default;
$toast-border-radius:               var(--cui-border-radius) !default;
$toast-box-shadow:                  var(--cui-box-shadow) !default;
$toast-spacing:                     $container-padding-x !default;

$toast-header-color:                var(--cui-secondary-color) !default;
$toast-header-background-color:     rgba(var(--cui-body-bg-rgb), .85) !default;
$toast-header-border-color:         $toast-border-color !default;
```


---

# React Tooltip Component API

> Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.

## CTooltip

```jsx
import { CTooltip } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `boolean \| undefined` | `true` | Enables or disables the CSS fade transition for the React Tooltip. |
| `className` | `string \| undefined` | - | Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | `document.body` | Appends the React Tooltip to a specific element instead of the default `document.body`. You may pass: - A DOM element (`HTMLElement` or `DocumentFragment`) - A function that returns a single element - `null` |
| `content` | `ReactNode` | - | Content to be displayed within the React Tooltip. Can be a string or any valid React node. |
| `delay` | `number \| { show: number; hide: number; } \| undefined` | `0` | The delay (in milliseconds) before showing or hiding the React Tooltip. - If provided as a number, the delay is applied to both "show" and "hide". - If provided as an object, it should have distinct "show" and "hide" values. |
| `fallbackPlacements` | `'top', 'right', 'bottom', 'left' \| ('top', 'right', 'bottom', 'left')[]` | `['top', 'right', 'bottom', 'left']` | Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order. |
| `offset` | `[number, number] \| undefined` | `[0, 6]` | Adjusts the offset of the React Tooltip relative to its target. Expects a tuple `[x-axis, y-axis]`. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired immediately after the React Tooltip is hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired immediately after the React Tooltip is shown. |
| `placement` | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| undefined` | `top` | Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position. |
| `popperConfig` | `Partial<Options> \| ((defaultPopperConfig: Partial<Options>) => Partial<Options>) \| undefined` | - | Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. [Learn more](https://popper.js.org/docs/v2/constructors/#options) |
| `trigger` | `'hover' \| 'focus' \| 'click' \| ('hover' \| 'focus' \| 'click')[]` | `['hover', 'focus']` | Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers. |
| `visible` | `boolean \| undefined` | - | Controls the visibility of the React Tooltip. - `true` to show the tooltip. - `false` to hide the tooltip. |


---

# React Bootstrap Tooltip Component

> Learn how to add Bootstrap-style tooltips in your React app using CoreUI components styled to match Bootstrap.

## How to use React Bootstrap Tooltip component

Use CoreUI's React components styled with Bootstrap to show additional contextual information when users hover over elements, similar to native Bootstrap tooltips.

### Tooltips on links

Hover over the links below to see Bootstrap-style tooltips.

```html
import React from 'react'
import { CLink, CTooltip } from '@coreui/react'

export const TooltipOnLinksExample = () => {
  return (
    <p className="text-body-secondary">
      Tight pants next level keffiyeh
      <CTooltip content="Tooltip text">
        <CLink> you probably </CLink>
      </CTooltip>
      haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger bag
      stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit american
      apparel
      <CTooltip content="Tooltip text">
        <CLink> have a </CLink>
      </CTooltip>
      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
      biodiesel williamsburg marfa, four loko mcsweeney&#39;s cleanse vegan chambray. A really
      ironic artisan
      <CTooltip content="Tooltip text">
        <CLink> whatever keytar </CLink>
      </CTooltip>
      scenester farm-to-table banksy Austin
      <CTooltip content="Tooltip text">
        <CLink> twitter handle </CLink>
      </CTooltip>
      freegan cred raw denim single-origin coffee viral.
    </p>
  )
}
```

### Custom tooltips

You can customize the appearance of tooltips using [CSS variables](../styling/#css-variables). Below is an example with scoped overrides for a unique appearance.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipCustomExample = () => {
  const customTooltipStyle = {
    '--cui-tooltip-bg': 'var(--cui-primary)',
  } as React.CSSProperties

  return (
    <CTooltip
      content="This top tooltip is themed via CSS variables."
      placement="top"
      style={customTooltipStyle}
    >
      <CButton color="secondary">Custom tooltip</CButton>
    </CTooltip>
  )
}
```

### Tooltip directions

You can place tooltips on the top, right, bottom, or left of the element. Directions are automatically mirrored in RTL layouts.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDirectionsExample = () => {
  return (
    <>
      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <CButton color="secondary">Tooltip on top</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <CButton color="secondary">Tooltip on right</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <CButton color="secondary">Tooltip on bottom</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="left"
      >
        <CButton color="secondary">Tooltip on left</CButton>
      </CTooltip>
    </>
  )
}
```

### Disabled elements

Because disabled elements do not trigger events, wrap them in a `<span>` or `<div>` with `tabIndex="0"` to enable tooltip behavior.

```html
import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDisabledElementsExample = () => {
  return (
    <CTooltip content="Disabled tooltip" trigger={['hover', 'focus']}>
      <span className="d-inline-block" tabIndex={0}>
        <CButton color="primary" disabled>
          Disabled button
        </CButton>
      </span>
    </CTooltip>
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all available props and customization options.

- [&lt;CTooltip /&gt;](../api/#ctooltip)


---

# React Tooltip Component Styling

> Learn how to customize the React Tooltip component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Tooltip supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-tooltip-zindex: #{$zindex-tooltip};
--cui-tooltip-max-width: #{$tooltip-max-width};
--cui-tooltip-padding-x: #{$tooltip-padding-x};
--cui-tooltip-padding-y: #{$tooltip-padding-y};
--cui-tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --cui-tooltip-font-size);
--cui-tooltip-color: #{$tooltip-color};
--cui-tooltip-bg: #{$tooltip-bg};
--cui-tooltip-border-radius: #{$tooltip-border-radius};
--cui-tooltip-opacity: #{$tooltip-opacity};
--cui-tooltip-arrow-width: #{$tooltip-arrow-width};
--cui-tooltip-arrow-height: #{$tooltip-arrow-height};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-tooltip-color': '#888',
  '--cui-tooltip-bg': '#f2f4f6',
}

return <CTooltip style={customVars}>{/* Tooltip content */}</CTooltip>
```

### SASS variables

```scss
$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     var(--cui-body-bg) !default;
$tooltip-bg:                        var(--cui-emphasis-color) !default;
$tooltip-border-radius:             var(--cui-border-radius) !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 $spacer * .25 !default;
$tooltip-padding-x:                 $spacer * .5 !default;
$tooltip-margin:                    null !default; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
// fusv-disable
$tooltip-arrow-color:               null !default; // Deprecated in 4.2.0 for CSS variables
// fusv-enable
```


---

# React Virtual Scroller Component API

> Explore the API reference for the React Virtual Scroller component and discover how to effectively utilize its props for customization.

## CVirtualScroller

```jsx
import { CVirtualScroller } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `onScroll` | `((currentItemIndex: number) => void) \| undefined` | - | Event fires when the component has been scrolled. |
| `visibleItems` | `number` | - | Amount of visible items |


---

# React Widgets Component API

> Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.

## CWidgetStatsA

```jsx
import { CWidgetStatsA } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `action` | `ReactNode` | - | Action node for your component. |
| `chart` | `ReactNode` | - | Chart node for your component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |

## CWidgetStatsB

```jsx
import { CWidgetStatsB } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `inverse` | `boolean \| undefined` | - | Colors have been inverted from their default dark shade. |
| `progress` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the progress bar to one of CoreUI’s themed colors. |
| `text` | `string \| undefined` | - | Helper text for your component. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |

## CWidgetStatsC

```jsx
import { CWidgetStatsC } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `icon` | `ReactNode` | - | Icon node for your component. |
| `inverse` | `boolean \| undefined` | - | Colors have been inverted from their default dark shade. |
| `progress` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the progress bar to one of CoreUI’s themed colors. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |

## CWidgetStatsD

```jsx
import { CWidgetStatsD } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `chart` | `ReactNode` | - | Chart node for your component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `icon` | `ReactNode` | - | Icon node for your component. |
| `values` | `Value[] \| undefined` | - | Values and titles for your component. |

## CWidgetStatsE

```jsx
import { CWidgetStatsE } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `chart` | `ReactNode` | - | Chart node for your component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |

## CWidgetStatsF

```jsx
import { CWidgetStatsF } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `footer` | `ReactNode` | - | Footer node for your component. |
| `icon` | `ReactNode` | - | Icon node for your component. |
| `padding` | `boolean \| undefined` | `true` | Set padding of your component. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |


---

# React Autocomplete Component API

> Explore the API reference for the React Autocomplete component and discover how to effectively utilize its props for customization.

## CAutocomplete

```jsx
import { CAutocomplete } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `allowOnlyDefinedOptions` | `boolean \| undefined` | `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 \| undefined` | `Clear selection` | Sets the accessible label (`aria-label`) for the cleaner button, describing its action for screen readers. |
| `ariaIndicatorLabel` | `string \| undefined` | `Toggle visibility of options menu` | Sets the accessible label (`aria-label`) for the indicator button that toggles the options menu. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. These classes will be merged with the default React autocomplete classes. |
| `cleaner` | `boolean \| undefined` | `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 \| undefined` | `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. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | - | Specifies the DOM element where the dropdown should be rendered when using portal mode. Can be a DOM element reference, DocumentFragment, function that returns an element or null, or null (renders to document body). Works in conjunction with the `portal` prop to control where the portal content is mounted in the DOM tree. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. When `true`, the React.js autocomplete is non-interactive and appears visually disabled. Users cannot type, select options, or trigger the dropdown. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `highlightOptionsOnSearch` | `boolean \| undefined` | `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 \| undefined` | - | Set the id attribute for the native input element. This id is used for accessibility purposes and form associations. If not provided, a unique id may be generated automatically. |
| `indicator` | `boolean \| undefined` | - | Show dropdown indicator/arrow button. When `true`, displays a dropdown arrow button that can be clicked to manually show or hide the options dropdown. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `loading` | `boolean \| undefined` | - | 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. |
| `name` | `string \| undefined` | - | The name attribute for the input element. Used for form submission and identification in form data. Important for proper form handling and accessibility. |
| `onChange` | `((option: Option \| null) => void) \| undefined` | - | Execute a function 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. |
| `onHide` | `(() => void) \| undefined` | - | 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. |
| `onInput` | `((value: string) => void) \| undefined` | - | Execute a function when the filter/search value changes. Called whenever the user types in the search input. Useful for implementing external search functionality or analytics. |
| `onShow` | `(() => void) \| undefined` | - | The callback is fired when the dropdown requests to be shown. Called when the dropdown opens due to user interaction, focus, or programmatic changes. |
| `options` | `(Option \| OptionsGroup)[]` | - | 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 React autocomplete needs options to function. |
| `optionsGroupsTemplate` | `((option: OptionsGroup) => ReactNode) \| undefined` | - | Custom template for rendering option groups. Allows customization of how option group headers appear in the dropdown. The function receives an OptionsGroup object and should return a ReactNode. |
| `optionsMaxHeight` | `string \| number \| undefined` | `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. |
| `optionsTemplate` | `((option: Option) => ReactNode) \| undefined` | - | Custom template for rendering individual options. Allows complete customization of how each option appears in the dropdown. The function receives an Option object and should return a ReactNode. |
| `placeholder` | `string \| undefined` | - | 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. |
| `portal` | `boolean \| undefined` | `false` | Renders the autocomplete dropdown in a React portal, allowing it to break out of its parent container's styling constraints (like overflow, z-index, or positioning). When enabled, the dropdown is rendered at the document root level, ensuring it appears above other page elements and isn't clipped by parent containers. |
| `readOnly` | `boolean \| undefined` | - | 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. |
| `required` | `boolean \| undefined` | - | When it is present, it indicates that the user must choose a value before submitting the form. Adds HTML5 form validation requirement. The form will not submit until a valid selection is made. |
| `resetSelectionOnOptionsChange` | `boolean \| undefined` | `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 \| undefined` | - | 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` | `ReactNode` | `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 - `ReactNode`: Show custom component/element |
| `showHints` | `boolean \| undefined` | `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. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. - `'sm'`: Small size variant - `'lg'`: Large size variant - `undefined`: Default/medium size |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| undefined` | - | Sets the initially selected value for the React.js 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 \| undefined` | `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 \| undefined` | - | 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 \| undefined` | `10` | 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. |


---

# React Autocomplete Component Styling

> Learn how to customize the React Autocomplete component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Autocomplete supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--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};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-autocomplete-color': '#333',
  '--cui-autocomplete-bg': '#f8f9fa',
}

return <CAutocomplete style={customVars} />
```

### 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !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;
```


---

# React Form Checkbox Component API

> Explore the API reference for the React Form Checkbox component and discover how to effectively utilize its props for customization.

## CFormCheck

```jsx
import { CFormCheck } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `button` | `ButtonObject \| undefined` | - | Create button-like checkboxes and radio buttons. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `hitArea` | `"full" \| undefined` | - | Sets hit area to the full area of the component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `indeterminate` | `boolean \| undefined` | - | Input Checkbox indeterminate Property. |
| `inline` | `boolean \| undefined` | - | Group checkboxes or radios on the same horizontal row. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | The element represents a caption for a component. |
| `reverse` | `boolean \| undefined` | - | Put checkboxes or radios on the opposite side. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `"checkbox" \| "radio" \| undefined` | `checkbox` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |


---

# React Bootstrap Checkbox Component

> Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.

## How to use React Bootstrap Checkbox component

Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.

### Basic example

Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxExample = () => {
  return (
    <>
      <CFormCheck id="flexCheckDefault" label="Default checkbox" />
      <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
    </>
  )
}
```

### Indeterminate state

Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxIndeterminateExample = () => {
  return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
}
```

### Disabled state

Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxDisabledExample = () => {
  return (
    <>
      <CFormCheck label="Disabled checkbox" disabled />
      <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
    </>
  )
}
```

### Stacked layout (default)

By default, multiple checkboxes stack vertically and are spaced evenly.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxStackedExample = () => {
  return (
    <>
      <CFormCheck id="defaultCheck1" label="Default checkbox" />
      <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
    </>
  )
}
```

### Inline checkboxes

Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxInlineExample = () => {
  return (
    <>
      <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
      <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
      <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
    </>
  )
}
```

### Reversed checkboxes

Use the `reverse` prop to position the checkbox on the opposite side of the label.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxReverseExample = () => {
  return (
    <>
      <CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
      <CFormCheck
        reverse
        id="reverseCheckbox2"
        value="option2"
        label="Disabled reverse checkbox"
        disabled
      />
    </>
  )
}
```

### Without labels

If omitting a label, remember to include `aria-label` for accessibility compliance.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxWithoutLabelsExample = () => {
  return <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
}
```

## Checkbox toggle buttons

Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check"
        autoComplete="off"
        label="Single toggle"
      />
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check-2"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'primary' }}
        id="btn-check-3"
        autoComplete="off"
        label="Disabled"
        disabled
      />
    </>
  )
}
```

### Outlined toggle styles

Use outlined button variants for a lighter, bordered appearance.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const CheckboxToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'primary', variant: 'outline' }}
        id="btn-check-outlined"
        autoComplete="off"
        label="Single toggle"
      />
      <CFormCheck
        button={{ color: 'secondary', variant: 'outline' }}
        id="btn-check-2-outlined"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        id="btn-check-3-outlined"
        autoComplete="off"
        label="Checked success"
        defaultChecked
      />
    </>
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all the available props and configuration options.

- [&lt;CFormCheck /&gt;](../api/#cformcheck)


---

# React Checkbox Component Styling

> Learn how to customize the React Checkbox component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-check-input-width:                  1em !default;
$form-check-min-height:                   $font-size-base * $line-height-base !default;
$form-check-padding-start:                $form-check-input-width + .5em !default;
$form-check-margin-bottom:                .125rem !default;
$form-check-label-color:                  null !default;
$form-check-label-cursor:                 null !default;
$form-check-transition:                   null !default;

$form-check-input-active-filter:          brightness(90%) !default;

$form-check-input-bg:                     $input-bg !default;
$form-check-input-border:                 var(--cui-border-width) solid var(--cui-border-color) !default;
$form-check-input-border-radius:          .25em !default;
$form-check-radio-border-radius:          50% !default;
$form-check-input-focus-border:           $input-focus-border-color !default;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;

$form-check-input-checked-color:          $component-active-color !default;
$form-check-input-checked-bg-color:       $component-active-bg !default;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color:          $component-active-color !default;
$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

$form-check-input-disabled-opacity:        .5 !default;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;

$form-check-inline-margin-end:    1rem !default;
```


---

# React Checkbox & Radio Components

> Create consistent cross-browser and cross-device checkboxes and radios with our React checkbox, radio, and switch components.

## Approach

Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

## Checks

```jsx preview
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
```

## Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.

```jsx preview
<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
```

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```jsx preview
<CFormCheck label="Disabled checkbox" disabled/>
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
```

## Radios

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```jsx preview
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
```

### Disabled

```jsx preview
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
```

## Switches

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.

```jsx preview
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
```

### Sizes

```jsx preview
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
```

## Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.

```jsx preview
<CFormCheck id="defaultCheck1" label="Default checkbox"/>
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
```

```jsx preview
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
```

## Inline

Group checkboxes or radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.

```jsx preview
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
```

```jsx preview
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
```

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

```jsx preview
<div>
  <CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
</div>
<div>
  <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
</div>
```

## Toggle buttons

Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.

### Checkbox toggle buttons

```jsx preview
<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
```

```jsx preview
<CFormCheck
  button={{ color: 'primary' }}
  id="btn-check-2"
  autoComplete="off"
  label="Checked"
  defaultChecked
/>
```

```jsx preview
<CFormCheck
  button={{ color: 'primary' }}
  id="btn-check-3"
  autoComplete="off"
  label="Disabled"
  disabled
/>
```

### Radio toggle buttons

```jsx preview
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
```

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

```jsx preview
<div>
  <CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
</div>
<div>
  <CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
</div>
<div>
  <CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
  <CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
</div>
```

## API

### CFormCheck

```jsx
import { CFormCheck } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `button` | `ButtonObject \| undefined` | - | Create button-like checkboxes and radio buttons. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `hitArea` | `"full" \| undefined` | - | Sets hit area to the full area of the component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `indeterminate` | `boolean \| undefined` | - | Input Checkbox indeterminate Property. |
| `inline` | `boolean \| undefined` | - | Group checkboxes or radios on the same horizontal row. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | The element represents a caption for a component. |
| `reverse` | `boolean \| undefined` | - | Put checkboxes or radios on the opposite side. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `"checkbox" \| "radio" \| undefined` | `checkbox` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |

### CFormSwitch

```jsx
import { CFormSwitch } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | The element represents a caption for a component. |
| `reverse` | `boolean \| undefined` | - | Put switch on the opposite side. |
| `size` | `"lg" \| "xl" \| undefined` | - | Size the component large or extra large. Works only with `switch`. |
| `type` | `"checkbox" \| "radio" \| undefined` | `checkbox` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |


---

# React Chip Input Component Accesibility

> Detailed overview of the accessibility and keyboard support features implemented in the CoreUI React Chip Input component.

## Accessible React Chip Input

Chip inputs are commonly used for tags, labels, recipients, and tokenized multi-value entry. When used in forms, they should remain keyboard accessible, clearly labeled, and understandable to assistive technologies. This guide explains how CoreUI React Chip Input supports accessible usage patterns.

### Semantic Structure

- **Inline text input**: `CChipInput` renders a real text input for entering new values, which keeps typing, focus, and screen reader behavior predictable.

- **Chip list pattern**: Existing values are rendered as chips before the inline input, making the field readable as a tokenized sequence of values.

- **Form compatibility**: When `name` is provided, a hidden input is rendered so chip values can participate in traditional form submission.

### ARIA Attributes

CoreUI React Chip Input supports accessible labeling and chip state communication:

- **External labels**: Associate the input with a `<label>` using `id` and `htmlFor` for clear screen reader context.

- **Chip selection state**: Selectable chips expose `aria-selected` through the underlying `CChip` component.

- **Disabled and readonly states**: Disabled and readonly states are reflected so assistive technologies can identify interaction constraints.

### Focus Management

- **Input-first workflow**: Users can type directly into the inline input without extra setup.

- **Chip navigation**: When the input is empty, keyboard navigation can move focus to chips for selection or removal.

- **Selectable chips**: Focusable chips can be traversed with arrow keys once focus enters the chip list.

### Visual Indicators

- **Visible focus states**: The input and focusable chips provide visible focus styles for keyboard users.

- **Selected chips**: Active chips are visually differentiated when `selectable` is enabled.

- **Disabled and readonly styling**: Reduced emphasis communicates when the field or chips are not editable.

### Keyboard Support

The React Chip Input component supports keyboard interaction for both the input and the rendered chips:

<div className="table-api table-responsive border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Function</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><kbd>Enter</kbd></td>
        <td>Create a chip from the current input value.</td>
      </tr>
      <tr>
        <td><kbd>,</kbd> or separator key</td>
        <td>Create a chip from the current input value when a separator is configured.</td>
      </tr>
      <tr>
        <td><kbd>Backspace</kbd> or <kbd>Delete</kbd></td>
        <td>When the input is empty, move focus to the last chip. When a removable chip is focused, remove it.</td>
      </tr>
      <tr>
        <td><kbd>Left Arrow</kbd></td>
        <td>When the caret is at the start of the input, move focus to the last chip. When a chip is focused, move to the previous chip.</td>
      </tr>
      <tr>
        <td><kbd>Right Arrow</kbd></td>
        <td>When a chip is focused, move to the next chip.</td>
      </tr>
      <tr>
        <td><kbd>Space</kbd> or <kbd>Enter</kbd> on a chip</td>
        <td>Toggle selected state when `selectable` is enabled.</td>
      </tr>
      <tr>
        <td><kbd>Home</kbd></td>
        <td>Move focus to the first focusable chip.</td>
      </tr>
      <tr>
        <td><kbd>End</kbd></td>
        <td>Move focus to the last focusable chip.</td>
      </tr>
      <tr>
        <td><kbd>Escape</kbd></td>
        <td>Clear the current input value and blur the input.</td>
      </tr>
    </tbody>
  </table>
</div>


---

# React Chip Input Component API

> Explore the API reference for the React Chip Input component and all available CChipInput props.

## CChipInput

```jsx
import { CChipInput } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | Declarative `CChip` children used as the initial chips. Their values seed the uncontrolled value when `defaultValue` is not provided (parity with the vanilla Chip Input). |
| `chipClassName` | `ChipClassName \| undefined` | - | Adds custom classes to chips rendered by the React Chip Input component. Accepts a static className or a resolver function based on chip value. |
| `className` | `string \| undefined` | - | Adds custom classes to the React Chip Input component root element. |
| `createOnBlur` | `boolean \| undefined` | `true` | Creates a new chip when the React Chip Input component loses focus with a pending value. |
| `defaultValue` | `string[] \| undefined` | `[]` | Sets the initial uncontrolled values rendered by the React Chip Input component. |
| `disabled` | `boolean \| undefined` | - | Disables the React Chip Input component and prevents adding, removing, or selecting chips. |
| `filter` | `boolean \| undefined` | - | Renders the chips as filter chips, each showing a leading check icon while selected. Implies `selectable`. |
| `id` | `string \| undefined` | - | Sets the `id` of the internal text input rendered by the React Chip Input component. |
| `label` | `ReactNode` | - | Renders an inline label inside the React Chip Input component container. |
| `maxChips` | `number \| null \| undefined` | - | Sets the maximum number of chips that can be created in the React Chip Input component. |
| `name` | `string \| undefined` | - | Sets the name of the hidden input used by the React Chip Input component for form submission. |
| `onAdd` | `((value: string) => void) \| undefined` | - | Callback fired when the React Chip Input component adds a new chip. |
| `onChange` | `((values: string[]) => void) \| undefined` | - | Callback fired when the value list of the React Chip Input component changes. |
| `onInput` | `((value: string) => void) \| undefined` | - | Callback fired when the internal text input value changes in the React Chip Input component. |
| `onRemove` | `((value: string) => void) \| undefined` | - | Callback fired when the React Chip Input component removes a chip. |
| `onSelect` | `((selected: string[]) => void) \| undefined` | - | Callback fired when the selected chip values change in the React Chip Input component. |
| `placeholder` | `string \| undefined` | - | Sets placeholder text for the internal input of the React Chip Input component. |
| `readOnly` | `boolean \| undefined` | - | Makes the React Chip Input component readonly while keeping values visible. |
| `removable` | `boolean \| undefined` | `true` | Displays remove buttons on chips managed by the React Chip Input component. |
| `selectable` | `boolean \| undefined` | - | Enables chip selection behavior in the React Chip Input component. |
| `selectionMode` | `"single" \| "multiple" \| undefined` | - | Sets how many chips can be selected at once in the React Chip Input component. |
| `separator` | `string \| null \| undefined` | `,` | Sets the separator character used to create chips while typing or pasting in the React Chip Input component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Sets the size of the React Chip Input component to small or large. |
| `value` | `string[] \| undefined` | - | Controls the values rendered by the React Chip Input component. |


---

# React Bootstrap Chip Input Component

> Learn how to build Bootstrap-styled token inputs with the React Chip Input component in CoreUI, including variants, sizes, selection, and form integration.

## Overview

The CoreUI **React Bootstrap Chip Input component** lets users enter multiple values as chips inside a single field. Use it as a tag input, multi-value selector, or token field for skills, categories, email recipients, and more.

- Type values and press `Enter` or a separator to create chips.
- Chips can be removable and selectable.
- The input stays inline and grows as you type.
- Form integration is supported with a hidden input when `name` is provided.

## When to use Chip Input

Use the React Bootstrap Chip Input component when you need:

- A **tag input** or **token field** for free-form multi-value entry
- An **email or recipient input** where users add multiple addresses
- A **skills or category selector** in forms
- A **filterable multi-select** that integrates with standard HTML forms

## Basic example

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputExample = () => {
  return (
    <CChipInput
      id="skillsInputBasic"
      label="Skills:"
      defaultValue={['JavaScript', 'TypeScript', 'Accessibility']}
      name="chipInputBasicExample"
      placeholder="Add a skill..."
    />
  )
}
```

## Variants

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

const variants: Record<string, string> = {
  feature: 'chip-primary',
  approved: 'chip-success',
  'needs review': 'chip-warning',
  blocking: 'chip-danger',
}

export const ChipInputVariantsExample = () => {
  return (
    <CChipInput
      defaultValue={['Feature', 'Approved', 'Needs review', 'Blocking']}
      chipClassName={(value) => variants[value.trim().toLowerCase()] || ''}
      name="issues"
      placeholder="Add label..."
    />
  )
}
```

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputClassNameExample = () => {
  return (
    <CChipInput
      defaultValue={['Feature', 'Blocking', 'Approved']}
      chipClassName={(value) => {
        const variants: Record<string, string> = {
          approved: 'chip-success',
          blocking: 'chip-danger',
          feature: 'chip-primary',
        }
        return variants[value.trim().toLowerCase()] || 'chip-secondary'
      }}
      placeholder="Type and press Enter"
    />
  )
}
```

## Sizes

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputSizesExample = () => {
  return (
    <>
      <div className="mb-3">
        <CChipInput
          id="skillsInputSm"
          label="Small"
          size="sm"
          defaultValue={['HTML']}
          placeholder="Add small tag..."
        />
      </div>

      <div className="mb-3">
        <CChipInput
          id="skillsInputMd"
          label="Default"
          defaultValue={['JavaScript']}
          placeholder="Add default tag..."
        />
      </div>

      <div>
        <CChipInput
          id="skillsInputLg"
          label="Large"
          size="lg"
          defaultValue={['TypeScript']}
          placeholder="Add large tag..."
        />
      </div>
    </>
  )
}
```

## Empty state

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputEmptyStateExample = () => {
  return <CChipInput name="tags" placeholder="Start typing tags..." />
}
```

## With label

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputWithLabelExample = () => {
  return (
    <div className="mb-3">
      <label className="form-label" htmlFor="techStackInput">
        Tech stack
      </label>
      <CChipInput
        id="techStackInput"
        name="techStack"
        defaultValue={['Vue', 'Vite']}
        placeholder="Add package..."
      />
      <div className="form-text">Press Enter or comma to add a value.</div>
    </div>
  )
}
```

## Disabled

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputDisabledExample = () => {
  return (
    <CChipInput
      defaultValue={['Read only', 'Locked']}
      disabled
      removable={false}
      placeholder="Input disabled"
    />
  )
}
```

## Readonly

```html
import React from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputReadonlyExample = () => {
  return (
    <CChipInput
      defaultValue={['JavaScript', 'TypeScript']}
      readOnly
      placeholder="Read-only values"
    />
  )
}
```

## Selectable chips

```html
import React, { useState } from 'react'
import { CChipInput } from '@coreui/react-pro'

export const ChipInputSelectableExample = () => {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <>
      <CChipInput
        defaultValue={['Design', 'Backend', 'QA', 'DevOps']}
        selectable
        onSelect={setSelected}
        placeholder="Select chips"
      />
      <p className="mt-2 mb-0 small text-body-secondary">
        Selected: {selected.length > 0 ? selected.join(', ') : 'None'}
      </p>
    </>
  )
}
```

## API reference

- [&lt;CChipInput /&gt;](../api/#cchipinput)


---

# React Chip Input Component Styling

> Learn how to customize the React Chip Input component with CSS variables and SASS for flexible styling and better form integration.

### CSS variables

React Chip Input supports CSS variables for inline and stylesheet-level customization. These variables are provided by CoreUI Sass and can be overridden to adapt spacing, sizing, and colors.

```scss
--cui-chip-input-min-height: #{$chip-input-min-height};
--cui-chip-input-padding-y: #{$chip-input-padding-y};
--cui-chip-input-padding-x: #{$chip-input-padding-x};
--cui-chip-input-font-size: #{$chip-input-font-size};
--cui-chip-input-bg: #{$chip-input-bg};
--cui-chip-input-color: #{$chip-input-color};
--cui-chip-input-border-width: #{$chip-input-border-width};
--cui-chip-input-border-color: #{$chip-input-border-color};
--cui-chip-input-border-radius: #{$chip-input-border-radius};
--cui-chip-input-gap: #{$chip-input-gap};
--cui-chip-input-transition: #{$chip-input-transition};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-chip-input-padding-y': '0.5rem',
  '--cui-chip-input-border-color': 'var(--cui-primary)',
}

return <CChipInput style={customVars} placeholder="Add value" />
```

### SASS variables

```scss
$chip-input-min-height:        $input-height !default;
$chip-input-padding-y:         .25rem !default;
$chip-input-padding-x:         .75rem !default;
$chip-input-font-size:         $input-font-size !default;
$chip-input-bg:                var(--cui-body-bg) !default;
$chip-input-color:             var(--cui-body-color) !default;
$chip-input-border-width:      var(--cui-border-width) !default;
$chip-input-border-color:      var(--cui-border-color) !default;
$chip-input-border-radius:     var(--cui-border-radius) !default;
$chip-input-gap:               .375rem !default;
$chip-input-transition:        $input-transition !default;

$chip-input-min-height-sm:     $input-height-sm !default;
$chip-input-padding-y-sm:      .125rem !default;
$chip-input-padding-x-sm:      .5rem !default;
$chip-input-font-size-sm:      $input-font-size-sm !default;
$chip-input-border-radius-sm:  var(--cui-border-radius-sm) !default;
$chip-input-gap-sm:            .125rem !default;

$chip-input-min-height-lg:     $input-height-lg !default;
$chip-input-padding-y-lg:      .375rem !default;
$chip-input-padding-x-lg:      1rem !default;
$chip-input-font-size-lg:      $input-font-size-lg !default;
$chip-input-border-radius-lg:  var(--cui-border-radius-lg) !default;
$chip-input-gap-lg:            .5rem !default;
```


---

# React Date Picker Component API

> Explore the API reference for the React Date Picker component and discover how to effectively utilize its props for customization.

## CDatePicker

```jsx
import { CDatePicker } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaNavNextMonthLabel` | `string \| undefined` | `'Next month'` | A string that provides an accessible label for the button that navigates to the next month in the React Calendar component. This label is read by screen readers to describe the action associated with the button. Customize for a more accessible calendar experience. |
| `ariaNavNextYearLabel` | `string \| undefined` | `'Next year'` | A string that provides an accessible label for the button that navigates to the next year in the React Calendar component. Screen readers utilize this label to inform users of the button's functionality, aiding in a more inclusive application. |
| `ariaNavPrevMonthLabel` | `string \| undefined` | `'Previous month'` | A string that provides an accessible label for the button that navigates to the previous month in the React Calendar component. This label is announced by screen readers, ensuring clarity around the button's purpose. |
| `ariaNavPrevYearLabel` | `string \| undefined` | `'Previous year'` | A string that provides an accessible label for the button that navigates to the previous year in the React Calendar component. Use it to enhance the experience for screen readers and further accessibility. |
| `calendarDate` | `string \| Date \| null \| undefined` | - | Defines the initial date or reference date for the React Calendar component. This date can be either a Date object or a string that can be converted into a valid date. |
| `cancelButton` | `ReactNode` | `'Cancel'` | Toggle visibility or set the content of cancel button. |
| `cancelButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `'primary'` | Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| `cancelButtonSize` | `"sm" \| "lg" \| undefined` | `'sm'` | Size the cancel button small or large. |
| `cancelButtonVariant` | `"outline" \| "ghost" \| undefined` | `'ghost'` | Set the cancel button variant to an outlined button or a ghost button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `cleaner` | `boolean \| undefined` | - | Toggle visibility or set the content of the cleaner button. |
| `closeOnSelect` | `boolean \| undefined` | - | If true the dropdown will be immediately closed after submitting the full date. |
| `confirmButton` | `ReactNode` | `'OK'` | Toggle visibility or set the content of confirm button. |
| `confirmButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `'primary'` | Sets the color context of the confirm button to one of CoreUI’s themed colors. |
| `confirmButtonSize` | `"sm" \| "lg" \| undefined` | `'sm'` | Size the confirm button small or large. |
| `confirmButtonVariant` | `"outline" \| "ghost" \| undefined` | - | Set the confirm button variant to an outlined button or a ghost button. |
| `container` | `"dropdown" \| "inline" \| undefined` | - | Set container type for the component. |
| `date` | `string \| Date \| null \| undefined` | - | Initial selected date. |
| `dayFormat` | `"numeric" \| "2-digit" \| ((date: Date) => string \| number) \| undefined` | `'numeric'` | Sets the format for days. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `disabledDates` | `DisabledDate \| DisabledDate[] \| undefined` | - | Specifies one or more dates that cannot be selected by the user. This is useful for disabling weekends, holidays, or any dates that you need to restrict within your React Calendar component. |
| `dropdownClassNames` | `string \| undefined` | - | A string of all className you want applied to the dropdown menu. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `firstDayOfWeek` | `number \| undefined` | `1` | Sets the first day of the week. This can be adjusted for different locales or preferences: - `0` = Sunday - `1` = Monday - `2` = Tuesday - `3` = Wednesday - `4` = Thursday - `5` = Friday - `6` = Saturday |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `footer` | `boolean \| undefined` | - | Toggle visibility of footer element. |
| `footerContent` | `ReactNode` | - | Add custom elements to the footer. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.: - `{id}-date` |
| `indicator` | `ReactNode` | - | Toggle visibility or set the content of the input indicator. |
| `inputDateFormat` | `((date: Date) => string) \| undefined` | - | Custom function to format the selected date into a string according to a custom format. |
| `inputDateParse` | `((date: string \| Date) => Date) \| undefined` | - | Custom function to parse the input value into a valid Date object. |
| `inputOnChangeDelay` | `number \| undefined` | - | Defines the delay (in milliseconds) for the input field's onChange event. |
| `inputReadOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `locale` | `string \| undefined` | `'default'` | Indicates the locale for the React Calendar component. If not explicitly provided, it inherits the locale settings from the browser. |
| `maxDate` | `string \| Date \| null \| undefined` | - | The maximum date that can be selected. Any date beyond this value will be disabled within the calendar. This is often used to restrict future selections. |
| `minDate` | `string \| Date \| null \| undefined` | - | The minimum date that can be selected. Any date before this value will be disabled in the calendar. Useful for preventing selection of past dates or creating limited booking windows. |
| `monthFormat` | `"numeric" \| "2-digit" \| "long" \| "narrow" \| "short" \| undefined` | `'short'` | Sets the format for month names. Accepts built-in formats ('long', 'narrow', 'short', 'numeric', '2-digit'). |
| `name` | `string \| undefined` | - | The name attribute for the input element. |
| `navigation` | `boolean \| undefined` | - | Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically. |
| `navNextDoubleIcon` | `ReactNode` | - | Customizes the icon for navigating multiple steps forward (double jump), e.g., skipping multiple months or years at once. Ideal for quick navigation through large date ranges. |
| `navNextIcon` | `ReactNode` | - | Customizes the icon for navigating to the next view (month, year, etc.) depending on the current view. Accepts any valid `ReactNode`, enabling you to display text, images, or icons. |
| `navPrevDoubleIcon` | `ReactNode` | - | Customizes the icon for a double jump backward (e.g., jumping multiple months or years at once). This feature simplifies larger date range navigation within your React Calendar component. |
| `navPrevIcon` | `ReactNode` | - | Customizes the icon for navigating to the previous view in the calendar. Accepts any valid ReactNode to provide flexible styling or theming. |
| `navYearFirst` | `boolean \| undefined` | `false` | Reorders the year and month navigation, rendering the year selector first. This offers a different layout for users, particularly useful if you want to prioritize quick year changes. |
| `onDateChange` | `((date: string \| Date \| null, formatedDate?: string \| undefined) => void) \| undefined` | - | Callback fired when the date changed. |
| `onDateHover` | `((date: string \| Date \| null) => void) \| undefined` | - | Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onSelectEndChange` | `((value: boolean) => void) \| undefined` | - | Callback fired when toggling between selecting the start date and the end date in range selection mode. Receives a boolean indicating if the user is currently selecting the end date. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `onViewChanged` | `((view: string) => void) \| undefined` | - | Callback fired when the calendar's view changes between days, months, or years. For instance, moving from day view to month view or from month view to year view. |
| `placeholder` | `string \| string[] \| undefined` | `Select date` | Specifies short hints that are visible in start date and end date inputs. |
| `portal` | `boolean \| undefined` | - | Generates dropdown menu using createPortal. |
| `previewDateOnHover` | `boolean \| undefined` | - | Enable live preview of dates in input fields when hovering over calendar cells. |
| `rangesButtonsColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| `rangesButtonsSize` | `"sm" \| "lg" \| undefined` | - | Size the ranges button small or large. |
| `rangesButtonsVariant` | `"outline" \| "ghost" \| undefined` | - | Set the ranges button variant to an outlined button or a ghost button. |
| `renderDayCell` | `((date: Date, meta: { isDisabled: boolean; isInCurrentMonth: boolean; isInRange: boolean; isSelected: boolean; isToday: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual day cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles, add tooltips, or include additional content in each day cell. |
| `renderMonthCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual month cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each month cell. |
| `renderQuarterCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual quarter cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each quarter cell. |
| `renderYearCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual year cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each year cell. |
| `required` | `boolean \| undefined` | - | When present, it specifies that date must be filled out before submitting the form. |
| `selectAdjacementDays` | `boolean \| undefined` | `false` | Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`. |
| `selectionType` | `SelectionTypes \| undefined` | `'day'` | Specifies the selection type for the React Calendar component. Supports: - `day`: Regular day selection (default) - `week`: Select an entire week - `month`: Select an entire month - `year`: Select an entire year |
| `separator` | `ReactNode` | - | Default icon or character character that separates two dates. |
| `showAdjacementDays` | `boolean \| undefined` | `true` | Controls whether the calendar should display dates from previous or next months (non-selectable if `selectAdjacementDays` is `false`). This can make the calendar visually continuous. |
| `showWeekNumber` | `boolean \| undefined` | `false` | Toggles the display of week numbers (ISO 8601) in the calendar's left column. Particularly beneficial for applications where users need to see the week index for scheduling or reporting. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `timepicker` | `boolean \| undefined` | - | Provide an additional time selection by adding select boxes to choose times. |
| `todayButton` | `ReactNode` | `'Today'` | Toggle visibility or set the content of today button. |
| `todayButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `'primary'` | Sets the color context of the today button to one of CoreUI’s themed colors. |
| `todayButtonSize` | `"sm" \| "lg" \| undefined` | `'sm'` | Size the today button small or large. |
| `todayButtonVariant` | `"outline" \| "ghost" \| undefined` | - | Set the today button variant to an outlined button or a ghost button. |
| `toggler` | `ReactNode` | - | The content of toggler. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of dropdown menu component. |
| `weekdayFormat` | `number \| "long" \| "narrow" \| "short" \| ((date: Date) => string \| number) \| undefined` | `2` | Sets the format or length of the weekday names displayed in the calendar header. You can use numeric values like 2 (two-letter abbreviations) or built-in string formats like `'long'`, `'narrow'`, and `'short'`, or provide a custom function to fully control how weekdays are displayed. |
| `weekNumbersLabel` | `string \| undefined` | - | Defines the label that appears above the week numbers column. For example, you might label it `'WK'` or `'Week #'`. |
| `yearFormat` | `"numeric" \| "2-digit" \| undefined` | `'numeric'` | Sets the format for years. Accepts built-in formats ('numeric' or '2-digit'). |


---

# React Date Picker Component Styling

> Learn how to customize the React Date Picker component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

CoreUI React Date Picker supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-date-picker-zindex: #{$date-picker-zindex};
--cui-date-picker-font-family: #{$date-picker-font-family};
--cui-date-picker-font-size: #{$date-picker-font-size};
--cui-date-picker-font-weight: #{$date-picker-font-weight};
--cui-date-picker-line-height: #{$date-picker-line-height};
--cui-date-picker-color: #{$date-picker-color};
--cui-date-picker-bg: #{$date-picker-bg};
--cui-date-picker-box-shadow: #{$date-picker-box-shadow};
--cui-date-picker-border-width: #{$date-picker-border-width};
--cui-date-picker-border-color: #{$date-picker-border-color};
--cui-date-picker-border-radius: #{$date-picker-border-radius};
--cui-date-picker-disabled-color: #{$date-picker-disabled-color};
--cui-date-picker-disabled-bg: #{$date-picker-disabled-bg};
--cui-date-picker-disabled-border-color: #{$date-picker-disabled-border-color};
--cui-date-picker-focus-color: #{$date-picker-focus-color};
--cui-date-picker-focus-bg: #{$date-picker-focus-bg};
--cui-date-picker-focus-border-color: #{$date-picker-focus-border-color};
--cui-date-picker-focus-box-shadow: #{$date-picker-focus-box-shadow};
--cui-date-picker-placeholder-color: #{$date-picker-placeholder-color};
--cui-date-picker-padding-y: #{$date-picker-padding-y};
--cui-date-picker-padding-x: #{$date-picker-padding-x};
--cui-date-picker-gap: #{$date-picker-gap};
--cui-date-picker-indicator-width: #{$date-picker-indicator-width};
--cui-date-picker-indicator-icon: #{escape-svg($date-picker-indicator-icon)};
--cui-date-picker-indicator-icon-color: #{$date-picker-indicator-icon-color};
--cui-date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size};
--cui-date-picker-cleaner-width: #{$date-picker-cleaner-width};
--cui-date-picker-cleaner-icon: #{escape-svg($date-picker-cleaner-icon)};
--cui-date-picker-cleaner-icon-color: #{$date-picker-cleaner-icon-color};
--cui-date-picker-cleaner-icon-hover-color: #{$date-picker-cleaner-icon-hover-color};
--cui-date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size};
--cui-date-picker-separator-width: #{$date-picker-separator-width};
--cui-date-picker-separator-icon: #{escape-svg($date-picker-separator-icon)};
--cui-date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl)};
--cui-date-picker-separator-icon-size: #{$date-picker-separator-icon-size};
--cui-date-picker-dropdown-bg: #{$date-picker-dropdown-bg};
--cui-date-picker-dropdown-border-width: #{$date-picker-dropdown-border-width};
--cui-date-picker-dropdown-border-color: #{$date-picker-dropdown-border-color};
--cui-date-picker-dropdown-border-radius: #{$date-picker-dropdown-border-radius};
--cui-date-picker-dropdown-box-shadow: #{$date-picker-dropdown-box-shadow};
--cui-date-picker-ranges-width: #{$date-picker-ranges-width};
--cui-date-picker-ranges-padding: #{$date-picker-ranges-padding};
--cui-date-picker-ranges-border-width: #{$date-picker-ranges-border-width};
--cui-date-picker-ranges-border-color: #{$date-picker-ranges-border-color};
--cui-date-picker-timepicker-width: #{$date-picker-timepicker-width};
--cui-date-picker-timepicker-border-color: #{$date-picker-timepicker-border-color};
--cui-date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid var(--cui-date-picker-timepicker-border-color);
--cui-date-picker-footer-padding: #{$date-picker-footer-padding};
--cui-date-picker-footer-border-width: #{$date-picker-footer-border-width};
--cui-date-picker-footer-border-color: #{$date-picker-footer-border-color};
```

```scss
--cui-calendar-table-margin: #{$calendar-table-margin};
--cui-calendar-table-cell-size: #{$calendar-table-cell-size};
--cui-calendar-nav-padding: #{$calendar-nav-padding};
--cui-calendar-nav-border-color: #{$calendar-nav-border-color};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid var(--cui-calendar-nav-border-color);
--cui-calendar-nav-btn-padding-x: #{$calendar-nav-btn-padding-x};
--cui-calendar-nav-btn-padding-y: #{$calendar-nav-btn-padding-y};
@include rfs($calendar-nav-btn-font-size, --cui-calendar-nav-btn-font-size);
--cui-calendar-nav-btn-bg: #{$calendar-nav-btn-bg};
--cui-calendar-nav-btn-border-width: #{$calendar-nav-btn-border-width};
--cui-calendar-nav-btn-border-color: #{$calendar-nav-btn-border-color};
--cui-calendar-nav-btn-border-radius: #{$calendar-nav-btn-border-radius};
--cui-calendar-nav-btn-hover-bg: #{$calendar-nav-btn-hover-bg};
--cui-calendar-nav-btn-hover-border-color: #{$calendar-nav-btn-hover-border-color};
--cui-calendar-nav-btn-focus-border-color: #{$calendar-nav-btn-focus-border-color};
--cui-calendar-nav-btn-focus-box-shadow: #{$calendar-nav-btn-focus-box-shadow};
--cui-calendar-nav-date-font-weight: #{$calendar-nav-date-font-weight};
--cui-calendar-nav-date-color: #{$calendar-nav-date-color};
--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
--cui-calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
--cui-calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
--cui-calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
--cui-calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
--cui-calendar-nav-icon-color: #{$calendar-nav-icon-color};
--cui-calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
--cui-calendar-cell-header-inner-font-weight: #{$calendar-cell-header-inner-font-weight};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-week-number-font-weight: #{$calendar-cell-week-number-font-weight};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
--cui-calendar-cell-hover-color: #{$calendar-cell-hover-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--cui-calendar-cell-today-color: #{$calendar-cell-today-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-calendar-nav-date-color': '#333',
  '--cui-calendar-cell-hover-bg': '#f8f9fa',
}

return <CDatePicker style={customVars} />
```

### SASS variables

```scss
$date-picker-zindex:                   1000 !default;
$date-picker-font-family:              $input-font-family !default;
$date-picker-font-size:                $input-font-size !default;
$date-picker-font-size-sm:             $input-font-size-sm !default;
$date-picker-font-size-lg:             $input-font-size-lg !default;
$date-picker-font-weight:              $input-font-weight !default;
$date-picker-line-height:              $input-line-height !default;
$date-picker-color:                    $input-color !default;
$date-picker-bg:                       $input-bg !default;
$date-picker-box-shadow:               $box-shadow-inset !default;

$date-picker-border-width:             $input-border-width !default;
$date-picker-border-color:             $input-border-color !default;
$date-picker-border-radius:            $border-radius !default;
$date-picker-border-radius-sm:         $border-radius-sm !default;
$date-picker-border-radius-lg:         $border-radius-lg !default;

$date-picker-invalid-border-color:     $form-invalid-border-color !default;
$date-picker-valid-border-color:       $form-valid-border-color !default;

$date-picker-disabled-color:           $input-disabled-color !default;
$date-picker-disabled-bg:              $input-disabled-bg !default;
$date-picker-disabled-border-color:    $input-disabled-border-color !default;

$date-picker-focus-color:              $input-focus-color !default;
$date-picker-focus-bg:                 $input-focus-bg !default;
$date-picker-focus-border-color:       $input-focus-border-color !default;
$date-picker-focus-box-shadow:         $input-btn-focus-box-shadow !default;

$date-picker-placeholder-color:        var(--cui-secondary-color) !default;

$date-picker-padding-y:                $input-padding-y !default;
$date-picker-padding-x:                $input-padding-x !default;
$date-picker-gap:                      $input-padding-x !default;

$date-picker-padding-y-sm:             $input-padding-y-sm !default;
$date-picker-padding-x-sm:             $input-padding-x-sm !default;
$date-picker-gap-sm:                   $input-padding-x-sm !default;

$date-picker-padding-y-lg:             $input-padding-y-lg !default;
$date-picker-padding-x-lg:             $input-padding-x-lg !default;
$date-picker-gap-lg:                   $input-padding-x-lg !default;

$date-picker-cleaner-width:             1.25rem !default;
$date-picker-cleaner-icon-size:         1rem !default;
$date-picker-cleaner-icon-color:        var(--cui-tertiary-color) !default;
$date-picker-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
$date-picker-cleaner-icon-hover-color:  var(--cui-body-color) !default;

$date-picker-cleaner-width-sm:          1rem !default;
$date-picker-cleaner-width-lg:          1.5rem !default;
$date-picker-cleaner-icon-size-sm:      .875rem !default;
$date-picker-cleaner-icon-size-lg:      1.25rem !default;

$date-picker-indicator-width:               1.25rem !default;
$date-picker-indicator-icon-size:           1rem !default;
$date-picker-indicator-icon-color:          var(--cui-tertiary-color) !default;
$date-picker-indicator-icon:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#000'></rect><rect width='32' height='32' x='200' y='224' fill='#000'></rect><rect width='32' height='32' x='280' y='224' fill='#000'></rect><rect width='32' height='32' x='368' y='224' fill='#000'></rect><rect width='32' height='32' x='112' y='296' fill='#000'></rect><rect width='32' height='32' x='200' y='296' fill='#000'></rect><rect width='32' height='32' x='280' y='296' fill='#000'></rect><rect width='32' height='32' x='368' y='296' fill='#000'></rect><rect width='32' height='32' x='112' y='368' fill='#000'></rect><rect width='32' height='32' x='200' y='368' fill='#000'></rect><rect width='32' height='32' x='280' y='368' fill='#000'></rect><rect width='32' height='32' x='368' y='368' fill='#000'></rect></svg>") !default;
$date-picker-indicator-invalid-icon:        $date-picker-indicator-icon !default;
$date-picker-indicator-invalid-icon-color:  var(--cui-form-invalid-color) !default;
$date-picker-indicator-valid-icon:          $date-picker-indicator-icon !default;
$date-picker-indicator-valid-icon-color:    var(--cui-form-valid-color) !default;

$date-picker-indicator-width-sm:            1rem !default;
$date-picker-indicator-width-lg:            1.5rem !default;
$date-picker-indicator-icon-size-sm:        .875rem !default;
$date-picker-indicator-icon-size-lg:        1.25rem !default;

$date-picker-separator-width:            1.25rem !default;
$date-picker-separator-icon-size:        1rem !default;
$date-picker-separator-icon-color:       var(--cui-tertiary-color) !default;
$date-picker-separator-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>") !default;
$date-picker-separator-icon-rtl:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>") !default;

$date-picker-separator-width-sm:         1rem !default;
$date-picker-separator-width-lg:         1.55rem !default;
$date-picker-separator-icon-size-sm:     .875rem !default;
$date-picker-separator-icon-size-lg:     1.25rem !default;

$date-picker-dropdown-bg:                var(--cui-body-bg) !default;
$date-picker-dropdown-border-color:      var(--cui-border-color) !default;
$date-picker-dropdown-border-width:      var(--cui-border-width) !default;
$date-picker-dropdown-border-radius:     var(--cui-border-radius) !default;
$date-picker-dropdown-box-shadow:        var(--cui-box-shadow) !default;

$date-picker-ranges-width:             10rem !default;
$date-picker-ranges-padding:           $spacer * .5 !default;
$date-picker-ranges-border-width:      1px !default;
$date-picker-ranges-border-color:      var(--cui-border-color) !default;

$date-picker-timepicker-width:         (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin) !default;
$date-picker-timepicker-border-width:  1px !default;
$date-picker-timepicker-border-color:  var(--cui-border-color) !default;

$date-picker-footer-padding:           .5rem !default;
$date-picker-footer-border-width:      1px !default;
$date-picker-footer-border-color:      var(--cui-border-color) !default;
```

```scss
$calendar-table-margin:                      .5rem !default;
$calendar-table-cell-size:                   2.75rem !default;

$calendar-nav-padding:                       .5rem !default;
$calendar-nav-border-width:                  1px !default;
$calendar-nav-border-color:                  var(--cui-border-color) !default;

$calendar-nav-btn-padding-y:                 .25rem !default;
$calendar-nav-btn-padding-x:                 .5rem !default;
$calendar-nav-btn-font-size:                 $font-size-sm !default;
$calendar-nav-btn-bg:                        transparent !default;
$calendar-nav-btn-border-width:              1px !default;
$calendar-nav-btn-border-color:              transparent !default;
$calendar-nav-btn-border-radius:             $border-radius !default;

$calendar-nav-btn-hover-bg:                  transparent !default;
$calendar-nav-btn-hover-border-color:        transparent !default;

$calendar-nav-btn-focus-border-color:        transparent !default;
$calendar-nav-btn-focus-box-shadow:          $focus-ring-box-shadow !default;

$calendar-nav-date-font-weight:              600 !default;
$calendar-nav-date-color:                    var(--cui-body-color) !default;
$calendar-nav-date-hover-color:              var(--cui-primary) !default;

$calendar-nav-icon-width:                    1rem !default;
$calendar-nav-icon-height:                   1rem !default;
$calendar-nav-icon-color:                    var(--cui-tertiary-color) !default;
$calendar-nav-icon-hover-color:              var(--cui-body-color) !default;

$calendar-nav-icon-double-next:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#000' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#000' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-next:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;

$calendar-cell-header-inner-font-weight:     600 !default;
$calendar-cell-header-inner-color:           var(--cui-secondary-color) !default;

$calendar-cell-hover-color:                  var(--cui-body-color) !default;
$calendar-cell-hover-bg:                     var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color:               var(--cui-tertiary-color) !default;

$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;

$calendar-cell-selected-color:               $white !default;
$calendar-cell-selected-bg:                  var(--cui-primary) !default;

$calendar-cell-range-bg:                     rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg:               rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color:     var(--cui-primary) !default;

$calendar-cell-today-color:                  var(--cui-danger) !default;

$calendar-cell-week-number-font-weight:      600 !default;
$calendar-cell-week-number-color:            var(--cui-secondary-color) !default;
```


---

# React Date Range Picker Component API

> Explore the API reference for the React Date Range Picker component and discover how to effectively utilize its props for customization.

## CDateRangePicker

```jsx
import { CDateRangePicker } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaNavNextMonthLabel` | `string \| undefined` | `'Next month'` | A string that provides an accessible label for the button that navigates to the next month in the React Calendar component. This label is read by screen readers to describe the action associated with the button. Customize for a more accessible calendar experience. |
| `ariaNavNextYearLabel` | `string \| undefined` | `'Next year'` | A string that provides an accessible label for the button that navigates to the next year in the React Calendar component. Screen readers utilize this label to inform users of the button's functionality, aiding in a more inclusive application. |
| `ariaNavPrevMonthLabel` | `string \| undefined` | `'Previous month'` | A string that provides an accessible label for the button that navigates to the previous month in the React Calendar component. This label is announced by screen readers, ensuring clarity around the button's purpose. |
| `ariaNavPrevYearLabel` | `string \| undefined` | `'Previous year'` | A string that provides an accessible label for the button that navigates to the previous year in the React Calendar component. Use it to enhance the experience for screen readers and further accessibility. |
| `calendarDate` | `string \| Date \| null \| undefined` | `startDate \|\| endDate \|\| null` | Defines the initial date or reference date for the React Calendar component. This date can be either a Date object or a string that can be converted into a valid date. |
| `calendars` | `number \| undefined` | `2` | The number of calendars that render on desktop devices. |
| `cancelButton` | `ReactNode` | `Cancel` | Toggle visibility or set the content of cancel button. |
| `cancelButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| `cancelButtonSize` | `"sm" \| "lg" \| undefined` | `sm` | Size the cancel button small or large. |
| `cancelButtonVariant` | `"outline" \| "ghost" \| undefined` | `ghost` | Set the cancel button variant to an outlined button or a ghost button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `cleaner` | `boolean \| undefined` | `true` | Toggle visibility or set the content of the cleaner button. |
| `closeOnSelect` | `boolean \| undefined` | `true` | If true the dropdown will be immediately closed after submitting the full date. |
| `confirmButton` | `ReactNode` | `OK` | Toggle visibility or set the content of confirm button. |
| `confirmButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the confirm button to one of CoreUI’s themed colors. |
| `confirmButtonSize` | `"sm" \| "lg" \| undefined` | `sm` | Size the confirm button small or large. |
| `confirmButtonVariant` | `"outline" \| "ghost" \| undefined` | - | Set the confirm button variant to an outlined button or a ghost button. |
| `container` | `"dropdown" \| "inline" \| undefined` | - | Set container type for the component. |
| `dayFormat` | `"numeric" \| "2-digit" \| ((date: Date) => string \| number) \| undefined` | `'numeric'` | Sets the format for days. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `disabledDates` | `DisabledDate \| DisabledDate[] \| undefined` | - | Specifies one or more dates that cannot be selected by the user. This is useful for disabling weekends, holidays, or any dates that you need to restrict within your React Calendar component. |
| `dropdownClassNames` | `string \| undefined` | - | A string of all className you want applied to the dropdown menu. |
| `endDate` | `string \| Date \| null \| undefined` | - | Defines the initially selected ending date (applicable when using range selection). Accepts both Date objects and valid date strings. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `firstDayOfWeek` | `number \| undefined` | `1` | Sets the first day of the week. This can be adjusted for different locales or preferences: - `0` = Sunday - `1` = Monday - `2` = Tuesday - `3` = Wednesday - `4` = Thursday - `5` = Friday - `6` = Saturday |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `footer` | `boolean \| undefined` | - | Toggle visibility of footer element. |
| `footerContent` | `ReactNode` | - | Add custom elements to the footer. |
| `id` | `string \| [string, string] \| undefined` | - | The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately. **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.: - `{id}-start-date` - `{id}-end-date` |
| `indicator` | `ReactNode` | `true` | Toggle visibility or set the content of the input indicator. |
| `inputDateFormat` | `((date: Date) => string) \| undefined` | - | Custom function to format the selected date into a string according to a custom format. |
| `inputDateParse` | `((date: string \| Date) => Date) \| undefined` | - | Custom function to parse the input value into a valid Date object. |
| `inputOnChangeDelay` | `number \| undefined` | `750` | Defines the delay (in milliseconds) for the input field's onChange event. |
| `inputReadOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `locale` | `string \| undefined` | `default` | Indicates the locale for the React Calendar component. If not explicitly provided, it inherits the locale settings from the browser. |
| `maxDate` | `string \| Date \| null \| undefined` | - | The maximum date that can be selected. Any date beyond this value will be disabled within the calendar. This is often used to restrict future selections. |
| `minDate` | `string \| Date \| null \| undefined` | - | The minimum date that can be selected. Any date before this value will be disabled in the calendar. Useful for preventing selection of past dates or creating limited booking windows. |
| `monthFormat` | `"numeric" \| "2-digit" \| "long" \| "narrow" \| "short" \| undefined` | `'short'` | Sets the format for month names. Accepts built-in formats ('long', 'narrow', 'short', 'numeric', '2-digit'). |
| `name` | `string \| [string, string] \| undefined` | - | The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately. Example for single string: 'date-input' Result: 'date-input-start-date', 'date-input-end-date' Example for array: ['start-date-input', 'end-date-input'] Result: 'start-date-input', 'end-date-input' |
| `navigation` | `boolean \| undefined` | - | Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically. |
| `navNextDoubleIcon` | `ReactNode` | - | Customizes the icon for navigating multiple steps forward (double jump), e.g., skipping multiple months or years at once. Ideal for quick navigation through large date ranges. |
| `navNextIcon` | `ReactNode` | - | Customizes the icon for navigating to the next view (month, year, etc.) depending on the current view. Accepts any valid `ReactNode`, enabling you to display text, images, or icons. |
| `navPrevDoubleIcon` | `ReactNode` | - | Customizes the icon for a double jump backward (e.g., jumping multiple months or years at once). This feature simplifies larger date range navigation within your React Calendar component. |
| `navPrevIcon` | `ReactNode` | - | Customizes the icon for navigating to the previous view in the calendar. Accepts any valid ReactNode to provide flexible styling or theming. |
| `navYearFirst` | `boolean \| undefined` | `false` | Reorders the year and month navigation, rendering the year selector first. This offers a different layout for users, particularly useful if you want to prioritize quick year changes. |
| `onDateHover` | `((date: string \| Date \| null) => void) \| undefined` | - | Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering. |
| `onEndDateChange` | `((date: string \| Date \| null, formatedDate?: string \| undefined) => void) \| undefined` | - | Callback triggered when the end date of the selection changes. Handy for synchronizing the selected date range with external states or components. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onSelectEndChange` | `((value: boolean) => void) \| undefined` | - | Callback fired when toggling between selecting the start date and the end date in range selection mode. Receives a boolean indicating if the user is currently selecting the end date. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `onStartDateChange` | `((date: string \| Date \| null, formatedDate?: string \| undefined) => void) \| undefined` | - | Callback triggered when the start date of the selection changes. Useful for updating other parts of your application or performing side effects based on the newly chosen start date. |
| `onViewChanged` | `((view: string) => void) \| undefined` | - | Callback fired when the calendar's view changes between days, months, or years. For instance, moving from day view to month view or from month view to year view. |
| `placeholder` | `string \| string[] \| undefined` | `['Start date', 'End date']` | Specifies short hints that are visible in start date and end date inputs. |
| `portal` | `boolean \| undefined` | `true` | Generates dropdown menu using createPortal. |
| `previewDateOnHover` | `boolean \| undefined` | `true` | Enable live preview of dates in input fields when hovering over calendar cells. |
| `ranges` | `object \| undefined` | - | Predefined date ranges the user can select from. |
| `rangesButtonsColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `secondary` | Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| `rangesButtonsSize` | `"sm" \| "lg" \| undefined` | - | Size the ranges button small or large. |
| `rangesButtonsVariant` | `"outline" \| "ghost" \| undefined` | `ghost` | Set the ranges button variant to an outlined button or a ghost button. |
| `renderDayCell` | `((date: Date, meta: { isDisabled: boolean; isInCurrentMonth: boolean; isInRange: boolean; isSelected: boolean; isToday: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual day cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles, add tooltips, or include additional content in each day cell. |
| `renderMonthCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual month cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each month cell. |
| `renderQuarterCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual quarter cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each quarter cell. |
| `renderYearCell` | `((date: Date, meta: { isDisabled: boolean; isInRange: boolean; isSelected: boolean; }) => ReactNode) \| undefined` | - | A function that allows you to customize the rendering of individual year cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each year cell. |
| `required` | `boolean \| undefined` | - | When present, it specifies that date must be filled out before submitting the form. |
| `selectAdjacementDays` | `boolean \| undefined` | `false` | Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`. |
| `selectEndDate` | `boolean \| undefined` | - | Indicates if the user's current selection is targeting the end date in range selection mode. Primarily used for controlled components where you need to manage which date (start or end) is currently active. |
| `selectionType` | `SelectionTypes \| undefined` | `day` | Specifies the selection type for the React Calendar component. Supports: - `day`: Regular day selection (default) - `week`: Select an entire week - `month`: Select an entire month - `year`: Select an entire year |
| `separator` | `ReactNode` | `true` | Default icon or character character that separates two dates. |
| `showAdjacementDays` | `boolean \| undefined` | `true` | Controls whether the calendar should display dates from previous or next months (non-selectable if `selectAdjacementDays` is `false`). This can make the calendar visually continuous. |
| `showWeekNumber` | `boolean \| undefined` | `false` | Toggles the display of week numbers (ISO 8601) in the calendar's left column. Particularly beneficial for applications where users need to see the week index for scheduling or reporting. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `startDate` | `string \| Date \| null \| undefined` | - | Defines the initially selected starting date. This date can be a Date object or a string convertible into a valid date. Useful when you want to show a pre-selected date. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `timepicker` | `boolean \| undefined` | - | Provide an additional time selection by adding select boxes to choose times. |
| `todayButton` | `ReactNode` | `Today` | Toggle visibility or set the content of today button. |
| `todayButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the today button to one of CoreUI’s themed colors. |
| `todayButtonSize` | `"sm" \| "lg" \| undefined` | `sm` | Size the today button small or large. |
| `todayButtonVariant` | `"outline" \| "ghost" \| undefined` | - | Set the today button variant to an outlined button or a ghost button. |
| `toggler` | `ReactNode` | - | The content of toggler. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of dropdown menu component. |
| `weekdayFormat` | `number \| "long" \| "narrow" \| "short" \| ((date: Date) => string \| number) \| undefined` | `2` | Sets the format or length of the weekday names displayed in the calendar header. You can use numeric values like 2 (two-letter abbreviations) or built-in string formats like `'long'`, `'narrow'`, and `'short'`, or provide a custom function to fully control how weekdays are displayed. |
| `weekNumbersLabel` | `string \| undefined` | - | Defines the label that appears above the week numbers column. For example, you might label it `'WK'` or `'Week #'`. |
| `yearFormat` | `"numeric" \| "2-digit" \| undefined` | `'numeric'` | Sets the format for years. Accepts built-in formats ('numeric' or '2-digit'). |


---

# React Date Range Picker Component Styling

> Learn how to customize the React Date Range Picker component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

CoreUI React DateRange Picker supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-date-picker-zindex: #{$date-picker-zindex};
--cui-date-picker-font-family: #{$date-picker-font-family};
--cui-date-picker-font-size: #{$date-picker-font-size};
--cui-date-picker-font-weight: #{$date-picker-font-weight};
--cui-date-picker-line-height: #{$date-picker-line-height};
--cui-date-picker-color: #{$date-picker-color};
--cui-date-picker-bg: #{$date-picker-bg};
--cui-date-picker-box-shadow: #{$date-picker-box-shadow};
--cui-date-picker-border-width: #{$date-picker-border-width};
--cui-date-picker-border-color: #{$date-picker-border-color};
--cui-date-picker-border-radius: #{$date-picker-border-radius};
--cui-date-picker-disabled-color: #{$date-picker-disabled-color};
--cui-date-picker-disabled-bg: #{$date-picker-disabled-bg};
--cui-date-picker-disabled-border-color: #{$date-picker-disabled-border-color};
--cui-date-picker-focus-color: #{$date-picker-focus-color};
--cui-date-picker-focus-bg: #{$date-picker-focus-bg};
--cui-date-picker-focus-border-color: #{$date-picker-focus-border-color};
--cui-date-picker-focus-box-shadow: #{$date-picker-focus-box-shadow};
--cui-date-picker-placeholder-color: #{$date-picker-placeholder-color};
--cui-date-picker-padding-y: #{$date-picker-padding-y};
--cui-date-picker-padding-x: #{$date-picker-padding-x};
--cui-date-picker-gap: #{$date-picker-gap};
--cui-date-picker-indicator-width: #{$date-picker-indicator-width};
--cui-date-picker-indicator-icon: #{escape-svg($date-picker-indicator-icon)};
--cui-date-picker-indicator-icon-color: #{$date-picker-indicator-icon-color};
--cui-date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size};
--cui-date-picker-cleaner-width: #{$date-picker-cleaner-width};
--cui-date-picker-cleaner-icon: #{escape-svg($date-picker-cleaner-icon)};
--cui-date-picker-cleaner-icon-color: #{$date-picker-cleaner-icon-color};
--cui-date-picker-cleaner-icon-hover-color: #{$date-picker-cleaner-icon-hover-color};
--cui-date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size};
--cui-date-picker-separator-width: #{$date-picker-separator-width};
--cui-date-picker-separator-icon: #{escape-svg($date-picker-separator-icon)};
--cui-date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl)};
--cui-date-picker-separator-icon-size: #{$date-picker-separator-icon-size};
--cui-date-picker-dropdown-bg: #{$date-picker-dropdown-bg};
--cui-date-picker-dropdown-border-width: #{$date-picker-dropdown-border-width};
--cui-date-picker-dropdown-border-color: #{$date-picker-dropdown-border-color};
--cui-date-picker-dropdown-border-radius: #{$date-picker-dropdown-border-radius};
--cui-date-picker-dropdown-box-shadow: #{$date-picker-dropdown-box-shadow};
--cui-date-picker-ranges-width: #{$date-picker-ranges-width};
--cui-date-picker-ranges-padding: #{$date-picker-ranges-padding};
--cui-date-picker-ranges-border-width: #{$date-picker-ranges-border-width};
--cui-date-picker-ranges-border-color: #{$date-picker-ranges-border-color};
--cui-date-picker-timepicker-width: #{$date-picker-timepicker-width};
--cui-date-picker-timepicker-border-color: #{$date-picker-timepicker-border-color};
--cui-date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid var(--cui-date-picker-timepicker-border-color);
--cui-date-picker-footer-padding: #{$date-picker-footer-padding};
--cui-date-picker-footer-border-width: #{$date-picker-footer-border-width};
--cui-date-picker-footer-border-color: #{$date-picker-footer-border-color};
```

```scss
--cui-calendar-table-margin: #{$calendar-table-margin};
--cui-calendar-table-cell-size: #{$calendar-table-cell-size};
--cui-calendar-nav-padding: #{$calendar-nav-padding};
--cui-calendar-nav-border-color: #{$calendar-nav-border-color};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid var(--cui-calendar-nav-border-color);
--cui-calendar-nav-btn-padding-x: #{$calendar-nav-btn-padding-x};
--cui-calendar-nav-btn-padding-y: #{$calendar-nav-btn-padding-y};
@include rfs($calendar-nav-btn-font-size, --cui-calendar-nav-btn-font-size);
--cui-calendar-nav-btn-bg: #{$calendar-nav-btn-bg};
--cui-calendar-nav-btn-border-width: #{$calendar-nav-btn-border-width};
--cui-calendar-nav-btn-border-color: #{$calendar-nav-btn-border-color};
--cui-calendar-nav-btn-border-radius: #{$calendar-nav-btn-border-radius};
--cui-calendar-nav-btn-hover-bg: #{$calendar-nav-btn-hover-bg};
--cui-calendar-nav-btn-hover-border-color: #{$calendar-nav-btn-hover-border-color};
--cui-calendar-nav-btn-focus-border-color: #{$calendar-nav-btn-focus-border-color};
--cui-calendar-nav-btn-focus-box-shadow: #{$calendar-nav-btn-focus-box-shadow};
--cui-calendar-nav-date-font-weight: #{$calendar-nav-date-font-weight};
--cui-calendar-nav-date-color: #{$calendar-nav-date-color};
--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
--cui-calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
--cui-calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
--cui-calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
--cui-calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
--cui-calendar-nav-icon-color: #{$calendar-nav-icon-color};
--cui-calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
--cui-calendar-cell-header-inner-font-weight: #{$calendar-cell-header-inner-font-weight};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-week-number-font-weight: #{$calendar-cell-week-number-font-weight};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
--cui-calendar-cell-hover-color: #{$calendar-cell-hover-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--cui-calendar-cell-today-color: #{$calendar-cell-today-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-calendar-nav-date-color': '#333',
  '--cui-calendar-cell-hover-bg': '#f8f9fa',
}

return <CDateRangePicker style={customVars} />
```

### SASS variables

```scss
$date-picker-zindex:                   1000 !default;
$date-picker-font-family:              $input-font-family !default;
$date-picker-font-size:                $input-font-size !default;
$date-picker-font-size-sm:             $input-font-size-sm !default;
$date-picker-font-size-lg:             $input-font-size-lg !default;
$date-picker-font-weight:              $input-font-weight !default;
$date-picker-line-height:              $input-line-height !default;
$date-picker-color:                    $input-color !default;
$date-picker-bg:                       $input-bg !default;
$date-picker-box-shadow:               $box-shadow-inset !default;

$date-picker-border-width:             $input-border-width !default;
$date-picker-border-color:             $input-border-color !default;
$date-picker-border-radius:            $border-radius !default;
$date-picker-border-radius-sm:         $border-radius-sm !default;
$date-picker-border-radius-lg:         $border-radius-lg !default;

$date-picker-invalid-border-color:     $form-invalid-border-color !default;
$date-picker-valid-border-color:       $form-valid-border-color !default;

$date-picker-disabled-color:           $input-disabled-color !default;
$date-picker-disabled-bg:              $input-disabled-bg !default;
$date-picker-disabled-border-color:    $input-disabled-border-color !default;

$date-picker-focus-color:              $input-focus-color !default;
$date-picker-focus-bg:                 $input-focus-bg !default;
$date-picker-focus-border-color:       $input-focus-border-color !default;
$date-picker-focus-box-shadow:         $input-btn-focus-box-shadow !default;

$date-picker-placeholder-color:        var(--cui-secondary-color) !default;

$date-picker-padding-y:                $input-padding-y !default;
$date-picker-padding-x:                $input-padding-x !default;
$date-picker-gap:                      $input-padding-x !default;

$date-picker-padding-y-sm:             $input-padding-y-sm !default;
$date-picker-padding-x-sm:             $input-padding-x-sm !default;
$date-picker-gap-sm:                   $input-padding-x-sm !default;

$date-picker-padding-y-lg:             $input-padding-y-lg !default;
$date-picker-padding-x-lg:             $input-padding-x-lg !default;
$date-picker-gap-lg:                   $input-padding-x-lg !default;

$date-picker-cleaner-width:             1.25rem !default;
$date-picker-cleaner-icon-size:         1rem !default;
$date-picker-cleaner-icon-color:        var(--cui-tertiary-color) !default;
$date-picker-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
$date-picker-cleaner-icon-hover-color:  var(--cui-body-color) !default;

$date-picker-cleaner-width-sm:          1rem !default;
$date-picker-cleaner-width-lg:          1.5rem !default;
$date-picker-cleaner-icon-size-sm:      .875rem !default;
$date-picker-cleaner-icon-size-lg:      1.25rem !default;

$date-picker-indicator-width:               1.25rem !default;
$date-picker-indicator-icon-size:           1rem !default;
$date-picker-indicator-icon-color:          var(--cui-tertiary-color) !default;
$date-picker-indicator-icon:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#000'></rect><rect width='32' height='32' x='200' y='224' fill='#000'></rect><rect width='32' height='32' x='280' y='224' fill='#000'></rect><rect width='32' height='32' x='368' y='224' fill='#000'></rect><rect width='32' height='32' x='112' y='296' fill='#000'></rect><rect width='32' height='32' x='200' y='296' fill='#000'></rect><rect width='32' height='32' x='280' y='296' fill='#000'></rect><rect width='32' height='32' x='368' y='296' fill='#000'></rect><rect width='32' height='32' x='112' y='368' fill='#000'></rect><rect width='32' height='32' x='200' y='368' fill='#000'></rect><rect width='32' height='32' x='280' y='368' fill='#000'></rect><rect width='32' height='32' x='368' y='368' fill='#000'></rect></svg>") !default;
$date-picker-indicator-invalid-icon:        $date-picker-indicator-icon !default;
$date-picker-indicator-invalid-icon-color:  var(--cui-form-invalid-color) !default;
$date-picker-indicator-valid-icon:          $date-picker-indicator-icon !default;
$date-picker-indicator-valid-icon-color:    var(--cui-form-valid-color) !default;

$date-picker-indicator-width-sm:            1rem !default;
$date-picker-indicator-width-lg:            1.5rem !default;
$date-picker-indicator-icon-size-sm:        .875rem !default;
$date-picker-indicator-icon-size-lg:        1.25rem !default;

$date-picker-separator-width:            1.25rem !default;
$date-picker-separator-icon-size:        1rem !default;
$date-picker-separator-icon-color:       var(--cui-tertiary-color) !default;
$date-picker-separator-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>") !default;
$date-picker-separator-icon-rtl:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>") !default;

$date-picker-separator-width-sm:         1rem !default;
$date-picker-separator-width-lg:         1.55rem !default;
$date-picker-separator-icon-size-sm:     .875rem !default;
$date-picker-separator-icon-size-lg:     1.25rem !default;

$date-picker-dropdown-bg:                var(--cui-body-bg) !default;
$date-picker-dropdown-border-color:      var(--cui-border-color) !default;
$date-picker-dropdown-border-width:      var(--cui-border-width) !default;
$date-picker-dropdown-border-radius:     var(--cui-border-radius) !default;
$date-picker-dropdown-box-shadow:        var(--cui-box-shadow) !default;

$date-picker-ranges-width:             10rem !default;
$date-picker-ranges-padding:           $spacer * .5 !default;
$date-picker-ranges-border-width:      1px !default;
$date-picker-ranges-border-color:      var(--cui-border-color) !default;

$date-picker-timepicker-width:         (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin) !default;
$date-picker-timepicker-border-width:  1px !default;
$date-picker-timepicker-border-color:  var(--cui-border-color) !default;

$date-picker-footer-padding:           .5rem !default;
$date-picker-footer-border-width:      1px !default;
$date-picker-footer-border-color:      var(--cui-border-color) !default;
```

```scss
$calendar-table-margin:                      .5rem !default;
$calendar-table-cell-size:                   2.75rem !default;

$calendar-nav-padding:                       .5rem !default;
$calendar-nav-border-width:                  1px !default;
$calendar-nav-border-color:                  var(--cui-border-color) !default;

$calendar-nav-btn-padding-y:                 .25rem !default;
$calendar-nav-btn-padding-x:                 .5rem !default;
$calendar-nav-btn-font-size:                 $font-size-sm !default;
$calendar-nav-btn-bg:                        transparent !default;
$calendar-nav-btn-border-width:              1px !default;
$calendar-nav-btn-border-color:              transparent !default;
$calendar-nav-btn-border-radius:             $border-radius !default;

$calendar-nav-btn-hover-bg:                  transparent !default;
$calendar-nav-btn-hover-border-color:        transparent !default;

$calendar-nav-btn-focus-border-color:        transparent !default;
$calendar-nav-btn-focus-box-shadow:          $focus-ring-box-shadow !default;

$calendar-nav-date-font-weight:              600 !default;
$calendar-nav-date-color:                    var(--cui-body-color) !default;
$calendar-nav-date-hover-color:              var(--cui-primary) !default;

$calendar-nav-icon-width:                    1rem !default;
$calendar-nav-icon-height:                   1rem !default;
$calendar-nav-icon-color:                    var(--cui-tertiary-color) !default;
$calendar-nav-icon-hover-color:              var(--cui-body-color) !default;

$calendar-nav-icon-double-next:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#000' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#000' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-next:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;

$calendar-cell-header-inner-font-weight:     600 !default;
$calendar-cell-header-inner-color:           var(--cui-secondary-color) !default;

$calendar-cell-hover-color:                  var(--cui-body-color) !default;
$calendar-cell-hover-bg:                     var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color:               var(--cui-tertiary-color) !default;

$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;

$calendar-cell-selected-color:               $white !default;
$calendar-cell-selected-bg:                  var(--cui-primary) !default;

$calendar-cell-range-bg:                     rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg:               rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color:     var(--cui-primary) !default;

$calendar-cell-today-color:                  var(--cui-danger) !default;

$calendar-cell-week-number-font-weight:      600 !default;
$calendar-cell-week-number-color:            var(--cui-secondary-color) !default;
```


---

# React Form Floating Labels Component API

> Explore the API reference for the React Form Floating Labels component and discover how to effectively utilize its props for customization.

## CFormFloating

```jsx
import { CFormFloating } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Floating Labels Component

> Learn how to create clean and accessible floating form labels in React using CoreUI components styled with Bootstrap.

## How to use React Bootstrap Floating Labels component

Use CoreUI’s `<CFormFloating>`, `<CFormInput>`, `<CFormSelect>`, and `<CFormTextarea>` components with Bootstrap styling to create floating labels in React. Floating labels automatically animate above form fields when content is entered or focused.

### Basic example

Enable floating labels by setting the `floatingLabel` prop on supported form controls. A `placeholder` is required as the floating label effect relies on the `:placeholder-shown` pseudo-class.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInput"
        floatingClassName="mb-3"
        floatingLabel="Email address"
        placeholder="name@example.com"
      />
      <CFormInput
        type="password"
        id="floatingPassword"
        floatingLabel="Password"
        placeholder="Password"
      />
    </>
  )
}
```

### Using `<CFormFloating>`

You can also wrap a `<CFormInput>` and `<CFormLabel>` pair inside a `<CFormFloating>` container. Make sure the input comes first to enable proper sibling selector behavior.

```jsx
<CFormFloating className="mb-3">
  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
  <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
```

### Pre-filled values

Floating labels adjust automatically when inputs have a preset value.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabels2Example = () => {
  return (
    <CFormInput
      type="email"
      id="floatingInputValue"
      floatingLabel="Input with value"
      placeholder="name@example.com"
      defaultValue="test@example.com"
    />
  )
}
```

### Validation support

Floating labels integrate seamlessly with form validation styles.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsValidationExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputValid"
        floatingClassName="mb-3"
        floatingLabel="Email addresss"
        placeholder="name@example.com"
        defaultValue="test@example.com"
        valid
      />
      <CFormInput
        type="email"
        id="floatingInputInvalid"
        floatingLabel="Email addresss"
        placeholder="name@example.com"
        defaultValue="test@example.com"
        invalid
      />
    </>
  )
}
```

## Textareas

Textareas styled with floating labels maintain the same height as inputs by default.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextareaExample = () => {
  return (
    <CFormTextarea
      id="floatingTextarea"
      floatingLabel="Comments"
      placeholder="Leave a comment here"
    ></CFormTextarea>
  )
}
```

To change the height, set an explicit `height` via inline styles or custom CSS rather than using the `rows` attribute.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextarea2Example = () => {
  return (
    <CFormTextarea
      placeholder="Leave a comment here"
      id="floatingTextarea2"
      floatingLabel="Comments"
      style={{ height: '100px' }}
    ></CFormTextarea>
  )
}
```

## Select elements

Floating labels also support `<CFormSelect>`. The label always appears in the floated state. **Note:** This is not compatible with `size` or `multiple`.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FloatingLabelsSelectExample = () => {
  return (
    <CFormSelect
      id="floatingSelect"
      floatingLabel="Works with selects"
      aria-label="Floating label select example"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

## Grid layout support

Use floating labels within the CoreUI Bootstrap grid system by nesting inputs inside column classes.

```html
import React from 'react'
import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'

export const FloatingLabelsLayoutExample = () => {
  return (
    <CRow xs={{ gutter: 2 }}>
      <CCol md>
        <CFormInput
          type="email"
          id="floatingInputGrid"
          floatingLabel="Email address"
          placeholder="name@example.com"
          defaultValue="email@example.com"
        />
      </CCol>
      <CCol md>
        <CFormSelect
          id="floatingSelectGrid"
          floatingLabel="Email address"
          aria-label="Works with selects"
        >
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
    </CRow>
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all available props and configuration options.

- [&lt;CFormFloating /&gt;](../api/#cformfloating)


---

# React Floating Labels Component Styling

> Learn how to customize the React Floating Labels component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-floating-height:                  add(3.5rem, $input-height-border) !default;
$form-floating-line-height:             1.25 !default;
$form-floating-padding-x:               $input-padding-x !default;
$form-floating-padding-y:               1rem !default;
$form-floating-input-padding-t:         1.625rem !default;
$form-floating-input-padding-b:         .625rem !default;
$form-floating-label-height:            1.5em !default;
$form-floating-label-opacity:           .65 !default;
$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color:    $gray-600 !default;
$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
```


---

# React Form Controls

> React input and textarea components. Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

## Example

```jsx preview
<CForm>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
    <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com"/>
  </div>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
    <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
  </div>
</CForm>
```

## Sizing

Set heights using `size` property like `size="lg"` and `size="sm"`.

```jsx preview
<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```jsx preview
<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
<CFormInput type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readOnly/>
```

## 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.

```jsx preview
<CFormInput type="text" placeholder="Readonly input here..." aria-label="readonly input example" readOnly/>
```

## 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.

```jsx preview
<CRow className="mb-3">
  <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
  <CCol sm={10}>
    <CFormInput type="text" id="staticEmail" defaultValue="email@example.com" readOnly plainText/>
  </CCol>
</CRow>
<CRow className="mb-3">
  <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
  <CCol sm={10}>
    <CFormInput type="password" id="inputPassword"/>
  </CCol>
</CRow>
```

```jsx preview
<CForm className="row g-3">
  <CCol xs="auto">
    <CFormLabel htmlFor="staticEmail2" className="visually-hidden">Email</CFormLabel>
    <CFormInput type="text" id="staticEmail2" defaultValue="email@example.com" readOnly plainText/>
  </CCol>
  <CCol xs="auto">
    <CFormLabel htmlFor="inputPassword2" className="visually-hidden">Password</CFormLabel>
    <CFormInput type="password" id="inputPassword2" placeholder="Password"/>
  </CCol>
  <CCol xs="auto">
    <CButton color="primary" type="submit" className="mb-3">Confirm identity</CButton>
  </CCol>
</CForm>
```

## File input

```jsx preview
<div className="mb-3">
  <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
  <CFormInput type="file" id="formFile"/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
  <CFormInput type="file" id="formFileMultiple" multiple/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
  <CFormInput type="file" id="formFileDisabled" disabled/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
  <CFormInput type="file" size="sm" id="formFileSm"/>
</div>
<div>
  <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
  <CFormInput type="file" size="lg" id="formFileLg"/>
</div>
```

## Color

```jsx preview
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
```

## API

### CFormInput

```jsx
import { CFormInput } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `delay` | `number \| boolean \| undefined` | `false` | Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `plainText` | `boolean \| undefined` | - | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. |
| `readOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `string \| undefined` | `text` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |

### CFormTextarea

```jsx
import { CFormTextarea } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLTextAreaElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `plainText` | `boolean \| undefined` | - | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. |
| `readOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |


---

# React Form Input Group Component API

> Explore the API reference for the React Form Input Group component and discover how to effectively utilize its props for customization.

## CInputGroup

```jsx
import { CInputGroup } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |

## CInputGroupText

```jsx
import { CInputGroupText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "span") \| (ElementType & "form") \| (ElementType & "slot") \| ... 175 more ... \| undefined` | `span` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Input Group Component

> Learn how to extend CoreUI’s React input fields with Bootstrap-styled input groups—add text, buttons, selects, or custom file inputs seamlessly.

## How to use React Bootstrap Input Group component

Use CoreUI’s `<CInputGroup>` components styled with Bootstrap to enhance form inputs by prepending or appending text, buttons, selects, and more—perfect for building rich form UIs.

### Basic usage

Add text or buttons on either side of the input using `<CInputGroupText>` or `<CButton>`.

```html
import React from 'react'
import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon1">@</CInputGroupText>
        <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
      </CInputGroup>

      <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
        <CFormInput id="basic-url" aria-describedby="basic-addon3" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CFormInput aria-label="Amount (to the nearest dollar)" />
        <CInputGroupText>.00</CInputGroupText>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput placeholder="Username" aria-label="Username" />
        <CInputGroupText>@</CInputGroupText>
        <CFormInput placeholder="Server" aria-label="Server" />
      </CInputGroup>

      <CInputGroup>
        <CInputGroupText>With textarea</CInputGroupText>
        <CFormTextarea aria-label="With textarea"></CFormTextarea>
      </CInputGroup>
    </>
  )
}
```

## Wrapping content

Input groups use `flex-wrap` by default, which allows wrapping when needed—especially useful for validation messages or long inputs.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupWrappingExample = () => {
  return (
    <CInputGroup className="flex-nowrap">
      <CInputGroupText id="addon-wrapping">@</CInputGroupText>
      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
    </CInputGroup>
  )
}
```

To prevent wrapping, add `.flex-nowrap`.

## Input group sizing

Change size by applying `size="sm"` or `size="lg"` to `<CInputGroup>`. All inner elements will automatically adjust.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupSizingExample = () => {
  return (
    <>
      <CInputGroup size="sm" className="mb-3">
        <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
        <CFormInput
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
        />
      </CInputGroup>

      <CInputGroup size="lg">
        <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
      </CInputGroup>
    </>
  )
}
```

> 📌 Note: Do not apply size classes to individual input elements inside the group.

## Checkboxes and radio buttons

Include checkboxes or radios inside your input group to align them with text fields or buttons.

```html
import React from 'react'
import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCheckboxesAndRadiosExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText>
          <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input" />
        </CInputGroupText>
        <CFormInput aria-label="Text input with checkbox" />
      </CInputGroup>

      <CInputGroup>
        <CInputGroupText>
          <CFormCheck type="radio" value="" aria-label="Radio button for following text input" />
        </CInputGroupText>
        <CFormInput aria-label="Text input with radio button" />
      </CInputGroup>
    </>
  )
}
```

## Multiple inputs

You can group multiple inputs side by side using a single `<CInputGroup>`. Useful for username + domain, ranges, etc.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleInputsExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>First and last name</CInputGroupText>
      <CFormInput aria-label="First name" />
      <CFormInput aria-label="Last name" />
    </CInputGroup>
  )
}
```

## Multiple addons

You can add multiple `<CInputGroupText>` elements before or after the input, or combine them with checkboxes or buttons.

```html
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleAddonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CInputGroupText>0.00</CInputGroupText>
        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
        <CInputGroupText>$</CInputGroupText>
        <CInputGroupText>0.00</CInputGroupText>
      </CInputGroup>
    </>
  )
}
```

## Input group with buttons

Add buttons inside the input group to combine text entry with actions.

```html
import React from 'react'
import { CButton, CFormInput, CInputGroup } from '@coreui/react'

export const InputGroupButtonAddonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline" id="button-addon1">
          Button
        </CButton>
        <CFormInput
          placeholder=""
          aria-label="Example text with button addon"
          aria-describedby="button-addon1"
        />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        />
        <CButton type="button" color="secondary" variant="outline" id="button-addon2">
          Button
        </CButton>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CFormInput placeholder="" aria-label="Example text with two button addons" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput
          placeholder="Recipient's username"
          aria-label="Recipient's username with two button addons"
        />
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
      </CInputGroup>
    </>
  )
}
```

## Buttons with dropdowns

Group dropdown buttons together with your inputs using `<CDropdown>` components.

```html
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupButtonsWithDropdownsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CDropdown variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with dropdown button" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput aria-label="Text input with dropdown button" />
        <CDropdown alignment="end" variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>

      <CInputGroup>
        <CDropdown variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with 2 dropdown buttons" />
        <CDropdown alignment="end" variant="input-group">
          <CDropdownToggle color="secondary" variant="outline">
            Dropdown
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>
    </>
  )
}
```

## Segmented buttons

You can also combine a primary button with a split dropdown inside the input group.

```html
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupSegmentedButtonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CDropdown variant="input-group">
          <CButton type="button" color="secondary" variant="outline">
            Action
          </CButton>
          <CDropdownToggle color="secondary" variant="outline" split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
        <CFormInput aria-label="Text input with segmented dropdown button" />
      </CInputGroup>

      <CInputGroup>
        <CFormInput aria-label="Text input with segmented dropdown button" />
        <CDropdown alignment="end" variant="input-group">
          <CButton type="button" color="secondary" variant="outline">
            Action
          </CButton>
          <CDropdownToggle color="secondary" variant="outline" split />
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CInputGroup>
    </>
  )
}
```

## Custom form inputs

CoreUI supports enhanced input groups with custom selects and file inputs. Default browser styles aren’t supported in this layout.

### Select

```html
import React from 'react'
import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomSelectExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupSelect01">
          Options
        </CInputGroupText>
        <CFormSelect id="inputGroupSelect01">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CFormSelect id="inputGroupSelect02">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
        <CInputGroupText as="label" htmlFor="inputGroupSelect02">
          Options
        </CInputGroupText>
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
        <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CInputGroup>
      <CInputGroup>
        <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
        <CButton type="button" color="secondary" variant="outline">
          Button
        </CButton>
      </CInputGroup>
      Custom file input# Upload
    </>
  )
}
```

### File upload

```html
import React from 'react'
import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomFileInputExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupFile01">
          Upload
        </CInputGroupText>
        <CFormInput type="file" id="inputGroupFile01" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput type="file" id="inputGroupFile02" />
        <CInputGroupText as="label" htmlFor="inputGroupFile02">
          Upload
        </CInputGroupText>
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">
          Button
        </CButton>
        <CFormInput
          type="file"
          id="inputGroupFile03"
          aria-describedby="inputGroupFileAddon03"
          aria-label="Upload"
        />
      </CInputGroup>

      <CInputGroup>
        <CFormInput
          type="file"
          id="inputGroupFile04"
          aria-describedby="inputGroupFileAddon04"
          aria-label="Upload"
        />
        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">
          Button
        </CButton>
      </CInputGroup>
    </>
  )
}
```

## API reference

Check out the API documentation for full details on available props.

- [&lt;CInputGroup /&gt;](../api/#cinputgroup)
- [&lt;CInputGroupText /&gt;](../api/#cinputgrouptext)


---

# React Input Group Component Styling

> Learn how to customize the React Input Group component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$input-group-addon-padding-y:           $input-padding-y !default;
$input-group-addon-padding-x:           $input-padding-x !default;
$input-group-addon-font-weight:         $input-font-weight !default;
$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  var(--cui-tertiary-bg) !default;
$input-group-addon-border-color:        $input-border-color !default;
```


---

# React Form Input Component API

> Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.

## CFormInput

```jsx
import { CFormInput } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `delay` | `number \| boolean \| undefined` | `false` | Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `plainText` | `boolean \| undefined` | - | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. |
| `readOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `string \| undefined` | `text` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |

## CFormFeedback

```jsx
import { CFormFeedback } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `invalid` | `boolean \| undefined` | - | Method called immediately after the `value` prop changes. |
| `tooltip` | `boolean \| undefined` | - | If your form layout allows it, you can display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |

## CFormLabel

```jsx
import { CFormLabel } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `customClassName` | `string \| undefined` | - | A string of all className you want to be applied to the component, and override standard className value. |

## CFormText

```jsx
import { CFormText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Form Input Component

> Learn how to use CoreUI’s React input components styled with Bootstrap to create accessible, styled, and responsive form inputs.

## How to use React Bootstrap Form Input component

Use CoreUI’s `<CFormInput>` and related components styled with Bootstrap to create customizable and accessible form inputs in React. Easily control size, disabled state, readonly fields, file uploads, color pickers, and more.

### Basic usage

```html
import React from 'react'
import { CForm, CFormInput } from '@coreui/react'

export const FormInputExample = () => {
  return (
    <CForm>
      <CFormInput
        type="email"
        id="exampleFormControlInput1"
        label="Email address"
        placeholder="name@example.com"
        text="Must be 8-20 characters long."
        aria-describedby="exampleFormControlInputHelpInline"
      />
    </CForm>
  )
}
```

To build more complex form controls with labels and help text, you can compose the form manually using CoreUI components:

```jsx
<CForm>
  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput
    type="email"
    id="exampleFormControlInput1"
    placeholder="name@example.com"
    aria-describedby="exampleFormControlInputHelpInline"
  />
  <CFormText as="span" id="exampleFormControlInputHelpInline">
    Must be 8–20 characters long.
  </CFormText>
</CForm>
```

## Input sizing

Change input sizes using the `size` prop (`"sm"` or `"lg"`).

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputSizingExample = () => {
  return (
    <>
      <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
      <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
      <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
    </>
  )
}
```

## Disabled inputs

Add the `disabled` prop to visually disable the input and remove pointer events.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputDisabledExample = () => {
  return (
    <>
      <CFormInput
        type="text"
        placeholder="Disabled input"
        aria-label="Disabled input example"
        disabled
      />
      <CFormInput
        type="text"
        placeholder="Disabled readonly input"
        aria-label="Disabled input example"
        disabled
        readOnly
      />
    </>
  )
}
```

## Read-only inputs

Use the `readOnly` prop to prevent editing while maintaining focus and tab behavior.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const FormInputReadonlyExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="text"
            id="staticEmail"
            defaultValue="email@example.com"
            readOnly
            plainText
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword" />
        </CCol>
      </CRow>
    </>
  )
}
```

## Plaintext read-only inputs

Add `plainText` for inputs that appear as plain text but retain layout spacing.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const FormInputReadonlyPlainTextExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="staticEmail2" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="text"
            id="staticEmail2"
            defaultValue="email@example.com"
            readOnly
            plainText
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword2" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword2" />
        </CCol>
      </CRow>
    </>
  )
}
```

```html
import React from 'react'
import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'

export const FormInputReadonlyPlainText2Example = () => {
  return (
    <CForm className="row g-3">
      <CCol xs="auto">
        <CFormLabel htmlFor="staticEmail3" className="visually-hidden">
          Email
        </CFormLabel>
        <CFormInput
          type="text"
          id="staticEmail3"
          defaultValue="email@example.com"
          readOnly
          plainText
        />
      </CCol>
      <CCol xs="auto">
        <CFormLabel htmlFor="inputPassword3" className="visually-hidden">
          Password
        </CFormLabel>
        <CFormInput type="password" id="inputPassword3" placeholder="Password" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit" className="mb-3">
          Confirm identity
        </CButton>
      </CCol>
    </CForm>
  )
}
```

## File input

Use CoreUI's `` for custom-styled file upload fields.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputFileExample = () => {
  return (
    <>
      <div className="mb-3">
        <CFormInput type="file" id="formFile" label="Default file input example" />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileMultiple"
          label="Multiple files input example"
          multiple
        />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileDisabled"
          label="Disabled file input example"
          disabled
        />
      </div>
      <div className="mb-3">
        <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
      </div>
      <div>
        <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
      </div>
    </>
  )
}
```

## Color input

Color inputs are supported using `type="color"`.

```html
import React from 'react'
import { CFormInput } from '@coreui/react'

export const FormInputColorExample = () => {
  return (
    <CFormInput
      type="color"
      id="exampleColorInput"
      defaultValue="#563d7c"
      label="Color picker"
      title="Choose your color"
    />
  )
}
```

## API reference

Refer to the API documentation for detailed descriptions of all the props and configuration options.

- [&lt;CFormInput /&gt;](../api/#cforminput)
- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
- [&lt;CFormLabel /&gt;](../api/#cformlabel)
- [&lt;CFormText /&gt;](../api/#cformtext)


---

# React Input Component Styling

> Learn how to customize the React Input component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

`$input-*` are shared across most of our form controls (and not buttons).

```scss
$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;
```

`$form-label-*` and `$form-text-*` are for our ``s and `` component.

```scss
$form-label-margin-bottom:              .5rem !default;
$form-label-font-size:                  null !default;
$form-label-font-style:                 null !default;
$form-label-font-weight:                null !default;
$form-label-color:                      null !default;
```

```scss
$form-text-margin-top:                  .25rem !default;
$form-text-font-size:                   $small-font-size !default;
$form-text-font-style:                  null !default;
$form-text-font-weight:                 null !default;
$form-text-color:                       var(--cui-secondary-color) !default;
```

`$form-file-*` are for file input.

```scss
$form-file-button-color:          $input-color !default;
$form-file-button-bg:             var(--cui-tertiary-bg) !default;
$form-file-button-hover-bg:       var(--cui-secondary-bg) !default;
```


---

# React Bootstrap Form Layout Component

> Learn how to build responsive and structured form layouts using CoreUI’s React components styled with Bootstrap.

## How to use React Bootstrap Form Layout

Use CoreUI’s React form components together with Bootstrap’s layout system to build flexible, responsive, and well-structured forms.

### Form container

Wrap form elements in the `<CForm>` component to enable default browser behaviors such as validation and submission.

- CoreUI does not apply default styles to `<CForm>`, giving you full control.
- All `<CButton>` components inside `<CForm>` default to `type="submit"` unless specified otherwise.
- You can disable all fields by setting the `disabled` prop on `<CForm>`.

### Form layout using grid

Combine CoreUI form components with the Bootstrap grid system for complex form layouts.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutFormGridExample = () => {
  return (
    <CRow>
      <CCol xs>
        <CFormInput placeholder="First name" aria-label="First name" />
      </CCol>
      <CCol xs>
        <CFormInput placeholder="Last name" aria-label="Last name" />
      </CCol>
    </CRow>
  )
}
```

### Gutters

Control spacing between columns using Bootstrap's gutter utilities.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutGuttersExample = () => {
  return (
    <CRow className="g-3">
      <CCol xs>
        <CFormInput placeholder="First name" aria-label="First name" />
      </CCol>
      <CCol xs>
        <CFormInput placeholder="Last name" aria-label="Last name" />
      </CCol>
    </CRow>
  )
}
```

You can also create advanced layouts by customizing both horizontal and vertical spacing.

```html
import React from 'react'
import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormSelect } from '@coreui/react'

export const LayoutGutters2Example = () => {
  return (
    <CForm className="row g-3">
      <CCol md={6}>
        <CFormInput type="email" id="inputEmail4" label="Email" />
      </CCol>
      <CCol md={6}>
        <CFormInput type="password" id="inputPassword4" label="Password" />
      </CCol>
      <CCol xs={12}>
        <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St" />
      </CCol>
      <CCol xs={12}>
        <CFormInput
          id="inputAddress2"
          label="Address 2"
          placeholder="Apartment, studio, or floor"
        />
      </CCol>
      <CCol md={6}>
        <CFormInput id="inputCity" label="City" />
      </CCol>
      <CCol md={4}>
        <CFormSelect id="inputState" label="State">
          <option>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={2}>
        <CFormInput id="inputZip" label="Zip" />
      </CCol>
      <CCol xs={12}>
        <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Sign in
        </CButton>
      </CCol>
    </CForm>
  )
}
```

### Horizontal form layout

To create horizontal forms, use Bootstrap’s `.row` and `.col-*` grid classes. Add `.col-form-label` to `<CFormLabel>` to align labels vertically with form controls.

```html
import React from 'react'
import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const LayoutHorizontalFormExample = () => {
  return (
    <CForm>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="email" id="inputEmail3" />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
          Password
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="password" id="inputPassword3" />
        </CCol>
      </CRow>
      <fieldset className="row mb-3">
        <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
        <CCol sm={10}>
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios1"
            value="option1"
            label="First radio"
            defaultChecked
          />
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios2"
            value="option2"
            label="Second radio"
          />
          <CFormCheck
            type="radio"
            name="gridRadios"
            id="gridRadios3"
            value="option3"
            label="Third disabled radio"
            disabled
          />
        </CCol>
      </fieldset>
      <CRow className="mb-3">
        <div className="col-sm-10 offset-sm-2">
          <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
        </div>
      </CRow>
      <CButton color="primary" type="submit">
        Sign in
      </CButton>
    </CForm>
  )
}
```

#### Sizing horizontal labels

Use `.col-form-label-sm` or `.col-form-label-lg` to match form control sizes.

```html
import React from 'react'
import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const LayoutHorizontalFormLabelSizingExample = () => {
  return (
    <>
      <CRow className="mb-3">
        <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="email"
            className="form-control form-control-sm"
            id="colFormLabelSm"
            placeholder="col-form-label-sm"
          />
        </CCol>
      </CRow>
      <CRow className="mb-3">
        <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
        </CCol>
      </CRow>
      <CRow>
        <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">
          Email
        </CFormLabel>
        <CCol sm={10}>
          <CFormInput
            type="email"
            className="form-control form-control-lg"
            id="colFormLabelLg"
            placeholder="col-form-label-lg"
          />
        </CCol>
      </CRow>
    </>
  )
}
```

### Column sizing

Use CoreUI’s `<CRow>` and `<CCol>` components to automatically distribute or manually control the width of form inputs.

```html
import React from 'react'
import { CCol, CFormInput, CRow } from '@coreui/react'

export const LayoutColumnSizingExample = () => {
  return (
    <CRow className="g-3">
      <CCol sm={7}>
        <CFormInput placeholder="City" aria-label="City" />
      </CCol>
      <CCol sm>
        <CFormInput placeholder="State" aria-label="State" />
      </CCol>
      <CCol sm>
        <CFormInput placeholder="Zip" aria-label="Zip" />
      </CCol>
    </CRow>
  )
}
```

### Auto sizing columns

Use `<CCol xs="auto">` to allow input elements to take up only as much space as needed.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutAutoSizingExample = () => {
  return (
    <CForm className="row gy-2 gx-3 align-items-center">
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
          Name
        </CFormLabel>
        <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
      </CCol>
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="autoSizingInputGroup" placeholder="Username" />
        </CInputGroup>
      </CCol>
      <CCol xs="auto">
        <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
          Preference
        </CFormLabel>
        <CFormSelect id="autoSizingSelect">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
      <CCol xs="auto">
        <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```

This can be combined with custom sizing to match your UI needs.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutAutoSizing2Example = () => {
  return (
    <CForm className="row gx-3 gy-2 align-items-center">
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
          Name
        </CFormLabel>
        <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
      </CCol>
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
        </CInputGroup>
      </CCol>
      <CCol sm={3}>
        <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
          Preference
        </CFormLabel>
        <CFormSelect id="specificSizeSelect">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
      <CCol xs="auto">
        <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
      </CCol>
      <CCol xs="auto">
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```

### Inline form layout

Use inline layouts to group form controls in a horizontal row, perfect for compact forms. Use `xs="auto"` and `g-2` for spacing, and `align-items-center` for vertical alignment.

```html
import React from 'react'
import {
  CButton,
  CCol,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormSelect,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const LayoutInlineFormsExample = () => {
  return (
    <CForm className="row row-cols-lg-auto g-3 align-items-center">
      <CCol xs={12}>
        <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
          Username
        </CFormLabel>
        <CInputGroup>
          <CInputGroupText>@</CInputGroupText>
          <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
        </CInputGroup>
      </CCol>

      <CCol xs={12}>
        <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
          Preference
        </CFormLabel>
        <CFormSelect id="inlineFormSelectPref">
          <option>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>

      <CCol xs={12}>
        <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
      </CCol>

      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit
        </CButton>
      </CCol>
    </CForm>
  )
}
```


---

# React Multi Select Component API

> Explore the API reference for the React Multi Select component and discover how to effectively utilize its props for customization.

## CMultiSelect

```jsx
import { CMultiSelect } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `allowCreateOptions` | `boolean \| undefined` | - | Allow users to create options if they are not in the list of options. |
| `ariaCleanerLabel` | `string \| undefined` | `Clear all selections` | A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button. |
| `ariaIndicatorLabel` | `string \| undefined` | `Toggle visibility of options menu` | A string that provides an accessible label for the indicator button. This label is read by screen readers to describe the action associated with the button. |
| `ariaSearchLabel` | `string \| undefined` | `Search` | Accessible label for the search input (when `search` is enabled). |
| `ariaTagDeleteLabel` | `string \| undefined` | `Remove` | Accessible label prefix for a tag's delete button (selection type `tags`). The selected option's label is appended, so screen readers announce e.g. "Remove Angular". |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `cleaner` | `boolean \| undefined` | `true` | Enables selection cleaner element. |
| `clearSearchOnSelect` | `boolean \| undefined` | - | Clear current search on selecting an item. |
| `container` | `Element \| DocumentFragment \| (() => Element \| DocumentFragment \| null) \| null \| undefined` | - | Appends the dropdown to a specific element. You can pass an HTML element or function that returns a single element. |
| `deselectAllLabel` | `ReactNode` | `Deselect all` | Sets the select all button label shown once everything is selected. The button is a toggle: it shows `selectAllLabel` (and selects all) until everything is selected, then shows `deselectAllLabel` (and deselects all). |
| `deselectFilteredLabel` | `ReactNode` | `Deselect filtered` | Sets the deselect filtered button label (selection type `selectAllMode="filtered"`). |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `headerTemplate` | `((state: SelectionState, actions: SelectionActions) => ReactNode) \| undefined` | - | Render a custom dropdown header (the area above the options list), replacing the built-in select all button. Receives a `state` object (`{ selected, total, filtered, filteredSelected }`) and an `actions` object (`{ selectAll, deselectAll, selectFiltered, deselectFiltered }`) so you can wire your own controls. Renders independently of `selectAll`. |
| `hideSelectAllOnSearchNoResults` | `boolean \| undefined` | `true` | Hide the dropdown header with the built-in select all button when a search filter leaves no matching options. Set to `false` to keep the select all button visible even when there are no results. |
| `id` | `string \| undefined` | - | Set the id attribute for the native select element. **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property: - `<select name="\{id\}-multi-select" />` |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `loading` | `boolean \| undefined` | - | When set, the options list will have a loading style: loading spinner and reduced opacity. |
| `multiple` | `boolean \| undefined` | `true` | It specifies that multiple options can be selected at once. |
| `name` | `string \| undefined` | - | The name attribute for the select element. |
| `onChange` | `((selected: Option[]) => void) \| undefined` | - | Execute a function when a user changes the selected option. |
| `onFilterChange` | `((value: string) => void) \| undefined` | - | Execute a function when the filter value changed. |
| `onHide` | `(() => void) \| undefined` | - | The callback is fired when the Multi Select component requests to be hidden. |
| `onSelectionLimit` | `((selectionLimit: number) => void) \| undefined` | - | Execute a function when the user tries to select more options than allowed by `selectionLimit`. |
| `onShow` | `(() => void) \| undefined` | - | The callback is fired when the Multi Select component requests to be shown. |
| `options` | `(Option \| OptionsGroup)[]` | - | List of option elements. |
| `optionsGroupsSelectable` | `boolean \| undefined` | `false` | Makes each options group label a toggle that selects or deselects all options in that group. With `optionsGroupsStyle="checkbox"` (and `multiple`) the label shows a tri-state checkbox indicator (`none` / `all` / `indeterminate`) reflecting the group's selection. |
| `optionsGroupsStyle` | `"text" \| "checkbox" \| undefined` | `checkbox` | Sets the options group label style when `optionsGroupsSelectable` is enabled. |
| `optionsGroupsTemplate` | `((option: OptionsGroup) => ReactNode) \| undefined` | - | Custom template for options groups. |
| `optionsMaxHeight` | `string \| number \| undefined` | `auto` | Sets maxHeight of options list. |
| `optionsStyle` | `"text" \| "checkbox" \| undefined` | `checkbox` | Sets option style. |
| `optionsTemplate` | `((option: Option) => ReactNode) \| undefined` | - | Custom template for options. |
| `placeholder` | `string \| undefined` | `Select...` | Specifies a short hint that is visible in the search input. |
| `portal` | `boolean \| undefined` | `false` | Generates dropdown menu using createPortal. |
| `required` | `boolean \| undefined` | - | When it is present, it indicates that the user must choose a value before submitting the form. |
| `resetSelectionOnOptionsChange` | `boolean \| undefined` | `false` | Determines whether the selected options should be cleared when the options list is updated. 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` | `Search \| undefined` | `true` | The `search` prop determines how the search input element is enabled and behaves. It accepts multiple types to provide flexibility in configuring search behavior: - `true` : Enables the default search input element with standard behavior. - `'external'`: Enables an external search mechanism, possibly integrating with external APIs or services. - `'global'`: When set, the user can perform searches across the entire component, regardless of where their focus is within the component. - `{ external?: boolean; global?: boolean }`: Allows for granular control over the search behavior by specifying individual properties.  It is useful when you also want to use external and global search. |
| `searchNoResultsLabel` | `ReactNode` | `No results found` | Sets the label for no results when filtering. |
| `selectAll` | `boolean \| undefined` | `true` | Enables select all button. |
| `selectAllLabel` | `ReactNode` | `Select all` | Sets the select all button label. |
| `selectAllMode` | `"all" \| "filtered" \| undefined` | `all` | Determines what the select all button operates on: all options (`'all'`) or only the currently filtered (search-visible) options (`'filtered'`). |
| `selectAllStyle` | `"text" \| "checkbox" \| undefined` | `checkbox` | Sets the select all button style. With `'checkbox'` (and `multiple`), the button shows a tri-state checkbox indicator (`none` / `all` / `indeterminate`) and toggles between selecting and deselecting. |
| `selectFilteredLabel` | `ReactNode` | `Select filtered` | Sets the select filtered button label (used with `selectAllMode="filtered"`). |
| `selectionLimit` | `number \| undefined` | - | Sets the maximum number of options that can be selected. The select all button stays enabled and selects options up to the limit, then toggles to deselect all once the limit is reached. The `onSelectionLimit` callback fires when a user tries to select more options than allowed. |
| `selectionType` | `"text" \| "counter" \| "tags" \| undefined` | `tags` | Sets the selection style. |
| `selectionTypeCounterText` | `string \| undefined` | `item(s) selected` | Sets the counter selection label. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| (string \| number)[] \| undefined` | - | Sets the initially selected values for the multi-select component. |
| `virtualScroller` | `boolean \| undefined` | - | Enable virtual scroller for the options list. |
| `visible` | `boolean \| undefined` | `false` | Toggle the visibility of multi select dropdown. |
| `visibleItems` | `number \| undefined` | `10` | Amount of visible items when virtualScroller is set to `true`. |


---

# React Multi Select Component Styling

> Learn how to customize the React Multi Select component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Multi Select supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-form-multi-select-zindex: #{$form-multi-select-zindex};
--cui-form-multi-select-font-family: #{$form-multi-select-font-family};
--cui-form-multi-select-font-size: #{$form-multi-select-font-size};
--cui-form-multi-select-font-weight: #{$form-multi-select-font-weight};
--cui-form-multi-select-line-height: #{$form-multi-select-line-height};
--cui-form-multi-select-color: #{$form-multi-select-color};
--cui-form-multi-select-bg: #{$form-multi-select-bg};
--cui-form-multi-select-box-shadow: #{$form-multi-select-box-shadow};
--cui-form-multi-select-border-width: #{$form-multi-select-border-width};
--cui-form-multi-select-border-color: #{$form-multi-select-border-color};
--cui-form-multi-select-border-radius: #{$form-multi-select-border-radius};
--cui-form-multi-select-disabled-color: #{$form-multi-select-disabled-color};
--cui-form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};
--cui-form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color};
--cui-form-multi-select-focus-color: #{$form-multi-select-focus-color};
--cui-form-multi-select-focus-bg: #{$form-multi-select-focus-bg};
--cui-form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};
--cui-form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow};
--cui-form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color};
--cui-form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};
--cui-form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};
--cui-form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
--cui-form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
--cui-form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
--cui-form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
--cui-form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)};
--cui-form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color};
--cui-form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color};
--cui-form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size};
--cui-form-multi-select-indicator-width: #{$form-multi-select-indicator-width};
--cui-form-multi-select-indicator-height: #{$form-multi-select-indicator-height};
--cui-form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};
--cui-form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};
--cui-form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)};
--cui-form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color};
--cui-form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color};
--cui-form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size};
--cui-form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};
--cui-form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};
--cui-form-multi-select-select-all-color: #{$form-multi-select-select-all-color};
--cui-form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};
--cui-form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width};
--cui-form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};
--cui-form-multi-select-select-all-border-radius: #{$form-multi-select-select-all-border-radius};
--cui-form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};
--cui-form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};
--cui-form-multi-select-dropdown-header-padding-y: #{$form-multi-select-dropdown-header-padding-y};
--cui-form-multi-select-dropdown-header-padding-x: #{$form-multi-select-dropdown-header-padding-x};
--cui-form-multi-select-dropdown-header-border-width: #{$form-multi-select-dropdown-header-border-width};
--cui-form-multi-select-dropdown-header-border-color: #{$form-multi-select-dropdown-header-border-color};
--cui-form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width};
--cui-form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg};
--cui-form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};
--cui-form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};
--cui-form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};
--cui-form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};
--cui-form-multi-select-options-gap: #{$form-multi-select-options-gap};
--cui-form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
--cui-form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
--cui-form-multi-select-options-font-size: #{$form-multi-select-options-font-size};
--cui-form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight};
--cui-form-multi-select-options-color: #{$form-multi-select-options-color};
--cui-form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y};
--cui-form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x};
--cui-form-multi-select-optgroup-label-border-radius: #{$form-multi-select-optgroup-label-border-radius};
--cui-form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size};
--cui-form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight};
--cui-form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color};
--cui-form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform};
--cui-form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};
--cui-form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};
--cui-form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y};
--cui-form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x};
--cui-form-multi-select-option-border-width: #{$form-multi-select-option-border-width};
--cui-form-multi-select-option-border-color: #{$form-multi-select-option-border-color};
--cui-form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};
--cui-form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow};
--cui-form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};
--cui-form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};
--cui-form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow};
--cui-form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};
--cui-form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};
--cui-form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};
--cui-form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};
--cui-form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};
--cui-form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};
--cui-form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};
--cui-form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};
--cui-form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};
--cui-form-multi-select-option-indeterminate-indicator-bg: #{$form-multi-select-option-indeterminate-indicator-bg};
--cui-form-multi-select-option-indeterminate-indicator-bg-image: #{escape-svg($form-multi-select-option-indeterminate-indicator-bg-image)};
--cui-form-multi-select-option-indeterminate-indicator-border-color: #{$form-multi-select-option-indeterminate-indicator-border-color};
--cui-form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};
--cui-form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};
--cui-form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
--cui-form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width};
--cui-form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
--cui-form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
--cui-form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};
--cui-form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};
--cui-form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)};
--cui-form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color};
--cui-form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color};
--cui-form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size};
--cui-form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};
--cui-form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
--cui-form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};
```

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-form-multi-select-color': '#333',
  '--cui-form-multi-select-bg': '#f8f9fa',
}

return <CMultiSelect style={customVars} />
```

### SASS variables

```scss
$form-multi-select-zindex:                    1000 !default;
$form-multi-select-font-family:               $input-font-family !default;
$form-multi-select-font-size:                 $input-font-size !default;
$form-multi-select-font-weight:               $input-font-weight !default;
$form-multi-select-line-height:               $input-line-height !default;
$form-multi-select-color:                     $input-color !default;
$form-multi-select-bg:                        $input-bg !default;
$form-multi-select-box-shadow:                $box-shadow-inset !default;

$form-multi-select-border-width:              $input-border-width !default;
$form-multi-select-border-color:              $input-border-color !default;
$form-multi-select-border-radius:             $input-border-radius !default;
$form-multi-select-border-radius-sm:          $input-border-radius-sm !default;
$form-multi-select-border-radius-lg:          $input-border-radius-lg !default;

$form-multi-select-disabled-color:            $input-disabled-color !default;
$form-multi-select-disabled-bg:               $input-disabled-bg !default;
$form-multi-select-disabled-border-color:     $input-disabled-border-color !default;

$form-multi-select-focus-color:               $input-focus-color !default;
$form-multi-select-focus-bg:                  $input-focus-bg !default;
$form-multi-select-focus-border-color:        $input-focus-border-color !default;
$form-multi-select-focus-box-shadow:          $input-btn-focus-box-shadow !default;

$form-multi-select-invalid-border-color:      $form-invalid-border-color !default;
$form-multi-select-valid-border-color:        $form-valid-border-color !default;

$form-multi-select-placeholder-color:         var(--cui-secondary-color) !default;

$form-multi-select-selection-padding-y:       $input-padding-y !default;
$form-multi-select-selection-padding-x:       $input-padding-x !default;
$form-multi-select-selection-tags-gap:        .25rem !default;
$form-multi-select-selection-tags-padding-y:  .25rem !default;
$form-multi-select-selection-tags-padding-x:  .25rem !default;

$form-multi-select-tag-bg:                    var(--cui-secondary-bg) !default;
$form-multi-select-tag-border-width:          var(--cui-border-width) !default;
$form-multi-select-tag-border-color:          var(--cui-border-color) !default;
$form-multi-select-tag-border-radius:         .25rem !default;
$form-multi-select-tag-border-radius-sm:      .125rem !default;
$form-multi-select-tag-border-radius-lg:      .375rem !default;
$form-multi-select-tag-padding-y:             .0625rem !default;
$form-multi-select-tag-padding-x:             .5rem !default;

$form-multi-select-tag-delete-width:             .75rem !default;
$form-multi-select-tag-delete-height:            .75rem !default;
$form-multi-select-tag-delete-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$form-multi-select-tag-delete-icon-color:        var(--cui-secondary-color) !default;
$form-multi-select-tag-delete-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-tag-delete-icon-size:         .5rem !default;

$form-multi-select-cleaner-width:             1.5rem !default;
$form-multi-select-cleaner-height:            1.5rem !default;
$form-multi-select-cleaner-padding-x:         0 !default;
$form-multi-select-cleaner-padding-y:         0 !default;
$form-multi-select-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$form-multi-select-cleaner-icon-color:        var(--cui-tertiary-color) !default;
$form-multi-select-cleaner-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-cleaner-icon-size:         .625rem !default;

$form-multi-select-indicator-width:             1.5rem !default;
$form-multi-select-indicator-height:            1.5rem !default;
$form-multi-select-indicator-padding-x:         0 !default;
$form-multi-select-indicator-padding-y:         0 !default;
$form-multi-select-indicator-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
$form-multi-select-indicator-icon-color:        var(--cui-tertiary-color) !default;
$form-multi-select-indicator-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-indicator-icon-size:         .75rem !default;

$form-multi-select-dropdown-min-width:        100% !default;
$form-multi-select-dropdown-bg:               var(--cui-body-bg) !default;
$form-multi-select-dropdown-border-color:     var(--cui-border-color) !default;
$form-multi-select-dropdown-border-width:     var(--cui-border-width) !default;
$form-multi-select-dropdown-border-radius:    var(--cui-border-radius) !default;
$form-multi-select-dropdown-box-shadow:       var(--cui-box-shadow) !default;

$form-multi-select-select-all-padding-y:      .5rem !default;
$form-multi-select-select-all-padding-x:      .75rem !default;
$form-multi-select-select-all-color:          var(--cui-body-secondary-color) !default;
$form-multi-select-select-all-bg:             transparent !default;
$form-multi-select-select-all-hover-color:    var(--cui-body-color) !default;
$form-multi-select-select-all-hover-bg:       var(--cui-tertiary-bg) !default;
$form-multi-select-select-all-border-width:   0 !default;
$form-multi-select-select-all-border-color:   transparent !default;
$form-multi-select-select-all-border-radius:  var(--cui-border-radius) !default;

$form-multi-select-dropdown-header-padding-y:    .375rem !default;
$form-multi-select-dropdown-header-padding-x:    .375rem !default;
$form-multi-select-dropdown-header-border-width: var(--cui-border-width) !default;
$form-multi-select-dropdown-header-border-color: var(--cui-border-color) !default;

$form-multi-select-options-gap:               .125rem !default;
$form-multi-select-options-padding-y:         .375rem !default;
$form-multi-select-options-padding-x:         .375rem !default;
$form-multi-select-options-font-size:         $font-size-base !default;
$form-multi-select-options-font-weight:       $font-weight-normal !default;
$form-multi-select-options-color:             var(--cui-body-color) !default;

$form-multi-select-optgroup-label-padding-y:       .5rem !default;
$form-multi-select-optgroup-label-padding-x:       .625rem !default;
$form-multi-select-optgroup-label-border-radius:   var(--cui-border-radius) !default;
$form-multi-select-optgroup-label-font-size:       80% !default;
$form-multi-select-optgroup-label-font-weight:     $font-weight-bold !default;
$form-multi-select-optgroup-label-color:           var(--cui-tertiary-color) !default;
$form-multi-select-optgroup-label-text-transform:  uppercase !default;

$form-multi-select-option-padding-y:               .5rem !default;
$form-multi-select-option-padding-x:               1.25rem !default;
$form-multi-select-option-margin-y:                0 !default;
$form-multi-select-option-margin-x:                0 !default;
$form-multi-select-option-border-width:            $input-border-width !default;
$form-multi-select-option-border-color:            transparent !default;
$form-multi-select-option-border-radius:           var(--cui-border-radius) !default;
$form-multi-select-option-box-shadow:              $box-shadow-inset !default;

$form-multi-select-option-hover-color:             var(--cui-body-color) !default;
$form-multi-select-option-hover-bg:                var(--cui-tertiary-bg) !default;

$form-multi-select-option-focus-box-shadow:        $input-btn-focus-box-shadow !default;

$form-multi-select-option-indicator-width:          1em !default;
$form-multi-select-option-indicator-bg:             $form-check-input-bg !default;
$form-multi-select-option-indicator-border:         $form-check-input-border !default;
$form-multi-select-option-indicator-border-radius:  .25em !default;

$form-multi-select-option-selected-bg:                      var(--cui-secondary-bg) !default;
$form-multi-select-option-selected-indicator-bg:            $form-check-input-checked-bg-color !default;
$form-multi-select-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image !default;
$form-multi-select-option-selected-indicator-border-color:  $form-multi-select-option-selected-indicator-bg !default;

$form-multi-select-option-indeterminate-indicator-bg:           $form-check-input-indeterminate-bg-color !default;
$form-multi-select-option-indeterminate-indicator-bg-image:     $form-check-input-indeterminate-bg-image !default;
$form-multi-select-option-indeterminate-indicator-border-color: $form-multi-select-option-indeterminate-indicator-bg !default;

$form-multi-select-option-disabled-color:        var(--cui-secondary-color) !default;

$form-multi-select-font-size-lg:                 $input-font-size-lg !default;
$form-multi-select-selection-padding-y-lg:       $input-padding-y-lg !default;
$form-multi-select-selection-padding-x-lg:       $input-padding-x-lg !default;
$form-multi-select-selection-tags-gap-lg:        .25rem !default;
$form-multi-select-selection-tags-padding-y-lg:  .25rem !default;
$form-multi-select-selection-tags-padding-x-lg:  .25rem !default;
$form-multi-select-tag-padding-y-lg:             .175rem !default;
$form-multi-select-tag-padding-x-lg:             .5rem !default;

$form-multi-select-font-size-sm:                 $input-font-size-sm !default;
$form-multi-select-selection-padding-y-sm:       $input-padding-y-sm !default;
$form-multi-select-selection-padding-x-sm:       $input-padding-x-sm !default;
$form-multi-select-selection-tags-gap-sm:        .125rem !default;
$form-multi-select-selection-tags-padding-y-sm:  .0625rem !default;
$form-multi-select-selection-tags-padding-x-sm:  .125rem !default;
$form-multi-select-tag-padding-y-sm:             .075rem !default;
$form-multi-select-tag-padding-x-sm:             .5rem !default;
```


---

# React One Time Password Input Component API

> Explore the API reference for the React One Time Password Input components and discover how to effectively utilize their props for customization.

## COneTimePassword

```jsx
import { COneTimePassword } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `((index: number, total: number) => string) \| undefined` | `(index: number, total: number) => `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 \| undefined` | `false` | Automatically submit the form when all one time password fields are filled. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the React.js OTP component. |
| `defaultValue` | `string \| number \| undefined` | - | Initial value for uncontrolled React.js one time password input. |
| `disabled` | `boolean \| undefined` | `false` | Disable all one time password (OTP) input fields. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `id` | `string \| undefined` | - | ID attribute for the hidden input field. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `linear` | `boolean \| undefined` | `true` | Enforce sequential input (users must fill fields in order). |
| `masked` | `boolean \| undefined` | `false` | Show input as password (masked characters). |
| `name` | `string \| undefined` | - | Name attribute for the hidden input field. |
| `onChange` | `((value: string) => void) \| undefined` | - | Callback triggered when the React.js one time password (OTP) value changes. |
| `onComplete` | `((value: string) => void) \| undefined` | - | Callback triggered when all React.js one time password (OTP) fields are filled. |
| `placeholder` | `string \| undefined` | - | Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character. |
| `readOnly` | `boolean \| undefined` | `false` | Make React.js OTP input component read-only. |
| `required` | `boolean \| undefined` | `false` | Makes the input field required for form validation. |
| `size` | `"sm" \| "lg" \| undefined` | - | Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `"number" \| "text" \| undefined` | `number` | Input validation type: 'number' for digits only, or 'text' for free text. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| undefined` | - | Current value for controlled OTP input. |

## COneTimePasswordInput

```jsx
import { COneTimePasswordInput } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React One Time Password Input Component CSS Customization

> Learn how to customize the appearance of React One Time Password Input components using CSS classes and CSS variables.

### 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;
```


---

# React 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 (e.g., `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.

```jsx
<CForm>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleInputEmail1">Email address</CFormLabel>
    <CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
    <CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
  </div>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleInputPassword1">Email Password</CFormLabel>
    <CFormInput type="password" id="exampleInputPassword1" />
  </div>
  <CFormCheck
    className="mb-3"
    label="Check me out"
    onChange={(e) => {
      console.log(e.target)
    }}
  />
  <CButton type="submit" color="primary">
    Submit
  </CButton>
</CForm>
```

## 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.

```jsx
<CForm>
  <div className="mb-3">
    <CFormLabel htmlFor="inputPassword5">Password</CFormLabel>
    <CFormInput type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" />
    <CFormText id="passwordHelpBlock">
      Your password must be 8-20 characters long, contain letters and numbers, and must not
      contain spaces, special characters, or emoji.
    </CFormText>
  </div>
</CForm>
```

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.

```jsx
<CRow className="g-3 align-items-center">
  <CCol xs="auto">
    <CFormLabel htmlFor="inputPassword6" className="col-form-label">
      Password
    </CFormLabel>
  </CCol>
  <CCol xs="auto">
    <CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
  </CCol>
  <CCol xs="auto">
    <CFormText as="span" id="passwordHelpInline">
      Must be 8-20 characters long.
    </CFormText>
  </CCol>
</CRow>
```

## Disabled forms

Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

```jsx
<CFormLabel id="disabledInput" type="text" placeholder="Disabled input here..." disabled />
```

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 `<CButton>...</CButton>`, 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.

```jsx
<CForm>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div className="mb-3">
      <CFormLabel htmlFor="disabledTextInput">Disabled input</CFormLabel>
      <CFormInput id="disabledTextInput" placeholder="Disabled input" />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="disabledSelect">Disabled select menu</CFormLabel>
      <CFormSelect id="disabledSelect">
        <option>Disabled select</option>
      </CFormSelect>
    </div>
    <div className="mb-3">
      <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
    </div>
    <CButton color="primary" type="submit">Submit</CButton>
  </fieldset>
</CForm>
```


---

# React Password Input Component API

> Explore the API reference for the React Password Input component and discover how to effectively utilize its props for customization.

## CPasswordInput

```jsx
import { CPasswordInput } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabelToggler` | `string \| undefined` | `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"`. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `delay` | `number \| boolean \| undefined` | `false` | Enables delayed `onChange` execution for improved performance in React password inputs. - `true` delays the `onChange` callback by 500ms. - You can also pass a custom delay (in milliseconds) as a number. |
| `disabled` | `boolean \| undefined` | - | Disables the password input field. When `true`, the user cannot interact with the field. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | - | Callback triggered when the value of the password input changes. If `delay` is set, the callback is called after the specified timeout. |
| `readOnly` | `boolean \| undefined` | - | Makes the React password input read-only. Prevents user input but allows text selection. |
| `showPassword` | `boolean \| undefined` | `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 React forms. |
| `size` | `"sm" \| "lg" \| undefined` | - | Sets the visual size of the password input. Use `'sm'` for small or `'lg'` for large input fields. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The value of the password input field. To make the input controlled, pair this with the `onChange` handler. |


---

# React Password Input Component Styling

> Learn how to customize the React Password Input component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

`$input-*` are shared across most of our form controls (and not buttons).

```scss
$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;
```

`$form-password-*` are for our ``s component.

```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;
```


---

# React Form Radio Component API

> Explore the API reference for the React Form Radio component and discover how to effectively utilize its props for customization.

## CFormCheck

```jsx
import { CFormCheck } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `button` | `ButtonObject \| undefined` | - | Create button-like checkboxes and radio buttons. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `hitArea` | `"full" \| undefined` | - | Sets hit area to the full area of the component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `indeterminate` | `boolean \| undefined` | - | Input Checkbox indeterminate Property. |
| `inline` | `boolean \| undefined` | - | Group checkboxes or radios on the same horizontal row. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | The element represents a caption for a component. |
| `reverse` | `boolean \| undefined` | - | Put checkboxes or radios on the opposite side. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `type` | `"checkbox" \| "radio" \| undefined` | `checkbox` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |


---

# React Bootstrap Radio Component

> Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s React components styled with Bootstrap.

## How to use React Bootstrap Radio component

Use CoreUI’s `<CFormCheck type="radio">` component to create Bootstrap-styled radio buttons for selecting one option from many. These components are built to be accessible, customizable, and responsive.

### Default stacked radios

By default, multiple radio buttons rendered as siblings will be stacked vertically with proper spacing.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioExample = () => {
  return (
    <>
      <CFormCheck
        type="radio"
        name="flexRadioDefault"
        id="flexRadioDefault1"
        label="Default radio"
      />
      <CFormCheck
        type="radio"
        name="flexRadioDefault"
        id="flexRadioDefault2"
        label="Checked radio"
        defaultChecked
      />
    </>
  )
}
```

### Disabled state

Add the `disabled` prop to disable a radio button. The associated label will also receive a muted style to reflect its state.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioDisabledExample = () => {
  return (
    <>
      <CFormCheck
        type="radio"
        name="flexRadioDisabled"
        id="flexRadioDisabled"
        label="Disabled radio"
        disabled
      />
      <CFormCheck
        type="radio"
        name="flexRadioDisabled"
        id="flexRadioCheckedDisabled"
        label="Disabled checked radio"
        defaultChecked
        disabled
      />
    </>
  )
}
```

### Inline radios

Display radio buttons in a horizontal row by adding the `inline` prop to each `<CFormCheck type="radio">`.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioInlineExample = () => {
  return (
    <>
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox1"
        value="option1"
        label="1"
      />
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox2"
        value="option2"
        label="2"
      />
      <CFormCheck
        inline
        type="radio"
        name="inlineRadioOptions"
        id="inlineCheckbox3"
        value="option3"
        label="3 (disabled)"
        disabled
      />
    </>
  )
}
```

### Reverse layout

Use the `reverse` prop to position the label text on the opposite side of the radio input.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioReverseExample = () => {
  return (
    <>
      <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
      <CFormCheck
        reverse
        type="radio"
        id="reverseOption2"
        value="option2"
        label="Disabled reverse radio"
        disabled
      />
    </>
  )
}
```

### Radios without labels

You can omit visual labels, but make sure to provide accessible names using `aria-label` for screen readers.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioWithoutLabelsExample = () => {
  return <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
}
```

### Radio toggle buttons

Turn your radios into button-like toggles using the `button` prop. These can also be grouped using a button group component.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option1"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option2"
        autoComplete="off"
        label="Radio"
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option3"
        autoComplete="off"
        label="Radio"
        disabled
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option4"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}
```

#### Outlined toggle styles

You can apply outlined styles to toggle radios using Bootstrap's button variant system.

```html
import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="success-outlined"
        autoComplete="off"
        label="Radio"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'danger', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="danger-outlined"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}
```

## API reference

Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.

- [&lt;CFormCheck /&gt;](../api/#cformcheck)


---

# React Radio Component Styling

> Learn how to customize the React Radio component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-check-input-width:                  1em !default;
$form-check-min-height:                   $font-size-base * $line-height-base !default;
$form-check-padding-start:                $form-check-input-width + .5em !default;
$form-check-margin-bottom:                .125rem !default;
$form-check-label-color:                  null !default;
$form-check-label-cursor:                 null !default;
$form-check-transition:                   null !default;

$form-check-input-active-filter:          brightness(90%) !default;

$form-check-input-bg:                     $input-bg !default;
$form-check-input-border:                 var(--cui-border-width) solid var(--cui-border-color) !default;
$form-check-input-border-radius:          .25em !default;
$form-check-radio-border-radius:          50% !default;
$form-check-input-focus-border:           $input-focus-border-color !default;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;

$form-check-input-checked-color:          $component-active-color !default;
$form-check-input-checked-bg-color:       $component-active-bg !default;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color:          $component-active-color !default;
$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

$form-check-input-disabled-opacity:        .5 !default;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;

$form-check-inline-margin-end:    1rem !default;
```


---

# React Range Slider Component API

> Explore the API reference for the React Range Slider component and discover how to effectively utilize its props for customization.

## CRangeSlider

```jsx
import { CRangeSlider } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabels` | `string[] \| undefined` | - | 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}"`. |
| `className` | `string \| undefined` | - | Customize the styling of your React Range Slider by adding a custom `className`. This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets. |
| `clickableLabels` | `boolean \| undefined` | `true` | Enable or disable clickable labels in the React 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 \| undefined` | `false` | Control the interactive state of the React 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 \| undefined` | `0` | Define the minimum distance between slider handles using the `distance` prop in the React Range Slider. This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions. |
| `labels` | `Label[] \| undefined` | - | Add descriptive labels to your React 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 \| undefined` | `100` | Specify the maximum value for the React 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 \| undefined` | `0` | Set the minimum value for the React 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. |
| `name` | `string \| string[] \| undefined` | - | Assign a `name` to the React Range Slider for form integration. Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms. |
| `onChange` | `((value: number[]) => void) \| undefined` | - | Handle value changes in the React Range Slider by utilizing the `onChange` callback. This function is triggered whenever the slider's value updates, enabling you to manage state and respond to user interactions effectively. |
| `step` | `number \| undefined` | `1` | Control the granularity of the React 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 \| undefined` | `true` | Toggle the visibility of tooltips in the React Range Slider with the `tooltips` prop. When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users. |
| `tooltipsFormat` | `((value: number) => ReactNode) \| undefined` | - | Customize the display format of tooltips in the React 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" \| undefined` | `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[] \| undefined` | `[0]` | Set the current value(s) of the React 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 \| undefined` | `false` | Orient the React 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. |


---

# React Range Slider Component Styling

> Learn how to customize the React Range Slider component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Range Slider supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--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-max-width: #{$range-slider-tooltip-max-width};
--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};
```

```scss
--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

```jsx
const customVars = {
  '--cui-range-slider-label-color': '#333',
  '--cui-range-slider-track-bg': '#f8f9fa',
}

return <CRangeSlider style={customVars} />
```

### 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-max-width:           200px !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;
```


---

# React Form Range Component API

> Explore the API reference for the React Form Range component and discover how to effectively utilize its props for customization.

## CFormRange

```jsx
import { CFormRange } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `max` | `number \| undefined` | - | Specifies the maximum value for the component. |
| `min` | `number \| undefined` | - | Specifies the minimum value for the component. |
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `readOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `step` | `number \| undefined` | - | Specifies the interval between legal numbers in the component. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |


---

# React Bootstrap Range Component

> Learn how to create customizable and consistent cross-browser range sliders using CoreUI’s React components styled with Bootstrap.

## How to use React Bootstrap Range component

Use CoreUI’s `<CFormRange>` component to create custom range inputs with Bootstrap styling. It provides consistent appearance and behavior across modern browsers and supports customization via standard props.

### Basic example

The `<CFormRange>` component renders a stylized `<input type="range">` element.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeExample = () => {
  return <CFormRange id="customRange1" label="Example range" />
}
```

### Disabled state

Add the `disabled` prop to visually gray out the slider and disable interaction.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeDisabledExample = () => {
  return <CFormRange id="disabledRange" label="Disabled range" disabled />
}
```

### Minimum and maximum values

Customize the slider’s value range using the `min` and `max` props.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeMinAndMaxExample = () => {
  return <CFormRange min={0} max={5} label="Example range" defaultValue="3" />
}
```

### Custom step values

Set a custom `step` size to control the interval between selectable values.

```html
import React from 'react'
import { CFormRange } from '@coreui/react'

export const FormRangeStepsExample = () => {
  return <CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" />
}
```

## API reference

Refer to the API documentation below for detailed descriptions of all available props.

- [&lt;CFormRange /&gt;](../api/#cformrange)


---

# React Range Component Styling

> Learn how to customize the React Range component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-range-track-width:          100% !default;
$form-range-track-height:         .5rem !default;
$form-range-track-cursor:         pointer !default;
$form-range-track-bg:             var(--cui-secondary-bg) !default;
$form-range-track-border-radius:  1rem !default;
$form-range-track-box-shadow:     var(--cui-box-shadow-inset) !default;

$form-range-thumb-width:                   1rem !default;
$form-range-thumb-height:                  $form-range-thumb-width !default;
$form-range-thumb-bg:                      $component-active-bg !default;
$form-range-thumb-border:                  0 !default;
$form-range-thumb-border-radius:           1rem !default;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($primary, 70%) !default;
$form-range-thumb-disabled-bg:             var(--cui-secondary-color) !default;
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
```


---

# React Rating Component API

> Explore the API reference for the React Rating component and discover how to effectively utilize its props for customization.

## CRating

```jsx
import { CRating } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeIcon` | `string \| Element \| Icon \| undefined` | - | The default icon to display when the item is selected. |
| `allowClear` | `boolean \| undefined` | - | Enables the clearing upon clicking the selected item again. |
| `ariaLabel` | `((value: number, itemCount: number) => string) \| undefined` | `(value, itemCount) => `${value} of ${itemCount}`` | A function that returns the accessible label (`aria-label`) for each rating item's radio input. Receives the item's value and the total item count. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `highlightOnlySelected` | `boolean \| undefined` | - | If enabled, only the currently selected icon will be visibly highlighted. |
| `icon` | `string \| Element \| Icon \| undefined` | - | The default icon to display when the item is not selected. |
| `itemCount` | `number \| undefined` | `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. |
| `name` | `string \| undefined` | - | The name attribute of the radio input elements. |
| `onChange` | `((value: number \| null) => void) \| undefined` | - | Execute a function when a user changes the selected element. |
| `onHover` | `((value: number \| null) => void) \| undefined` | - | Execute a function when a user hover the element. |
| `precision` | `number \| undefined` | `1` | Minimum increment value change allowed. |
| `readOnly` | `boolean \| undefined` | - | 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` | `number \| undefined` | - | The `value` attribute of component. |


---

# React Rating Component Styling

> Learn how to customize the React Rating component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Rating supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```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

```jsx
const customVars = {
  '--cui-rating-item-color': '#333',
  '--cui-rating-item-active-color': '#f8f9fa',
}

return <CRating style={customVars}>{/* Rating content */}</CRating>
```

### 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;
```


---

# React Form Select Component API

> Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.

## CFormSelect

```jsx
import { CFormSelect } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `htmlSize` | `number \| undefined` | - | Specifies the number of visible options in a drop-down list. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLSelectElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `options` | `Option[] \| string[] \| undefined` | - | Options list of the select component. Available keys: `label`, `value`, `disabled`. Examples: - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}` - `options={['js', 'html']}` |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |

## CFormFeedback

```jsx
import { CFormFeedback } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `invalid` | `boolean \| undefined` | - | Method called immediately after the `value` prop changes. |
| `tooltip` | `boolean \| undefined` | - | If your form layout allows it, you can display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |

## CFormLabel

```jsx
import { CFormLabel } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `customClassName` | `string \| undefined` | - | A string of all className you want to be applied to the component, and override standard className value. |

## CFormText

```jsx
import { CFormText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Select Component

> Learn how to build accessible and customizable dropdown menus using CoreUI’s React select component styled with Bootstrap.

## How to use React Bootstrap Select component

Use CoreUI’s `<CFormSelect>` to create custom-styled `<select>` elements that match the Bootstrap look and feel. It supports single and multiple selections, custom sizing, and full accessibility.

### Basic usage

The default select renders a Bootstrap-styled native dropdown.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectExample = () => {
  return (
    <CFormSelect
      aria-label="Default select example"
      options={[
        { label: 'Open this select menu' },
        { label: 'One', value: '1' },
        { label: 'Two', value: '2' },
        { label: 'Three', value: '3', disabled: true },
      ]}
    />
  )
}
```

You can also define options manually using JSX:

```jsx
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
```

### Sizing

Use the `size` prop with values like `"sm"` or `"lg"` to change the select height.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizingExample = () => {
  return (
    <>
      <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CFormSelect>
      <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CFormSelect>
    </>
  )
}
```

You can also enable multi-select behavior using the `multiple` prop:

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizing2Example = () => {
  return (
    <CFormSelect size="lg" multiple aria-label="Multiple select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

And specify a fixed visible size using the `htmlSize` prop:

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectSizing3Example = () => {
  return (
    <CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}
```

### Disabled state

Add the `disabled` prop to disable user interaction and apply a muted appearance.

```html
import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FormSelectDisabledExample = () => {
  return (
    <CFormSelect
      aria-label="Default select example"
      options={[
        'Open this select menu',
        { label: 'One', value: '1' },
        { label: 'Two', value: '2' },
        { label: 'Three', value: '3', disabled: true },
      ]}
    />
  )
}
```

## API reference

Refer to the API documentation below for detailed descriptions of all available props and subcomponents.

- [&lt;CFormSelect /&gt;](../api/#cformselect)
- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
- [&lt;CFormLabel /&gt;](../api/#cformlabel)
- [&lt;CFormText /&gt;](../api/#cformtext)


---

# React Select Component Styling

> Learn how to customize the React Select component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-select-padding-y:             $input-padding-y !default;
$form-select-padding-x:             $input-padding-x !default;
$form-select-font-family:           $input-font-family !default;
$form-select-font-size:             $input-font-size !default;
$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
$form-select-font-weight:           $input-font-weight !default;
$form-select-line-height:           $input-line-height !default;
$form-select-color:                 $input-color !default;
$form-select-bg:                    $input-bg !default;
$form-select-disabled-color:        null !default;
$form-select-disabled-bg:           $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position:           right $form-select-padding-x center !default;
$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color:       $gray-800 !default;
$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;

$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;

$form-select-border-width:        $input-border-width !default;
$form-select-border-color:        $input-border-color !default;
$form-select-border-radius:       $input-border-radius !default;
$form-select-box-shadow:          var(--cui-box-shadow-inset) !default;

$form-select-focus-border-color:  $input-focus-border-color !default;
$form-select-focus-width:         $input-focus-width !default;
$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;

$form-select-padding-y-sm:        $input-padding-y-sm !default;
$form-select-padding-x-sm:        $input-padding-x-sm !default;
$form-select-font-size-sm:        $input-font-size-sm !default;
$form-select-border-radius-sm:    $input-border-radius-sm !default;

$form-select-padding-y-lg:        $input-padding-y-lg !default;
$form-select-padding-x-lg:        $input-padding-x-lg !default;
$form-select-font-size-lg:        $input-font-size-lg !default;
$form-select-border-radius-lg:    $input-border-radius-lg !default;

$form-select-transition:          $input-transition !default;
```


---

# React Stepper Component API

> Explore the API reference for the React Stepper component and discover how to effectively utilize its props for customization.

## CStepper

```jsx
import { CStepper } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeStepIndex` | `number \| undefined` | - | Controls the currently active step in the React Stepper component (Controlled mode). Use this prop when you want full control over the active step from the parent component. Use `activeStepNumber` instead. This prop uses 0-based indexing which can be confusing. |
| `activeStepNumber` | `number \| undefined` | - | Controls the currently active step number in the React Stepper component (Controlled mode). Use this prop when you want full control over the active step from the parent component. Step numbers are 1-based (1, 2, 3, ...). |
| `className` | `string \| undefined` | - | Custom CSS class name applied to the main React Stepper container. |
| `defaultActiveStepIndex` | `number \| undefined` | `0` | Sets the initial active step index for the Form Wizard when the React Stepper is used in Uncontrolled mode. Useful when you want the Stepper to manage its own state internally. Use `defaultActiveStepNumber` instead. This prop uses 0-based indexing which can be confusing. |
| `defaultActiveStepNumber` | `number \| undefined` | - | Sets the initial active step number for the Form Wizard when the React Stepper is used in Uncontrolled mode. Useful when you want the Stepper to manage its own state internally. Step numbers are 1-based (1, 2, 3, ...). |
| `layout` | `"horizontal" \| "vertical" \| undefined` | `horizontal` | Defines the overall layout orientation of the React Stepper component. - `'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 \| undefined` | `true` | Defines whether the Stepper enforces linear progression (cannot skip steps). - `true`: Users must complete steps sequentially. - `false`: Users can jump freely between steps. |
| `onFinish` | `(() => void) \| undefined` | - | Callback 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` | `(() => void) \| undefined` | - | Callback fired when the user triggers the reset action on the React Stepper. Use this to reset the Stepper state or clear related form data. |
| `onStepChange` | `((stepNumber: number) => void) \| undefined` | - | Callback fired when the active step changes in the React Stepper component. |
| `onStepValidationComplete` | `(({ stepNumber, isValid }: StepperStepValidationResult) => void) \| undefined` | - | Callback fired after a validation check completes for a specific step in the Form Wizard. Receives an object with the step index and the validation result (`true` or `false`). Useful for custom validation handling across multi-step forms. |
| `stepButtonLayout` | `"horizontal" \| "vertical" \| undefined` | `horizontal` | Controls the internal layout of the step indicator (icon and label) inside each step when using a horizontal layout. - `'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. |
| `steps` | `string[] \| StepperStepData[]` | `[]` | Defines the steps for the React Stepper component. Each step can be either: - A string (simplified format): `['Step 1', 'Step 2', 'Step 3']` - An object (full format): containing a label, optional content, and an optional `formRef` for validation. |
| `validation` | `boolean \| undefined` | `true` | Enables or disables built-in form validation inside the React Stepper. When enabled (`true`), each step's associated form must be valid before advancing to the next step. Requires each step to provide a `formRef`. |


---

# React Stepper Component Styling

> Learn how to customize the React Stepper component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

React Stepper supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--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

```jsx
const customVars = {
  '--cui-stepper-step-button-color': '#333',
  '--cui-stepper-step-indicator-bg': '#f8f9fa',
}

return <CStepper style={customVars} />
```

### 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;
```


---

# React Form Switch Component API

> Explore the API reference for the React Form Switch component and discover how to effectively utilize its props for customization.

## CFormSwitch

```jsx
import { CFormSwitch } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | The element represents a caption for a component. |
| `reverse` | `boolean \| undefined` | - | Put switch on the opposite side. |
| `size` | `"lg" \| "xl" \| undefined` | - | Size the component large or extra large. Works only with `switch`. |
| `type` | `"checkbox" \| "radio" \| undefined` | `checkbox` | Specifies the type of component. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |


---

# React Bootstrap Switch Component

> Learn how to create responsive toggle switches using CoreUI’s React component styled to match Bootstrap form elements.

## How to use React Bootstrap Switch component

Use CoreUI’s `<CFormSwitch>` to create cross-browser, Bootstrap-styled toggle switches that represent binary states such as on/off, enabled/disabled, or true/false.

### Basic usage

A standard switch uses the `type="switch"` option on the `<CFormSwitch>` component.

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchExample = () => {
  return (
    <>
      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
      <CFormSwitch
        label="Checked switch checkbox input"
        id="formSwitchCheckChecked"
        defaultChecked
      />
      <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
      <CFormSwitch
        label="Disabled checked switch checkbox input"
        id="formSwitchCheckCheckedDisabled"
        defaultChecked
        disabled
      />
    </>
  )
}
```

### Sizing

Use the `size` prop to adjust the visual scale of the switch. Available sizes include `"lg"` and `"xl"`.

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchSizingExample = () => {
  return (
    <>
      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal" />
      <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
      <CFormSwitch
        size="xl"
        label="Extra large switch checkbox input"
        id="formSwitchCheckDefaultXL"
      />
    </>
  )
}
```

### Reverse layout

Add the `reverse` prop to place the switch control after the label.

```html
import React from 'react'
import { CFormSwitch } from '@coreui/react'

export const FormSwitchReverseExample = () => {
  return (
    <>
      <CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch" />
      <CFormSwitch
        reverse
        type="radio"
        id="reverseFormSwitch2"
        label="Disabled reverse switch"
        disabled
      />
    </>
  )
}
```

## API reference

Refer to the API documentation below for a complete list of available props for the React Bootstrap Switch component.

- [&lt;CFormSwitch /&gt;](../api/#cformswitch)


---

# React Switch Component Styling

> Learn how to customize the React Switch component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

```scss
$form-switch-color:               rgba($black, .25) !default;
$form-switch-width:               2em !default;
$form-switch-padding-start:       $form-switch-width + .5em !default;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius:       $form-switch-width !default;
$form-switch-transition:          background-position .15s ease-in-out !default;

$form-switch-focus-color:         $input-focus-border-color !default;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

$form-switch-checked-color:       $component-active-color !default;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;

$form-switch-widths: (
  lg: (
    width: 2.5em,
    height: 1.25em
  ),
  xl: (
    width: 3em,
    height: 1.5em
  )
) !default;
```


---

# React Form Textarea Component API

> Explore the API reference for the React Form Textarea component and discover how to effectively utilize its props for customization.

## CFormTextarea

```jsx
import { CFormTextarea } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `floatingLabel` | `ReactNode` | - | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `onChange` | `ChangeEventHandler<HTMLTextAreaElement> \| undefined` | - | Method called immediately after the `value` prop changes. |
| `plainText` | `boolean \| undefined` | - | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. |
| `readOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `value` | `string \| number \| string[] \| undefined` | - | The `value` attribute of component. |

## CFormFeedback

```jsx
import { CFormFeedback } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `invalid` | `boolean \| undefined` | - | Method called immediately after the `value` prop changes. |
| `tooltip` | `boolean \| undefined` | - | If your form layout allows it, you can display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |

## CFormLabel

```jsx
import { CFormLabel } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `customClassName` | `string \| undefined` | - | A string of all className you want to be applied to the component, and override standard className value. |

## CFormText

```jsx
import { CFormText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `(ElementType & "symbol") \| (ElementType & "object") \| (ElementType & "div") \| (ElementType & "slot") \| (ElementType & "style") \| ... 175 more ... \| undefined` | `div` | Component used for the root node. Either a string to use a HTML element or a component. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |


---

# React Bootstrap Textarea Component

> Learn how to style and enhance Bootstrap-style textarea fields in React using CoreUI components with custom sizing, disabled states, and validation feedback.

## How to use React Bootstrap Textarea component

Use `<CFormTextarea>` to create multi-line text inputs in your forms, styled to match Bootstrap’s design system.

### Basic example

Use the component with a label and help text for accessibility and usability.

```html
import React from 'react'
import { CForm, CFormTextarea } from '@coreui/react'

export const FormTextareaExample = () => {
  return (
    <CForm>
      <CFormTextarea
        id="exampleFormControlTextarea1"
        label="Example textarea"
        rows={3}
        text="Must be 8-20 words long."
      ></CFormTextarea>
    </CForm>
  )
}
```

You can also build the same structure manually using individual form components:

```jsx
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
```

### Disabled state

Add the `disabled` prop to make the textarea inactive and visually grayed out.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaDisabledExample = () => {
  return (
    <CFormTextarea
      className="mb-3"
      placeholder="Disabled textarea"
      aria-label="Disabled textarea example"
      disabled
    ></CFormTextarea>
  )
}
```

### Read-only

Use the `readOnly` prop to prevent edits while still allowing text selection and copying.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaReadonlyExample = () => {
  return (
    <CFormTextarea
      placeholder="Readonly textarea"
      aria-label="Readonly textarea example"
      disabled
      readOnly
    ></CFormTextarea>
  )
}
```

## API reference

Refer to the API documentation below for a complete list of available props and subcomponents used to build Bootstrap-style textareas in React.

- [&lt;CFormTextarea /&gt;](../api/#cformtextarea)
- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
- [&lt;CFormLabel /&gt;](../api/#cformlabel)
- [&lt;CFormText /&gt;](../api/#cformtext)


---

# React Textarea Component Styling

> Learn how to customize the React Textarea component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### SASS variables

`$input-*` are shared across most of our form controls (and not buttons).

```scss
$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;
```

`$form-label-*` and `$form-text-*` are for our ``s and `` component.

```scss
$form-label-margin-bottom:              .5rem !default;
$form-label-font-size:                  null !default;
$form-label-font-style:                 null !default;
$form-label-font-weight:                null !default;
$form-label-color:                      null !default;
```

```scss
$form-text-margin-top:                  .25rem !default;
$form-text-font-size:                   $small-font-size !default;
$form-text-font-style:                  null !default;
$form-text-font-weight:                 null !default;
$form-text-color:                       var(--cui-secondary-color) !default;
```


---

# React Time Picker Component API

> Explore the API reference for the React Time Picker component and discover how to effectively utilize its props for customization.

## CTimePicker

```jsx
import { CTimePicker } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ampm` | `boolean \| "auto" \| undefined` | `auto` | Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales. |
| `ariaSelectHoursLabel` | `string \| undefined` | `Select hours` | Accessible label for the hours selection element. |
| `ariaSelectMeridiemLabel` | `string \| undefined` | `Select AM/PM` | Accessible label for the AM/PM selection element. |
| `ariaSelectMinutesLabel` | `string \| undefined` | `Select minutes` | Accessible label for the minutes selection element. |
| `ariaSelectSecondsLabel` | `string \| undefined` | `Select seconds` | Accessible label for the seconds selection element. |
| `cancelButton` | `ReactNode` | `Cancel` | Toggle visibility or set the content of cancel button. |
| `cancelButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| `cancelButtonSize` | `"sm" \| "lg" \| undefined` | `sm` | Size the cancel button small or large. |
| `cancelButtonVariant` | `"outline" \| "ghost" \| undefined` | `ghost` | Set the cancel button variant to an outlined button or a ghost button. |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `cleaner` | `ReactNode` | `true` | Toggle visibility or set the content of the cleaner button. |
| `confirmButton` | `ReactNode` | `OK` | Toggle visibility or set the content of confirm button. |
| `confirmButtonColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | `primary` | Sets the color context of the confirm button to one of CoreUI’s themed colors. |
| `confirmButtonSize` | `"sm" \| "lg" \| undefined` | `sm` | Size the confirm button small or large. |
| `confirmButtonVariant` | `"outline" \| "ghost" \| undefined` | - | Set the confirm button variant to an outlined button or a ghost button. |
| `container` | `"dropdown" \| "inline" \| undefined` | `dropdown` | Set container type for the component. |
| `disabled` | `boolean \| undefined` | - | Toggle the disabled state for the component. |
| `dropdownClassNames` | `string \| undefined` | - | A string of all className you want applied to the dropdown menu. |
| `feedback` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackInvalid` | `ReactNode` | - | Provide valuable, actionable feedback. |
| `feedbackValid` | `ReactNode` | - | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. |
| `floatingClassName` | `string \| undefined` | - | A string of all className you want applied to the floating label wrapper. |
| `footer` | `boolean \| undefined` | `true` | Toggle visibility of footer element. |
| `footerContent` | `ReactNode` | - | Add custom elements to the footer. |
| `hours` | `number[] \| ((hour: number) => number[]) \| undefined` | - | Specify a list of available hours using an array, or customize the filtering of hours through a function. |
| `id` | `string \| undefined` | - | Set the id attribute for the input element. |
| `indicator` | `ReactNode` | `true` | Toggle visibility or set the content of the input indicator. |
| `inputOnChangeDelay` | `number \| undefined` | `750` | Defines the delay (in milliseconds) for the input field's onChange event. |
| `inputReadOnly` | `boolean \| undefined` | - | Toggle the readonly state for the component. |
| `invalid` | `boolean \| undefined` | - | Set component validation state to invalid. |
| `label` | `ReactNode` | - | Add a caption for a component. |
| `locale` | `string \| undefined` | `default` | Sets the default locale for components. If not set, it is inherited from the browser. |
| `minutes` | `boolean \| number[] \| ((minute: number) => number[]) \| undefined` | `true` | Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function. |
| `name` | `string \| undefined` | - | Set the name attribute for the input element. |
| `onHide` | `(() => void) \| undefined` | - | Callback fired when the component requests to be hidden. |
| `onShow` | `(() => void) \| undefined` | - | Callback fired when the component requests to be shown. |
| `onTimeChange` | `((timeString: string \| null, localeTimeString?: string \| undefined, date?: Date \| undefined) => void) \| undefined` | - | Callback fired when the time changed. |
| `placeholder` | `string \| undefined` | `Select time` | Specifies a short hint that is visible in the input. |
| `portal` | `boolean \| undefined` | `false` | Generates dropdown menu using createPortal. |
| `required` | `boolean \| undefined` | - | When present, it specifies that time must be filled out before submitting the form. |
| `seconds` | `boolean \| number[] \| ((second: number) => number[]) \| undefined` | `true` | Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function. |
| `size` | `"sm" \| "lg" \| undefined` | - | Size the component small or large. |
| `text` | `ReactNode` | - | Add helper text to the component. |
| `time` | `string \| Date \| null \| undefined` | - | Initial selected time. |
| `toggler` | `ReactNode` | - | The content of toggler. |
| `tooltipFeedback` | `boolean \| undefined` | - | Display validation feedback in a styled tooltip. |
| `valid` | `boolean \| undefined` | - | Set component validation state to valid. |
| `variant` | `"roll" \| "select" \| undefined` | `roll` | Set the time picker variant to a roll or select. |
| `visible` | `boolean \| undefined` | - | Toggle the visibility of dropdown menu component. |


---

# React Time Picker Component Styling

> Learn how to customize the React Time Picker component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

CoreUI React Time Picker supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

```scss
--cui-time-picker-zindex: #{$time-picker-zindex};
--cui-time-picker-font-family: #{$time-picker-font-family};
--cui-time-picker-font-size: #{$time-picker-font-size};
--cui-time-picker-font-weight: #{$time-picker-font-weight};
--cui-time-picker-line-height: #{$time-picker-line-height};
--cui-time-picker-color: #{$time-picker-color};
--cui-time-picker-bg: #{$time-picker-bg};
--cui-time-picker-box-shadow: #{$time-picker-box-shadow};
--cui-time-picker-border-width: #{$time-picker-border-width};
--cui-time-picker-border-color: #{$time-picker-border-color};
--cui-time-picker-border-radius: #{$time-picker-border-radius};
--cui-time-picker-disabled-color: #{$time-picker-disabled-color};
--cui-time-picker-disabled-bg: #{$time-picker-disabled-bg};
--cui-time-picker-disabled-border-color: #{$time-picker-disabled-border-color};
--cui-time-picker-focus-color: #{$time-picker-focus-color};
--cui-time-picker-focus-bg: #{$time-picker-focus-bg};
--cui-time-picker-focus-border-color: #{$time-picker-focus-border-color};
--cui-time-picker-focus-box-shadow: #{$time-picker-focus-box-shadow};
--cui-time-picker-placeholder-color: #{$time-picker-placeholder-color};
--cui-time-picker-padding-y: #{$time-picker-padding-y};
--cui-time-picker-padding-x: #{$time-picker-padding-x};
--cui-time-picker-gap: #{$time-picker-gap};
--cui-time-picker-indicator-width: #{$time-picker-indicator-width};
--cui-time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};
--cui-time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};
--cui-time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};
--cui-time-picker-cleaner-width: #{$time-picker-cleaner-width};
--cui-time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};
--cui-time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};
--cui-time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};
--cui-time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};
--cui-time-picker-body-padding: #{$time-picker-body-padding};
--cui-time-picker-footer-border-width: #{$time-picker-footer-border-width};
--cui-time-picker-footer-border-color: #{$time-picker-footer-border-color};
--cui-time-picker-footer-padding: #{$time-picker-footer-padding};
--cui-time-picker-dropdown-bg: #{$time-picker-dropdown-bg};
--cui-time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};
--cui-time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};
--cui-time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};
--cui-time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};
--cui-time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};
--cui-time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};
--cui-time-picker-roll-cell-width: #{$time-picker-roll-cell-width};
--cui-time-picker-roll-cell-height: #{$time-picker-roll-cell-height};
--cui-time-picker-roll-cell-hover-color: #{$time-picker-roll-cell-hover-color};
--cui-time-picker-roll-cell-hover-bg: #{$time-picker-roll-cell-hover-bg};
--cui-time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};
--cui-time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};
--cui-time-picker-roll-cell-selected-hover-color: #{$time-picker-roll-cell-selected-hover-color};
--cui-time-picker-roll-cell-selected-hover-bg: #{$time-picker-roll-cell-selected-hover-bg};
--cui-time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};
--cui-time-picker-inline-select-color: #{$time-picker-inline-select-color};
--cui-time-picker-inline-select-padding-y: #{$time-picker-inline-select-padding-y};
--cui-time-picker-inline-select-padding-x: #{$time-picker-inline-select-padding-x};
--cui-time-picker-inline-select-disabled-color: #{$time-picker-inline-select-disabled-color};
```

#### How to use CSS variables

```jsx
const customVars = { 
  '--cui-time-picker-bg': '#efefef',
  '--cui-time-picker-color': '#222', 
}

return <CTimePicker style={customVars} />
```

### SASS variables

```scss
$time-picker-zindex:                        1000 !default;
$time-picker-font-family:                   $input-font-family !default;
$time-picker-font-size:                     $input-font-size !default;
$time-picker-font-size-sm:                  $input-font-size-sm !default;
$time-picker-font-size-lg:                  $input-font-size-lg !default;
$time-picker-font-weight:                   $input-font-weight !default;
$time-picker-line-height:                   $input-line-height !default;
$time-picker-color:                         $input-color !default;
$time-picker-bg:                            $input-bg !default;
$time-picker-box-shadow:                    $box-shadow-inset !default;

$time-picker-border-width:                  $input-border-width !default;
$time-picker-border-color:                  $input-border-color !default;
$time-picker-border-radius:                 $input-border-radius !default;
$time-picker-border-radius-sm:              $input-border-radius-sm !default;
$time-picker-border-radius-lg:              $input-border-radius-lg !default;

$time-picker-invalid-border-color:          $form-invalid-border-color !default;
$time-picker-valid-border-color:            $form-valid-border-color !default;

$time-picker-disabled-color:                $input-disabled-color !default;
$time-picker-disabled-bg:                   $input-disabled-bg !default;
$time-picker-disabled-border-color:         $input-disabled-border-color !default;

$time-picker-focus-color:                   $input-focus-color !default;
$time-picker-focus-bg:                      $input-focus-bg !default;
$time-picker-focus-border-color:            $input-focus-border-color !default;
$time-picker-focus-box-shadow:              $input-btn-focus-box-shadow !default;

$time-picker-placeholder-color:             var(--cui-secondary-color) !default;

$time-picker-padding-y:                     $input-padding-y !default;
$time-picker-padding-x:                     $input-padding-x !default;
$time-picker-gap:                           $input-padding-x !default;

$time-picker-padding-y-sm:                  $input-padding-y-sm !default;
$time-picker-padding-x-sm:                  $input-padding-x-sm !default;
$time-picker-gap-sm:                        $input-padding-x-sm !default;

$time-picker-padding-y-lg:                  $input-padding-y-lg !default;
$time-picker-padding-x-lg:                  $input-padding-x-lg !default;
$time-picker-gap-lg:                        $input-padding-x-lg !default;

$time-picker-cleaner-width:                 1.25rem !default;
$time-picker-cleaner-icon-color:            var(--cui-tertiary-color) !default;
$time-picker-cleaner-icon:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#000' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
$time-picker-cleaner-icon-hover-color:      var(--cui-body-color) !default;
$time-picker-cleaner-icon-size:             1rem !default;
$time-picker-cleaner-icon-size-sm:          .875rem !default;
$time-picker-cleaner-icon-size-lg:          1.25rem !default;

$time-picker-cleaner-width-sm:              1rem !default;
$time-picker-cleaner-width-lg:              1.5rem !default;
$time-picker-cleaner-icon-size-sm:          .875rem !default;
$time-picker-cleaner-icon-size-lg:          1.25rem !default;

$time-picker-indicator-width:               1.25rem !default;
$time-picker-indicator-icon-color:          var(--cui-tertiary-color) !default;
$time-picker-indicator-icon:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#000' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
$time-picker-indicator-invalid-icon-color:  var(--cui-form-invalid-color) !default;
$time-picker-indicator-invalid-icon:        $time-picker-indicator-icon !default;
$time-picker-indicator-valid-icon-color:    var(--cui-form-valid-color) !default;
$time-picker-indicator-valid-icon:          $time-picker-indicator-icon !default;
$time-picker-indicator-icon-size:           1rem !default;

$time-picker-indicator-width-sm:            1rem !default;
$time-picker-indicator-width-lg:            1.5rem !default;
$time-picker-indicator-icon-size-sm:        .875rem !default;
$time-picker-indicator-icon-size-lg:        1.25rem !default;

$time-picker-dropdown-bg:                   var(--cui-body-bg) !default;
$time-picker-dropdown-border-color:         var(--cui-border-color) !default;
$time-picker-dropdown-border-width:         var(--cui-border-width) !default;
$time-picker-dropdown-border-radius:        var(--cui-border-radius) !default;
$time-picker-dropdown-box-shadow:           var(--cui-box-shadow) !default;

$time-picker-body-padding:                  $spacer * .5 !default;

$time-picker-footer-padding:                .5rem !default;
$time-picker-footer-border-width:           1px !default;
$time-picker-footer-border-color:           var(--cui-border-color) !default;

$time-picker-roll-col-border-width:           var(--cui-border-width) !default;
$time-picker-roll-col-border-color:           var(--cui-border-color) !default;
$time-picker-roll-cell-width:                 3rem !default;
$time-picker-roll-cell-height:                2rem !default;
$time-picker-roll-cell-hover-color:           var(--cui-body-color) !default;
$time-picker-roll-cell-hover-bg:              var(--cui-tertiary-bg) !default;
$time-picker-roll-cell-selected-color:        var(--cui-white) !default;
$time-picker-roll-cell-selected-bg:           var(--cui-primary) !default;
$time-picker-roll-cell-selected-hover-color:  var(--cui-white) !default;
$time-picker-roll-cell-selected-hover-bg:     light-dark(color.scale($primary, $lightness: -20%), color.scale($primary, $saturation: -10%, $lightness: -10%)) !default; // stylelint-disable-line scss/at-function-named-arguments

$time-picker-inline-select-font-size:       $form-select-font-size-sm !default;
$time-picker-inline-select-color:           $input-color !default;
$time-picker-inline-select-padding-y:       $input-padding-y-sm !default;
$time-picker-inline-select-padding-x:       $input-padding-x-sm !default;
$time-picker-inline-select-disabled-color:  $input-disabled-color !default;
```


---

# React Bootstrap Form Validation

> Learn how to use Bootstrap-style validation in React forms using CoreUI components. Show validation messages, use custom styles, and support native browser behavior.

## How to use React Bootstrap Form Validation

React Bootstrap validation lets you provide custom or native HTML5 feedback styles for form controls. CoreUI components support both approaches for a better user experience.

### Custom validation styles

Disable the browser’s native validation UI with the `noValidate` prop on `<CForm>`, and use the `validated` prop to enable feedback based on custom logic. Try submitting the form below to see how validation classes like `:invalid` and `:valid` are applied.

```html
import React, { FormEvent, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormFeedback,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationExample = () => {
  const [validated, setValidated] = useState(false)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }

    setValidated(true)
  }

  return (
    <CForm
      className="row g-3 needs-validation"
      noValidate
      validated={validated}
      onSubmit={handleSubmit}
    >
      <CCol md={4}>
        <CFormInput
          type="text"
          defaultValue="Mark"
          feedbackValid="Looks good!"
          id="validationCustom01"
          label="First name"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          defaultValue="Otto"
          feedbackValid="Looks good!"
          id="validationCustom02"
          label="First name"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText>@</CInputGroupText>
          <CFormInput
            type="text"
            aria-describedby="inputGroupPrependFeedback"
            feedbackValid="Please choose a username."
            id="validationCustomUsername"
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput
          type="text"
          aria-describedby="validationCustom03Feedback"
          feedbackInvalid="Please provide a valid city."
          id="validationCustom03"
          label="City"
          required
        />
      </CCol>
      <CCol md={3}>
        <CFormSelect
          aria-describedby="validationCustom04Feedback"
          feedbackInvalid="Please select a valid state."
          id="validationCustom04"
          label="State"
          required
        >
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput
          type="text"
          aria-describedby="validationCustom05Feedback"
          feedbackInvalid="Please provide a valid zip."
          id="validationCustom05"
          label="Zip"
          required
        />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          required
        />
        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

### Browser default behavior

If you prefer to rely on native browser validation, skip `noValidate` and `validated`. Submit the form and let the browser handle feedback based on built-in rules.

```html
import React from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationBrowserDefaultsExample = () => {
  return (
    <CForm className="row g-3">
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationDefault01"
          label="First name"
          defaultValue="Mark"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationDefault02"
          label="Last name"
          defaultValue="Otto"
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
        <CInputGroup>
          <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
          <CFormInput
            type="text"
            id="validationDefaultUsername"
            defaultValue=""
            aria-describedby="inputGroupPrepend02"
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput type="text" id="validationDefault03" label="City" required />
      </CCol>
      <CCol md={3}>
        <CFormSelect id="validationDefault04" label="State">
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput type="text" id="validationDefault05" label="Zip" required />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          required
        />
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

### Manual validation

Use the `valid` and `invalid` props directly on components like `<CFormInput>` to apply validation styles manually, which is useful for server-side validation or complex form logic.

```html
import React from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormCheck,
  CFormFeedback,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationCustomExample = () => {
  return (
    <CForm className="row g-3">
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationServer01"
          label="Email"
          feedback="Looks good!"
          defaultValue="name@surname.com"
          valid
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormInput
          type="text"
          id="validationServer02"
          label="Repeat email"
          feedback="Looks good!"
          defaultValue="name@surname.com"
          valid
          required
        />
      </CCol>
      <CCol md={4}>
        <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
          <CFormInput
            type="text"
            id="validationServerUsername"
            feedback="Please choose a username."
            defaultValue=""
            aria-describedby="inputGroupPrepend03"
            invalid
            required
          />
        </CInputGroup>
      </CCol>
      <CCol md={6}>
        <CFormInput
          type="text"
          id="validationServer03"
          label="City"
          feedback="Please provide a valid city."
          invalid
          required
        />
      </CCol>
      <CCol md={3}>
        <CFormSelect
          id="validationServer04"
          label="State"
          feedback="Please provide a valid city."
          invalid
        >
          <option disabled>Choose...</option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3}>
        <CFormInput
          type="text"
          id="validationServer05"
          label="zip"
          feedback="Please provide a valid zip."
          invalid
          required
        />
      </CCol>
      <CCol xs={12}>
        <CFormCheck
          type="checkbox"
          id="invalidCheck"
          label="Agree to terms and conditions"
          invalid
          required
        />
        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
      </CCol>
      <CCol xs={12}>
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```

### Supported components

These CoreUI components support Bootstrap validation classes:

- `<CFormCheck>`
- `<CFormInput>`
- `<CFormSelect>`
- `<CFormTextarea>`

```html
import React from 'react'
import { CButton, CForm, CFormCheck, CFormInput, CFormSelect, CFormTextarea } from '@coreui/react'

export const ValidationSupportedElementsExample = () => {
  return (
    <CForm validated={true}>
      <div className="mb-3">
        <CFormTextarea
          feedbackInvalid="Please enter a message in the textarea."
          id="validationTextarea"
          label="Textarea"
          placeholder="Required example textarea"
          required
        ></CFormTextarea>
      </div>
      <CFormCheck
        className="mb-3"
        id="validationFormCheck1"
        label="Check this checkbox"
        feedbackInvalid="Example invalid feedback text"
        required
      />
      <CFormCheck
        type="radio"
        name="radio-stacked"
        id="validationFormCheck2"
        label="Check this checkbox"
        required
      />
      <CFormCheck
        className="mb-3"
        type="radio"
        name="radio-stacked"
        id="validationFormCheck3"
        label="Or toggle this other radio"
        feedbackInvalid="More example invalid feedback text"
        required
      />
      <div className="mb-3">
        <CFormSelect
          feedbackInvalid="Example invalid select feedback"
          aria-label="select example"
          required
        >
          <option selected value="">
            Open this select menu
          </option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="validationTextarea"
          feedbackInvalid="Example invalid form file feedback"
          aria-label="file example"
          required
        />
      </div>
      <div className="mb-3">
        <CButton type="submit" color="primary" disabled>
          Submit form
        </CButton>
      </div>
    </CForm>
  )
}
```

### Tooltip feedback

For compact layouts, validation messages can appear as tooltips. Make sure the parent container has `position: relative` to position tooltips correctly.

```html
import React, { FormEvent, useState } from 'react'
import {
  CCol,
  CButton,
  CForm,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
  CFormSelect,
} from '@coreui/react'

export const ValidationTooltipsExample = () => {
  const [validated, setValidated] = useState(false)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }

    setValidated(true)
  }

  return (
    <CForm
      className="row g-3 needs-validation"
      noValidate
      validated={validated}
      onSubmit={handleSubmit}
    >
      <CCol md={4} className="position-relative">
        <CFormInput
          type="text"
          defaultValue="Mark"
          feedbackValid="Looks good!"
          id="validationTooltip01"
          label="First name"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={4} className="position-relative">
        <CFormInput
          type="text"
          defaultValue="Otto"
          feedbackValid="Looks good!"
          id="validationTooltip02"
          label="First name"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={4} className="position-relative">
        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
        <CInputGroup className="has-validation">
          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
          <CFormInput
            type="text"
            aria-describedby="inputGroupPrependFeedback"
            feedbackInvalid="Please choose a username."
            id="validationTooltipUsername"
            required
            tooltipFeedback
          />
        </CInputGroup>
      </CCol>
      <CCol md={6} className="position-relative">
        <CFormInput
          type="text"
          aria-describedby="validationTooltip03Feedback"
          feedbackInvalid="Please provide a valid city."
          id="validationTooltip03"
          label="City"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol md={3} className="position-relative">
        <CFormSelect
          aria-describedby="validationTooltip04Feedback"
          feedbackInvalid="Please select a valid state."
          id="validationTooltip04"
          label="State"
          required
          tooltipFeedback
        >
          <option selected disabled value="">
            Choose...
          </option>
          <option>...</option>
        </CFormSelect>
      </CCol>
      <CCol md={3} className="position-relative">
        <CFormInput
          type="text"
          aria-describedby="validationTooltip05Feedback"
          feedbackInvalid="Please provide a valid zip."
          id="validationTooltip05"
          label="Zip"
          required
          tooltipFeedback
        />
      </CCol>
      <CCol xs={12} className="position-relative">
        <CButton color="primary" type="submit">
          Submit form
        </CButton>
      </CCol>
    </CForm>
  )
}
```


---

# React Form Validation Styling

> Learn how to customize the React form validation with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

### CSS variables

CoreUI for React components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-form-valid-color: #{$form-valid-color};
--cui-form-valid-border-color: #{$form-valid-border-color};
--cui-form-invalid-color: #{$form-invalid-color};
--cui-form-invalid-border-color: #{$form-invalid-border-color};
```

These variables are also color mode adaptive, meaning they change color while in dark mode.

### SASS variables

```scss
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $form-text-font-size !default;
$form-feedback-font-style:          $form-text-font-style !default;
$form-feedback-valid-color:         $success !default;
$form-feedback-invalid-color:       $danger !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
```

```scss
$form-valid-color:                  $form-feedback-valid-color !default;
$form-valid-border-color:           $form-feedback-valid-color !default;
$form-invalid-color:                $form-feedback-invalid-color !default;
$form-invalid-border-color:         $form-feedback-invalid-color !default;
```

```scss
$form-valid-color-dark:             $green-300 !default;
$form-valid-border-color-dark:      $green-300 !default;
$form-invalid-color-dark:           $red-300 !default;
$form-invalid-border-color-dark:    $red-300 !default;
```