# Migration to v6 > Track and review changes to the CoreUI for React.js components to help you migrate from v5 to v6. CoreUI for React is the React.js version of the CoreUI components library, so before reading this migration guide, please also check the [CoreUI 5 to 6 migration guide](https://coreui.io/bootstrap/docs/migration/v6/) — it covers the markup, class names, Sass architecture and design tokens this release is built on. This page covers what changes in the React API. ## Dependencies - Breaking **`propTypes` are gone from every component**, and `prop-types` is no longer a dependency. Prop validation is the TypeScript types, which every component has carried for years — the runtime copy only duplicated them, and React 19 ignores it anyway. If you were reading `SomeComponent.propTypes` to introspect a component, read the exported `SomeComponentProps` type instead. - Breaking **React 18 is the minimum.** `peerDependencies` moved from `>=17` to `>=18`. The library already used `useId`, which React 17 does not have, so the old range promised support it could not deliver. React 19 is supported. - Breaking **Popper is gone; positioning runs on [Floating UI](https://floating-ui.com/).** `@popperjs/core` is replaced by `@floating-ui/dom`. Update your lockfile — nothing else is required for the default configuration. - Breaking **`popperConfig` is now `floatingConfig`** on `CDropdown`, `CPopover` and `CTooltip`, and it takes a Floating UI [`ComputePositionConfig`](https://floating-ui.com/docs/computePosition#options) instead of a Popper one. The `popper` boolean prop stays and still switches static positioning. - Breaking **Positioned elements are stamped with `data-coreui-placement`**, not `data-popper-placement`. Custom CSS, tests or scripts keyed on the old attribute must be updated. The v6 stylesheet draws tooltip, popover and menu arrows from this attribute, so it is not optional. - Breaking **The exported hooks are renamed**: `usePopper` → `useFloating`, `useDropdownWithPopper` → `useDropdownWithFloating`. ## New components - **`CCombobox`** — a select-like control: a `.form-control` toggle next to a popup [List box](https://coreui.io/react/docs/components/list-box/), with single and multiple selection, a search field with optional accent-insensitive matching, sections, a checkbox indicator and a hidden select that posts the value and takes part in form validation. Ships with the `useCombobox()` hook. See the [Combobox docs](https://coreui.io/react/docs/forms/combobox/). - **`CDateInput`, `CTimeInput`** — section fields: a masked, keyboard-first input where every part of the value (day, month, year, hour…) is its own editable section. `` carries the time too. The pickers are built on them, and they work standalone. - **`CDialog`** and **`CDrawer`** — the native-`` popup and side panel with the Bootstrap 6 look and the `dialog-*` / `drawer-*` classes. `CDialog` is a centered floating panel over a blurred backdrop with optional slide-in variants; `CDrawer` is a floating, inset, rounded panel with sheet, translucent, fit-content and fullscreen variants plus responsive breakpoints. `CDialog`'s `fullscreen` takes a breakpoint as well as `true`, like `CModal`'s. They share their behavior with `CModal` and `COffcanvas`, which keep the classic look and the v5 vocabulary — and one callback vocabulary of their own: `onShow`, `onClose` and `onClosePrevented` on both, where the legacy pair says `onHide`. **`CModal` and `COffcanvas` are deprecated and removed in v7** — prefer `CDialog` and `CDrawer` for new work. Pick one per surface; they are independent components. - **`CListBox`** — a keyboard-driven list of values on the ARIA listbox pattern, with `none`/`single`/`multiple` selection, sections, descriptions, links, an empty state and an `activeDescendant` mode that leaves the focus in your own input. Ships with `CListBoxOption`, `CListBoxSection`, `CListBoxHeader`, `CListBoxSelectAll`, `CListBoxTitle`, `CListBoxSubtitle`, `CListBoxEmpty` and the `useListBox()` hook. See the [List Box docs](https://coreui.io/react/docs/components/list-box/). - **`CMenu`** — contextual overlays with submenus, container teleport, responsive placement and logical (`start`/`end`) placements. Ships with `CMenuToggle`, `CMenuContent`, `CMenuItem`, `CMenuHeader`, `CMenuDivider`, `CMenuText`, `CSubmenu` and the `useMenu()` hook. See the [Menu docs](https://coreui.io/react/docs/components/menu/). - **`CNumberInput`** — a number field with a stepper you can hit, in place of the browser's own spinner (tiny in some engines, absent on iOS). `min`, `max` and `step` stay native. - **`CTransfer`** — two lists and four buttons that move values between them, with a select-all header and counter, an optional per-list search, a one-way mode and an announcement of every move through `announce()`. Composes two `CListBox`es and ships with the `useTransfer()` hook. See the [Transfer docs](https://coreui.io/react/docs/components/transfer/). ## Field components `CAutocomplete`, `CMultiSelect`, `CDatePicker`, `CDateRangePicker` and `CTimePicker` are built on one frame and one panel. These two changes apply to all five; the per-component sections below cover what is specific to each. - Breaking **A field component *is* the frame.** It carries `.form-control-group` on its own root instead of nesting one, so a field is a direct child of an `.input-group` like any other control and there is no wrapper level to reach through. Custom CSS written as `.date-picker .form-control-group` no longer matches anything. On the pickers, the label and the validation feedback also move out of the frame. The frame replaces the per-component shells: `.autocomplete-input-group`, `.form-multi-select-input-group` and their `-sm`/`-lg` variants are gone, the adornments are `.form-control-cleaner` / `.form-control-action` (replacing `.autocomplete-cleaner`, `.form-multi-select-cleaner`, `.autocomplete-indicator`, `.form-multi-select-indicator`), and the `size` prop puts `.form-control-sm` / `.form-control-lg` on the frame itself. - Breaking **The options/picker panel exists only while it is open.** It is built when the field opens and removed once the exit transition has played, so a closed field carries no panel markup at all — code that queried `.combobox-popup` or `.date-picker-popup` up front, or held a ref to it across a close, needs to look it up per open. ## Theme colors Breaking **`light` and `dark` are replaced by `inverse`.** They were theme colors named after a color scheme and neither followed one: `` stayed near-black on a near-black page. There are seven colors now — `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `inverse` — and the `Colors` type lists them, so `color="dark"` and `color="light"` no longer type-check against the union. - **`color="dark"` becomes `theme="inverse"`.** `inverse` resolves to gray-900 in light mode and gray-100 in dark, so it stands against the page in both. - **`color="light"` becomes `theme="secondary"`.** `secondary` is the light neutral now (gray-100 / gray-600) rather than the mid gray-blue `#6b7785`, so components already using it change appearance. - **Where the class was painting a plain panel** rather than naming a color, reach for `bg-4` or `bg-3`; where it was a fixed dark backdrop, set `data-coreui-theme="dark"` on the container. - Breaking **`color` on buttons is deprecated in favour of `theme`.** A v6 button is a shape plus a colour: `variant` picks the shape (`solid`, `outline`, `subtle`, `ghost`) and `theme` picks the colour. `color` renders the v5 spelling `btn-{color}`, which fuses the two and cannot inherit a colour from an ancestor; it still works and is removed in v7. `` becomes ``, and `` becomes ``. `color="link"` becomes the `link` property — a link button is a shape, not a colour, and it takes its colour from the link colour rather than from a theme. `color="transparent"` is gone with the `.btn-transparent` class it rendered — use `variant="ghost"`, which shows nothing but the button's content until hover and carries the base styling on its own. - Breaking **The theme colour tokens finish their rename.** `--cui-{color}-text-emphasis` is `--cui-{color}-fg-emphasis` and `--cui-{color}-border-subtle` is `--cui-{color}-border`, matching the slot names the components already read. Custom CSS naming the old tokens has to follow; the class names (`.text-primary-emphasis`, `.border-primary-subtle`) are unchanged. - Breaking **Theme colours have no bare token.** `--cui-primary`, `--cui-secondary`, `--cui-success`, `--cui-info`, `--cui-warning`, `--cui-danger` and `--cui-inverse` are gone. A theme colour is its set of slots — `-base`, `-bg`, `-fg`, `-fg-emphasis`, `-bg-subtle`, `-bg-muted`, `-border`, `-focus-ring`, `-contrast` — and the colour itself is `-base`: `--cui-primary-base` is what `--cui-primary` was, and `-bg` points at the same stop. A style prop or stylesheet of yours renames one to one, and setting the palette stop retints the colour: ```diff - + - :root { --cui-primary: #6f42c1; } + :root { --cui-primary-500: #6f42c1; } ``` - Breaking **The palette is the theme colours.** `$colors` holds `primary`, `success`, `info`, `warning`, `danger` and `gray`; the ten hues (`$blue` … `$cyan`) and every `--cui-{hue}` and `--cui-{hue}-{stop}` token are gone, as are `$secondary` and `$inverse`. Each `$theme-colors` entry points `base` and `bg` at its palette's `500` stop and the other slots at that scale; `secondary` reads `--cui-gray-200` and `inverse` `--cui-gray-900`. No palette token is bare: the literal sits in `-500`, so `--cui-gray-500` is what `--cui-gray` was, and `--cui-primary-500` is the runtime knob for the whole family: ```diff - :root { --cui-primary-base: #6f42c1; } + :root { --cui-primary-500: #6f42c1; } - + ``` - Breaking **Under a theme the theme wins over a component color token.** A component reads the `--cui-theme-*` slot on the property and its own token only as the fallback. In v5 the color came from the component's tokens, so a token you set on a colored alert applied; in v6 a token set on a themed component, or for the whole page in your CSS or a `$…-tokens` map, changes only the components without a theme. To recolor one themed component, set the slot instead: ``. - **Variants keep the component token as the override point.** Button variants, `variant="solid"` on an alert, `subtle` and `outline` on a badge, `subtle` on an avatar and `outline` on a chip map the component tokens to their own slots and paint from the tokens, so there a component token you set wins over the theme. Validation states win over a theme too. ## Surface ladder Breaking **The neutral surfaces are a numbered ladder.** `.bg-body-secondary`, `.bg-body-tertiary`, `.text-body-secondary` and `.text-body-tertiary` are deprecated in favor of ordinal names: `.bg-1` … `.bg-4` for surfaces and `.fg-body`, `.fg-1` … `.fg-4` for the text hierarchy, with two new rungs (`.bg-1`, `.bg-2`) between the body and the old surfaces. The deprecated names render identically and are removed in v7. The tokens moved with them — `--cui-bg-body`, `--cui-bg-1` … and `--cui-fg-body`, `--cui-fg-1` … are canonical, and `--cui-secondary-bg`, `--cui-tertiary-bg`, `--cui-secondary-color`, `--cui-tertiary-color`, `--cui-body-bg` and `--cui-body-color` remain as aliases until v7. No component prop is affected. The deprecated surface names sit two rungs down with the rest of the library: `.bg-body-secondary` renders `--cui-bg-3` and `.bg-body-tertiary` `--cui-bg-2`, while `.text-body-secondary` stays `--cui-fg-2` and `.text-body-tertiary` `--cui-fg-3`. ## Sass - Breaking **A denser spacing scale.** `$spacers` has thirteen steps, `0`–`12`: `.25 / .375 / .5 / .75 / 1 / 1.25 / 1.5 / 1.75 / 2 / 2.25 / 2.5 / 3 rem` from `1` (v5: `.25 / .5 / 1 / 1.5 / 3`). Every spacing, gap, space and gutter utility changes value under the same number, and so do the numeric `gutter`, `gutterX` and `gutterY` values of `CRow`; the v5 steps map to v6 as `1`→`1`, `2`→`3`, `3`→`5`, `4`→`7`, `5`→`12`. `p-3` becomes `p-5`, `mb-4` becomes `mb-7`, `` becomes a gutter of `5`. Components keep their size, cards aside (see `CCard`): their tokens read the stops that carry the v5 values. Breaking **The neutral ladder is three maps.** `$theme-bgs`, `$theme-fgs` and `$theme-borders` in `scss/_theme.scss` replace the `$fg-*`, `$bg-*`, `$border-subtle`, `$border-muted` and `$border-emphasized` scalars. `:root` emits every entry as `--cui-bg-{key}`, `--cui-fg-{key}` or `--cui-border-{key}`, and the `.bg-*`, `.fg-*` and `.border-*` utilities are generated from the same maps. `$border-color` stays a scalar — it is the default every component reads, not a rung. Override an entry instead of a variable: ```diff - $bg-body: #000; - $fg-body: #111; + $theme-bgs: ("body": #000); + $theme-fgs: ("body": #111); ``` Breaking **`$enable-important-utilities` and `$enable-negative-margins` are gone.** Utilities carry no `!important` and there is no switch to bring it back — they are emitted in the last cascade layer, so they already beat every component; if your own CSS sits outside a layer and has to lose to utilities, move it into `@layer custom`. Negative margins are no longer a switch over the whole scale: the `$negative-spacers` map ships two inline steps, so `.me--1`, `.me--2`, `.ms--1` and `.ms--2` are always available. Breaking **`$grid-gutter-width` is `$grid-gutter-x`, and `$grid-gutter-y` joins it.** The row gutter still defaults to `0`, so `` and `` render as before unless you set it; `$grid-gutter-width` stays as a deprecated alias of `$grid-gutter-x` until v7 — set the new name, the alias only reads. Breaking **`$font-sizes` sets a line height per stop instead of one value for all headings.** `xs` is 1.25, `sm` … `lg` the body leading, `xl` 2.5⁄1.75, `2xl` 3⁄2.25, `3xl` 1.2, `4xl` and `5xl` 1.1, `6xl` 1 — the larger the type, the tighter the leading. The sizes are unchanged, so headings keep their size and change their leading: `` and every `h1`–`h6` follow their stop through `--cui-line-height-*`. Breaking **Every shadow is a stack of two to four layers with a negative spread** instead of one wide blur, so a raised surface reads as lifted rather than smeared. Components that draw a shadow — ``, ``, ``, `` — pick this up with no change of yours. `.shadow-xs` and `--cui-box-shadow-xs` are new, and a custom `$shadows` entry is now a comma-separated list of layers. **New: `.w-1` … `.w-12`**, one `$spacer` per step from the `$sizes` map, next to the percentage width utilities. **New keys in `$zindex-levels`: `menu`, `drawer`, `dialog`**, on the same values as `dropdown`, `offcanvas` and `modal`, so ``, `` and `` read their own `--cui-z-*` token and `.z-menu`, `.z-drawer` and `.z-dialog` join the utilities. The legacy keys stay; both spellings of a pair resolve to one number. ## Breakpoints Breaking **The three largest breakpoints move and the largest is renamed.** `lg` is `1024px` (was 992), `xl` `1280px` (was 1200) and the top tier is `2xl` at `1536px` (was `xxl` at 1400); `xs`, `sm` and `md` are unchanged. `` grows with them: `1200px` at `xl` (was 1140) and `1440px` at `2xl` (was 1320). Every prop and prop value that named the top tier is renamed. `2xl` is not a valid JSX attribute name, so the four grid-shaped props are passed with a spread: ```diff - + - + - + - + ``` The props that take a breakpoint as a *value* change without ceremony: | Component | Prop | Before | After | | --- | --- | --- | --- | | `CCol`, `CRow`, `CContainer`, `CPlaceholder` | the tier itself | `xxl` | `'2xl'` | | `CDialog`, `CModal` | `fullscreen` | `"xxl"` | `"2xl"` | | `CDrawer`, `COffcanvas` | `responsive` | `"xxl"` | `"2xl"` | | `CDropdown` | `alignment` | `{ xxl: 'end' }` | `{ '2xl': 'end' }` | | `CHeader`, `CNavbar` | `container` | `"xxl"` | `"2xl"` | | `CNavbar` | `expand` | `"xxl"` | `"2xl"` | | `CListGroup` | `layout` | `"horizontal-xxl"` | `"horizontal-2xl"` | | `CTable` | `responsive` | `"xxl"` | `"2xl"` | | `CMenu`, `CPopover`, `CTooltip` | `placement` | `"xxl:top"` | `"2xl:top"` | `CIcon`'s `size` is not a breakpoint and keeps every value it had — `size="xxl"` is unchanged. ## Components ### The `visible` family - **`visible` is deprecated in favour of `defaultShow` / `show` / `onShowChange`** on `CAlert`, `CDialog`, `CDrawer`, `CDropdown`, `CMenu`, `CModal`, `COffcanvas`, `CPopover`, `CSidebar`, `CToast` and `CTooltip`. The old prop was semi-controlled: it fed the internal state, but the component still closed itself, so the prop and reality desynchronized on the first Escape or backdrop click — a confirm-before-close dialog or a pinned tooltip could not be built on it. The new props say which mode is which: - `defaultShow` — the uncontrolled starting point, read once on mount. - `show` — controlled. The component renders exactly what you pass; close and trigger gestures (Escape, a backdrop or outside click, the dismiss button, hover, the autohide timer) only call `onShowChange`, so it has to be fed back. - `onShowChange` — fired with the requested state in both modes. `visible` keeps its old behaviour unchanged, is ignored when `defaultShow` or `show` is set, and is removed in v7. - **`show` replaces `visible` on the purely controlled components too** — `CCollapse`, `CTabPane`, `CTabPanel` and `CBackdrop` take `show`, and `visible` stays as a deprecated alias that loses to it. These never owned their state, so nothing changes in behaviour; the library speaks one word for the same thing. - **`CSubmenu` takes `defaultShow` / `show` / `onShowChange`** in place of its `visible`, which was a seed the submenu silently overwrote on hover; a submenu can be controlled now. - Breaking **`CNavGroup` moves to `defaultShow` / `show` / `onShowChange`, and `show` is purely controlled** — a group given `show` renders what the prop says and the toggler only calls `onShowChange`, so a bare `show` without the callback freezes the group. An expand-by-default `visible` maps to `defaultShow`. `visible`, `defaultVisible` and `onVisibleChange` stay as deprecated aliases; the function form of `toggler` receives `{ show }` (with `visible` still present). - **`CToaster` renders the toasts of a store as controlled** — each one takes `show` from its `open` flag, and the close button and the autohide timer go through `toaster.close(id)`. ### Controlled value props Breaking **The value and state props are fully controlled when set** — the same contract the `visible` family moved to, applied to the props that hold a component's value. They used to be semi-controlled: the prop fed the internal state, but the component still wrote to it, so the prop and reality desynchronized on the first user interaction. Now the component renders exactly what you pass, an interaction only calls the callback, and nothing moves until you feed the change back — a bare value prop without its callback freezes the control. Code that passed one as an initial value migrates to the new `default*` twin, which seeds the uncontrolled state once, on mount: | component | controlled prop | uncontrolled seed | | --- | --- | --- | | `CAutocomplete`, `CMultiSelect` | `value` | `defaultValue` | | `CButton` (toggle mode) | `active` | `defaultActive` | | `CChip` | `selected` | `defaultSelected` | | `CDatePicker` | `date` | `defaultDate` | | `CDateRangePicker` | `startDate`, `endDate` | `defaultStartDate`, `defaultEndDate` | | `CPasswordInput` | `showPassword` | `defaultShowPassword` (with the new `onShowPasswordChange`) | | `CRangeSlider` | `value` | `defaultValue` | | `CSmartTable` | `sorterValue`, `columnFilterValue`, `globalFilterValue`, `activePage`, `itemsPerPage`, `selected` | `defaultSorterValue`, `defaultColumnFilterValue`, `defaultGlobalFilterValue`, `defaultActivePage`, `defaultItemsPerPage`, `defaultSelected` | | `CTimePicker` | `time` | `defaultTime` | - **`CAutocomplete`, `CMultiSelect`: the per-option `selected` flags are a seed**, ignored entirely when `value` or `defaultValue` is set, and they no longer re-apply on later renders of the same option. In `CAutocomplete` a flag applies once, when its option first appears. In `CMultiSelect` it applies only to the options the component starts with: options that arrive later never change the selection, and `resetSelectionOnOptionsChange` empties it and takes the marked options when the values change. With `value` set the reset only requests the empty selection through `onChange`. A native reset of the form with `value` set requests the first `value` through `onChange`; it used to leave the controlled selection to you. - **Form controls answer a native form reset the same way, controlled ones included.** `CAutocomplete`, `CChipInput`, `CCombobox`, `CDateInput`, `CDatePicker`, `CDateRangeInput`, `CDateRangePicker`, `CFormRange`, `COneTimePassword`, `CRangeSlider`, `CRating`, `CTimeInput` and `CTimePicker` with a controlled value used to keep it on a reset; they now ask for the value they started with through their change callback and show your value until you take it, so a page that resets its own state from the form's `reset` gets that request after its handler. `CRangeSlider` and `CFormRange` now call `onChange` when an uncontrolled reset moves the value, and `CStepper` keeps the validation marks of a form reset a listener cancels. - **`CSmartTable`: a controlled prop change no longer echoes its own callback.** Passing a new `sorterValue` used to fire `onSorterChange` back at you (and likewise for the other five); the callbacks now fire only when the user acts. The page clamp is a request in controlled mode — when the items shrink below the current page, the table calls `onActivePageChange(1)` instead of moving itself. - **`CLoadingButton`: `loading` is the controlled mode and wins over `timeout`.** While `loading` is set the button never stops the spinner itself and `timeout` is ignored; `timeout` without `loading` is the uncontrolled auto-stop it always was. - **`CButton`: a toggle button's `active` is controlled when set** — a click only fires `onClick` and the pressed state follows your prop; seed an uncontrolled toggle with `defaultActive`. Without either prop nothing changes. - **`CCalendar`: equal re-renders no longer reset the view.** A parent re-rendering with an equal `calendarDate`, `startDate` or `endDate` (a fresh `Date` object holding the same value) used to yank back the navigated month and cancel an in-progress range selection; only a real value change syncs now. Month names also follow `locale` and `monthFormat` changes at runtime. ### Validation state Deprecated **One `validationState` prop replaces the `valid` and `invalid` booleans** on every form control, field and picker, and on `CFormFeedback`. `validationState="invalid"` renders `is-invalid` and sets `aria-invalid` on the control, `"valid"` renders `is-valid`, and any custom state from the `$form-validation-states` Sass map renders `is-{state}` — two independent flags could neither express a third state nor refuse `valid` and `invalid` at once. On the components that had them in v5 the booleans keep working as deprecated aliases (with both set, `invalid` wins, where they used to stack), and are ignored whenever `validationState` is set; `CCheckbox`, `CChipInput`, `CCombobox`, `CDateInput`, `CDateRangeInput`, `CNumberInput`, `CRadio`, `CSwitch` and `CTimeInput` take only `validationState`. Four side effects worth knowing: - `feedback` follows the state: it renders only while `validationState` is set, styled after it, and describes the control in every state, not only the invalid one. - Every control that reads `validationState="invalid"` now sets `aria-invalid="true"`, except `CCombobox`, whose toggle is a button and takes only the message in `aria-describedby`; a control without a validation state still sets none. - Breaking `validationState="invalid"` (or the deprecated `invalid`) blocks the submit on `CFormInput`, `CFormSelect`, `CFormTextarea`, `CNumberInput`, `CPasswordInput`, `CCheckbox`, `CRadio`, `CSwitch`, `CFormCheck` and `CFormSwitch`, with the text of the invalid feedback as the browser's message, the way it already did on the fields that build their own markup. Each control calls `onValidationStateChange(undefined)` when the user changes its value or the form is reset; pass your state setter there (with the deprecated `invalid`, set it to `false` there instead), or a form you gave an invalid state stays blocked until you clear it yourself. See [Validation](https://coreui.io/react/docs/forms/validation/#custom-validation). - Breaking `CMultiSelect`, `CChipInput`, `CCombobox`, `COneTimePassword`, the date and time fields, the pickers and `CAutocomplete` take and show their validation state the same way, described under [Form components](https://coreui.io/react/docs/forms/validation/#form-components). A field a validation reports shows the state on the component's frame, and `` and `CStepper` leave the field that carries the value to the component. After taking the result over with `preventDefault()` in `onValidate`, keep `event.isValid` rather than calling `checkValidity()`: the call reports every invalid field again, and the components then show their error. ### Help text and feedback ids **`text` and the feedback get ids of their own.** A form control used to hand its `aria-describedby` to the `text` and to the feedback as their id, so the help text and the error shared one id: the control read the help text and never the error, a valid control with `feedbackInvalid` was described by the hidden error, and an `aria-describedby` that pointed at an element of the page gave that id to a second element. Now `text`, `feedback`, `feedbackInvalid` and `feedbackValid` get generated ids, and the control lists them in its own `aria-describedby` after the one you pass: the text always, `feedback` while `validationState` is set, `feedbackInvalid` only while the control is invalid and `feedbackValid` only while it is valid, whether that state comes from `validationState` or, in a `data-coreui-validate` form, from the browser's `:user-invalid` and `:user-valid` (the date and time fields and the pickers use the field's own verdict instead). A `validationState` you set takes precedence. Pass `aria-describedby` only to point at elements of your own; a value you passed so that the `text` would carry it is no longer needed, and CSS or scripts that found the text by that id need another hook. The pickers drop the undocumented `describedby` prop for the same reason, and `CFormControlWrapper` and `CFormControlValidation` replace it with `descriptionId`, the prefix the ids are built from (`-label`, `-text`, `-feedback`, `-feedback-invalid` and `-feedback-valid`). ### CAccordion - Breaking **The accordion is built on the native `
` and `` elements.** `CAccordionItem` renders a `
` and `CAccordionHeader` its ``, so the browser owns opening, closing, keyboard interaction and the disclosure semantics — none of it depends on the component being mounted. - Breaking **`CAccordionButton` is removed**, together with `.accordion-button`, `.accordion-collapse` and `.collapsed`. The trigger is the `` itself and the panel is the element's own content, revealed through `::details-content`. `CAccordionHeader` already rendered the button for you, so markup written against the components needs no change; custom CSS keyed on those classes does. Style the open state with `.accordion-item[open] > .accordion-header`. - Breaking **`CAccordionHeader` renders a ``, not an `

`.** A `` is not a heading — where the accordion divides a page into sections, wrap the label in an `

`–`

` inside the header. The heading inherits the summary's typography, so nothing looks different. - **Grouping is the `name` attribute.** Without `alwaysOpen` the items of one accordion share a generated `name`, and the browser keeps a single one open. - Breaking **The open items follow the controlled / uncontrolled split the rest of the library uses.** `activeItemKey` fed a `useState` initial value, so it read like a controlled prop and behaved like a default: changing it after mount did nothing, and nothing reported back when the user opened an item. It is deprecated in favour of three props that say which is which: - `defaultOpenItemKeys` — the uncontrolled initial value, where `activeItemKey` maps. - `openItemKeys` — controlled. The accordion renders exactly what you pass, so it has to be fed back from `onChange`. - `onChange` — fired with the new list in both modes. They are named for what an accordion holds. `active` is the vocabulary of a selection — one item out of a set, which is what `CTabs` has — while a `
` element is open or closed, and that is what `CAccordionItem` calls its own prop. All three take a single key as well as an array; an array only opens more than one item under `alwaysOpen`, since the HTML Standard forbids leaving more than one open item in a `name` group. - **New: `onShown` / `onHidden` on `CAccordionItem`**, fired from the element's own `toggle` event — so they report the state whichever path opened the item, including the browser closing a sibling of the same `name`. - **The panel animation is CSS-driven** through `interpolate-size: allow-keywords`, which only Chromium implements today. Elsewhere the component measures the two sizes and the stylesheet times the move, exactly as `CCollapse` does; that part goes away, without a breaking change, once Firefox and Safari ship `calc-size()`. - **The indicator can be an element.** Put a node carrying `accordion-icon` in the header and it replaces the chevron the header draws for itself; a second one marked `accordion-icon-active` is swapped in while the item is open. - **New: `theme` on `CAccordion`** tints the open item. Closed items are untouched, so it marks what is expanded rather than recoloring the control. - Breaking **`CAccordionItem` takes `open`, and `visible` is deprecated.** The item renders a `
` element and that is what the attribute is called there, so the prop no longer carries a second word for the same state. It is also the controlled form for a single item, for the cases `openItemKeys` does not cover; `visible` keeps working. - **A collapsed item stays findable.** `
` keeps its content searchable and the browser expands the item on a find-in-page match, so the accordion needs no counterpart to `CCollapse`'s `hiddenUntilFound`. ### CAlert - **`dismissible` is no longer required to position a close button.** An alert makes room for a `` rendered as its direct child and positions it on its own. The prop keeps working and stays the way to get the built-in button. The button has to be a *direct* child to be pushed to the trailing edge — one nested in a wrapper is laid out by that wrapper. - Breaking **`color` applies `.theme-{color}`, not `.alert-{color}`.** The two emit a byte-identical block of `--cui-theme-*` declarations — the `.alert-*` names survive in v6 only as back-compat aliases, and every other themeable component reads the same class. Markup that still carries `.alert-success` renders exactly as it did; the component just stops generating the older spelling. - Breaking **`variant="solid"` renders `.alert-solid` alongside the theme class, not `bg-{color} text-white`.** The old pair hard-coded white text, which fails WCAG AA on five of the eight theme colors — 1.10 on `light`, where white on near-white is invisible. `.alert-solid` reads the theme's own contrast token, so every color lands above the threshold, including one you define yourself. The value also narrows from `'solid' | string` to `'solid'`; v6 has no other alert variant. - Breaking **The alert lays its children out in a row.** It is `display: flex` with `--cui-alert-gap` between children, so an icon beside a label needs no `d-flex` and no spacing utility. Text mixed with inline elements is unaffected, but an alert built from **several block elements** — a heading, paragraphs, an `
` — now sits side by side. Wrap that content in a `.vstack`. - **An alert rendered with `transition` fades in when it is added to the page**, not only out when it is dismissed. Nothing to change; `@starting-style` supplies the state the animation was missing in that direction. - **An `
` inside an alert takes the alert's border color** rather than the page's neutral grey: the theme's border color, or `--cui-alert-border-color` without a theme, so a separator follows a border you recolored. With `variant="solid"` the border has the surface color, so the separator takes the theme's border color instead. - Breaking **The alert is rounded with `--cui-radius-7` (`.75rem`)**, like the dropdown, popover, toast, dialog, drawer and accordion; v5 used `.375rem`. Set `--cui-alert-border-radius: .375rem` to keep the v5 corners. - Breaking **`--cui-alert-border` is gone.** The border is written in the rule from `--cui-alert-border-width` and the border color, so that a theme can color it. Set those two instead, and `border-style` on the alert for a dashed or dotted line. - Breaking **`.alert-dismissible` is no longer rendered.** The class carries no styling in v6 — the close button is a flex item pushed to the end with `margin-inline-start: auto`, so the alert reserves no extra padding and needs no marker. The `dismissible` prop is unchanged and still renders the button and the self-dismiss behaviour; only the dead class is gone. CSS of your own that targeted it should target `.alert` or the button instead. ### CAutocomplete, CMultiSelect - **`loading` shows a row below the options instead of covering them.** The white cover with a spinner that sat over the options while `loading` was set is gone: the list is marked `aria-busy="true"`, a row with a spinner and the new `loadingLabel` text (`'Loading…'`) shows below the options and is announced to screen readers when the shown list starts loading or the list shows up loading, and the options it shows can still be picked with the pointer and the keyboard. - Breaking **The list inside the panel is a [`CListBox`](https://coreui.io/react/docs/components/list-box/)**, so it carries the `list-box-*` classes: `list-box`, `list-box-options`, `list-box-option` (+`-label`, `-description`, `-indicator`), `list-box-section` (+`-label`), `list-box-empty`, `list-box-header`, `list-box-select-all`, with the `active`, `selected` and `indeterminate` state classes. The panel itself keeps `combobox-popup`. The `combobox-option*`, `combobox-optgroup*`, `combobox-options*`, `combobox-header` and `combobox-all` classes are gone, and so are their `--cui-combobox-option-*`, `-optgroup-*` and `-all-*` properties — theme the list through `--cui-list-box-*`. The former `autocomplete-dropdown` / `autocomplete-option(s)` and `form-multi-select-dropdown*` / `-options*` / `-option*` / `-all*` / `form-multi-selected` classes are gone as well. This markup is generated by the components, so only custom CSS targeting the panel internals needs updating. - Breaking **`selectAllStyle` and `optionsGroupsStyle` are removed from `CMultiSelect`.** One marker serves the whole list: `indicator` decides what the options, the group labels and the select-all button all draw. - Breaking **`role="listbox"` is on `.list-box-options`, not on the panel**, and a group is wrapped in `.list-box-section` rather than being a label followed by loose siblings. In `CMultiSelect` the panel also holds the search field and the select all button, which the old placement claimed as options. - **`onShow` and `onHide` fire once per transition**, and neither fires on mount. `CMultiSelect` used to fire `onHide` every time the menu opened. - Breaking **`CAutocomplete` keeps the selection and the typed text apart.** `value` and `defaultValue` take an option value, compared as text, so `1` and `'1'` select the same option; a string used to be matched against the labels. `value={null}` selects nothing. `onChange` reports an option or `null`, never typed text: text the user types without picking an option stays in the field and is posted under `name`. The text is a state of its own: `defaultInputValue` starts it, `inputValue` controls it, and the new `onInputChange` reports every change, picks included, while `onInput` reports the search the options are filtered by. Enter on text that names no option no longer reports it through `onChange`. From `onChange` store `option.value`, `option.label` for an option without a value, or the string of a plain string option. - **`CAutocomplete` shows the cleaner for typed text** when `allowOnlyDefinedOptions` is off, keeps it out of the Tab order, and leaves the focus in the field after a click. - Breaking **`CAutocomplete` keeps the focus in its input.** The arrows no longer walk the focus into the panel: the input keeps it and reports the highlighted option through `aria-activedescendant`, which the option marks with the `active` class. The input also keeps the keys that belong to its text — Home, End and Space move the caret rather than the highlight. - Breaking **`CMultiSelect` opens a dialog instead.** The panel is `role="dialog"` named by the control, and the focus moves into it: onto the search box when `search` is on, otherwise onto the option the list points at. Options take a roving `tabindex` and the arrows move the focus itself, so there is no `aria-activedescendant` to read any more. Tab cycles through the panel and the search box without leaving them, and Escape closes the panel and hands the focus back to the control. The select-all button is a control over the list rather than a value in it, so it is reached with Tab; selectable group labels are in the arrow order in its place. - Breaking **`CMultiSelect`'s `search` no longer takes `'global'`.** Typing reaches the search box from anywhere in the component by default, which is what that value used to turn on, so `search="global"` becomes `search` and `search={{ external: true, global: true }}` becomes `search="external"`. Set `globalSearch={false}` to keep typing local: the search box then filters only while it has the focus, and a keystroke over the options list jumps to the first option starting with it (with `search="external"` it does nothing, since the list holds only the last results). - Breaking **`CMultiSelect`'s `search` no longer takes an object.** It takes `true`, `false` or `'external'`, so `search={{ external: true }}` becomes `search="external"`. - Breaking **`CAutocomplete`'s `search` takes only `'external'`, and global typing is `globalSearch`, on by default.** `search="global"` goes away: typing on the picker button or in the options panel reaches the field without it. The object form goes too, so `search={{ external: true, global: true }}` becomes `search="external"`. Set `globalSearch={false}` to keep a keystroke where the focus is. The space bar and shortcuts with Ctrl or Cmd stay with the button that has the focus, and a character typed with AltGr or Option reaches the field like any other, in `CMultiSelect` too. - **`CAutocomplete` and `CMultiSelect` read the typed text without the spaces around it**, in the filter, the highlight, the hint, Enter and leaving the field, and `CMultiSelect` creates an option from the trimmed text. A query of spaces lists every option. In `CMultiSelect` the search matches option labels only: a group whose own label matches no longer keeps all of its options, and a group without options is not listed. - **`CMultiSelect` blocks the submit while `validationState` is `'invalid'`**, and asks to drop the state with `onValidationStateChange(undefined)` when the user changes the selection or the form is reset. A native form reset now restores the selection given by `defaultValue` or the options' `selected`. See [Validation](https://coreui.io/react/docs/forms/multi-select/#validation). - **`CAutocomplete` blocks the submit while `validationState` (or the deprecated `invalid`) is `'invalid'`**, and asks to drop the state with `onValidationStateChange(undefined)` when the user changes the text or the form is reset. The frame also shows the state a validation reports for the input, where it used to show only the state you gave. See [Validation](https://coreui.io/react/docs/forms/autocomplete/#validation). - **Keyboard, `CMultiSelect`:** arrow keys skip disabled options. - **Keyboard, `CAutocomplete`:** `ArrowDown` out of the input highlights the first *enabled* option, and `Escape` hands the focus back to the input. A closed field renders `aria-expanded="false"` instead of omitting the attribute. - Breaking **`CMultiSelect`'s search field no longer reaches the server.** The input that filters the options carried a `name` built from the field's own, and a plain text input is serialized, so every form holding a `CMultiSelect` submitted whatever the user had typed to narrow the list. It carries no `name` now and the `search…` key is gone from the payload. - Breaking **An unnamed `CMultiSelect` stays out of the form.** The native select took `name={name ?? uniqueId}`, so a component the page had not named still submitted its value under React's generated id, a key like `:r1:` that nobody chose. The attribute is written only when `name` is given. `CMultiSelectNativeSelect` carried a second fallback of `${id}-multi-select` for the same purpose; it was unreachable through `CMultiSelect` and is gone too. - Breaking **An unnamed `CAutocomplete` stays out of the form too.** Its input took a generated `name` when the prop was not set, so a form carried a key nobody chose. It does not now. The generated `id` is unaffected. - Breaking **`CAutocomplete`'s typeahead hint no longer takes the field's `id`.** With `showHints`, the decorative hint input rendered the same `id` as the real one, so `document.getElementById`, a `label[for]` and the floating label association all resolved to the hint. It carries no `id` now. - Deprecated **CMultiSelect: `selectionType="tags"` is `"chips"`, and `ariaTagDeleteLabel` is `ariaChipRemoveLabel`.** The selection renders [chips](https://coreui.io/react/docs/components/chip/), so the mode carries their name and `"chips"` is the default. `"tags"` renders the same until v7. The old label prop still names the remove button and takes precedence while it is set. - Breaking **CMultiSelect's classes drop the `form-` prefix**, so they carry the component's name like `.autocomplete`, `.chip-input` and `.date-picker`. There is no alias; update CSS that targets them. | v5 | v6 | | --- | --- | | `.form-multi-select` | `.multi-select` | | `.form-multi-select-selection`, `.form-multi-select-selection-tags` | `.multi-select-selection`, `.multi-select-selection-chips` | | `.form-multi-select-search`, `.form-multi-select-placeholder` | `.multi-select-search`, `.multi-select-placeholder` | | `--cui-form-multi-select-selection-tags-gap`, `-padding-y` | `--cui-multi-select-selection-chips-gap`, `-padding-y` | The filled state is `.multi-select-filled`, and the component stylesheet is `@coreui/coreui-pro/css/components/forms/multi-select.css`. - **CMultiSelect: Backspace in the empty search box focuses the last chip.** It removed the last value at once; the first press now moves the focus to the last chip and the second removes it, as in `CChipInput`. The arrow keys move between the search box and the chips, the selection is one tab stop, removing a focused chip moves the focus to its neighbour, and a value removed through a chip, Backspace or the cleaner is announced (`ariaRemovedAnnouncement`). A single select and the `counter` and `text` selections still remove the last value at once. ### CAvatar - Breaking **`textColor` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `className="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **`color` applies a theme class, not a background utility.** It rendered `bg-{color}`, which left the letters on the inherited color and is why the docs paired it with a hand-picked `textColor` — a recipe that failed WCAG AA on five of the six examples they shipped. `.theme-*` supplies the background *and* the color that reads on it, so drop the `textColor` that went with it. A bare `` is a neutral circle instead of a transparent one. - **New: `variant="subtle"`** — a tinted avatar that keeps the theme color in the letters rather than behind them. - **New: `ariaStatusLabel`** names the status indicator, rendering `role="img"` with the label. The indicator is color and nothing else, so a state that carries meaning needs a name; `aria-label` on a bare `` has no role to attach to and may be ignored. Without the property the indicator stays decorative, as before. - **`size` is typed** on `CAvatar` and `CAvatarStack`: `xs`, `sm`, `md`, `lg`, `xl` — the five sizes the stylesheet ships — instead of any string. - The Sass variables behind the size moved: `--cui-avatar-width` / `-height` become `--cui-avatar-size`, and `--cui-avatar-status-width` / `-height` become `--cui-avatar-status-size`. Only inline overrides of those names need updating. ### CBadge - Breaking **`textColor` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `className="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **`color` applies a theme class, not a background utility.** It rendered `bg-{color}`, which in v6 leaves the badge on the inherited text color instead of white — the `.badge-*` namespace carries the variants now, and the color comes from `.theme-*`. The prop is unchanged at the call site; only the class it emits moved. A bare `` is neutral rather than invisible, so a badge that relied on a utility for its background can drop it. - Breaking **`color` no longer takes a gradient.** v6 removes the `bg-*-gradient` utilities the value mapped to. - Breaking **`textBgColor` is gone.** It emitted `.text-bg-{color}`, which resolves to the same two values `color` now supplies through the theme class — `--cui-{color}-contrast` on the text and the colour itself behind it — so the two props had become one. Keeping it was also destructive: `.text-bg-*` ships in the `helpers` layer and writes `color` and `background-color` directly, over the tokens `.badge` reads, so pairing it with `variant="outline"` filled in the background the variant had cleared. Use `color`. - **New: `variant`** — `"subtle"` or `"outline"`, alongside the default solid. - **`size` also takes `"lg"`.** ### CBreadcrumb - Breaking **A step is a padded, hoverable target.** `CBreadcrumbItem` renders `.breadcrumb-link` on the link its `href` produces, and wraps an active step in a `` so every step keeps the same height. To keep the plain text link of v5, render your own link as a child instead of passing `href`. - **New: `CBreadcrumbDivider`** — a separator you put in the markup, carrying whatever you give it: an inline SVG, an icon, a character. An empty one renders the default divider. The automatic `::before` divider steps aside wherever an element is placed, so the two never double up, and the component marks itself `aria-hidden`. - **A step can open a menu.** Wrap the step's content in a `CMenu` whose `CMenuToggle` takes the new `custom` prop, and the toggle behaviour is wired onto your own `.breadcrumb-link` button instead of a `CButton`. See Collapsed items. ### CCalendar - **Changed.** **The range band sits under the day cells and follows the theme.** `--cui-calendar-cell-range-bg` is `--cui-primary-bg-subtle` (the theme's `bg-subtle` under a `.theme-*` class) instead of a 12.5% tint laid over the cells, so the selected start and end keep their solid fill and the day numbers are no longer tinted. A hovered day in the range takes `--cui-primary-bg-muted` (the theme's `bg-muted`), one step stronger than the band. - **Changed.** **`minDate` and `maxDate` are compared by the day.** v5 compared a day cell at midnight with the instant, so a limit that carried a time of day, such as `minDate={new Date()}`, disabled its own day. Now that day can be picked; the date picker's time selects and the field bound the time on it. - **Changed.** **A week row stands for the ISO week that holds most of its days.** With `firstDayOfWeek` other than `1` a row spans two ISO weeks, and v5 numbered it by its last day but picked the week of its first day: a Sunday-first row from August 30 to September 5, 2026 showed 36 and picked `2026W35`, and that value given back as `startDate` did not select the same row. The number, the picked value, the weeks of `startDate`, `endDate`, `minDate` and `maxDate`, and the range and its preview now all follow the row's majority week, so that row is `2026W36` and the picked date is its Monday, August 31, the date `2026W36` stands for. With Tuesday to Thursday first, the numbers move instead, so the row from September 1 to 7 shows 36 where it showed 37. - **Changed.** **In week selection `disabledDates` disables a week only when it disables every day of it**, as it does for a month, quarter or year. Before, a week was disabled when its row's first day was: with Monday first a single disabled Monday disabled its week, and with Sunday first a function that disables weekends disabled every row. A range of weeks across a week that holds a disabled day is kept, as a range of months is. - **Changed.** **In week selection `minDate` and `maxDate` count as whole weeks**, so their weeks can be picked on any first day of the week, as the month, quarter or year of a limit can in those selections, and the months view opens a month only when its page holds a week inside them. Before, a `minDate` later than the first day of its row disabled that row, and with Tuesday to Thursday first a `maxDate` of `2026W36` disabled the row of week 36. - Breaking **`onStartDateChange` and `onEndDateChange` receive the `Date` first**, the same shape the pickers use, and the value formatted per `selectionType` second — a `Date` for day selection but a string for week (`'2026W27'`), month (`'2026-01'`), quarter (`'2026Q1'`) and year (`'2026'`). v5 passed them the other way round. - Breaking **`CCalendar` no longer reports a date that stays empty.** Picking a day before the start of a range, or an end across a disabled day, used to call `onEndDateChange(null)` although no end had been picked, and clearing a range across a disabled day before a start was picked called `onStartDateChange(null)`. A day picked again is still reported, as in the Vue library. - Breaking **`selectAdjacementDays` and `showAdjacementDays` are spelled `selectAdjacentDays` and `showAdjacentDays`** on `CCalendar` and every picker built on it. The typo is fixed in the vanilla and Vue libraries in the same release. - Breaking **`onDateHover` is gone** from `CCalendar`, `CDatePicker` and `CDateRangePicker`, as `cellHover` is from the vanilla calendar. It served the hover preview in the field, which went with `previewDateOnHover`. To follow the pointer or the focus over a `CCalendar`, listen for `mouseover` or `focusin` on an element that wraps it: each day, month, quarter and year cell the calendar shows carries its date in `data-coreui-date`, in the `toDateString()` form, and a week row carries it on the day cells it shows. Unlike the event, the listeners also see cells that cannot be picked, and only `mouseout` or `focusout` tells that the pointer or the focus left. The pickers have no replacement for it. - Breaking **Each grid is one tab stop, and `tabindex` no longer marks a selectable cell.** The arrows, `Home`, `End` and the page keys move within a calendar and Tab leaves it, which is what `role="grid"` promises. Every cell inside `minDate` / `maxDate` can take the focus, also one that cannot be picked: the keys stop on a date in `disabledDates` instead of skipping it, a screen reader announces it as unavailable, and Enter and Space do nothing there, so a month where nothing can be picked is explored like any other. A selectable day, month, quarter, year or week row carries `data-coreui-selectable`, and `tabindex="0"` sits on one cell per grid, so a two-month range picker keeps a stop in each month that reaches into the limits. Custom CSS or scripts that reached for `.calendar-cell[tabindex="0"]` need `.calendar-cell[data-coreui-selectable]`. - Breaking **`navigation` and `navYearFirst` are gone** from `CCalendar`, `CDatePicker` and `CDateRangePicker`. With `navigation={false}` the month and year buttons stayed on screen but did nothing; the arrows are always there now. To hide them, hide `.calendar-nav-prev` and `.calendar-nav-next` in your CSS. The month and year buttons still open the months and years views; to keep the calendar on the month you set, hide `.calendar-nav` and give the month a heading of your own. The order of the year and the month follows the locale instead of `navYearFirst`: the year comes first in locales that write it first (for example Japanese, Chinese, Korean, Hungarian or Lithuanian). - Breaking **The calendar's classes and data attributes are the vanilla calendar's.** A panel is `.calendar` without the view class (`days`, `months`, `quarters`, `years`) and carries its position in `data-coreui-calendar-index`; the view is named on the cell content instead (`.calendar-cell-inner.day`, `.month`, `.quarter`, `.year`), and quarter and year cells no longer carry `quarters` / `year`. The navigation buttons carry `btn-double-prev`, `btn-prev`, `btn-month`, `btn-year`, `btn-next` and `btn-double-next`, and `data-coreui-selectable` is empty instead of `"true"`. A rule that styled a panel by its view needs `.calendar:has(.calendar-cell-inner.month)` instead of `.calendar.months`, and one that styled `.calendar-cell.quarters` or `.calendar-cell.year` needs `.calendar-cell:has(> .calendar-cell-inner.quarter)` or `.year`, since the cell states (`selected`, `range`, `disabled`) stay on the cell. - Breaking **Setting `calendarDate` to `null` keeps the month on screen.** v5 moved the calendar back to today; to show today, pass today's date. An empty `calendarDate` (`null` or `''`) at mount no longer opens the calendar on today: it opens on `startDate` or `endDate`, as when `calendarDate` is left out; v5 opened on today for `null`. - **`onViewChanged` is deprecated in favour of `onViewChange`**, the tense every other callback uses; both fire while the old name is set. - **The grid answers the full APG keyboard model.** On top of the arrows: `Home` / `End` move within the focused week, `Page Down` / `Page Up` move a month at a time (a year in the months and quarters views, the twelve years of a page in years), and `Shift` with either moves a year in the days view. A jump never lands outside `minDate` / `maxDate`: focus stops on the limit, also when that date cannot be picked. Every cell carries its own `data-coreui-date`. - **`selectionType="week"` is reachable from the keyboard.** The day cells take no focus in that mode because the row is what gets picked, and the row itself was not a tab stop — so the grid had none at all and week selection was mouse-only. The rows are tab stops now, and `Home` / `End` move to the first and last week of the month. - **Picking a date keeps the months on screen.** A picked day of an adjacent month (`selectAdjacentDays`) used to turn the calendar to that month, and so did any pick the parent passed back through `startDate`: a start date picked in the second month of `CDateRangePicker` shifted both months by one. A picked day of an adjacent month now shows as selected with an outline on a subtle background instead of the solid fill. The view still follows `calendarDate`, and without it a start date the parent changes to a new instant, the day already selected included (a Today button after browsing); it stays for the calendar's own picks passed back before the view moves and for the same instant passed again. An end date moves it while no start date is set, unless the calendar already holds that end. - A selected day or week keeps its colour under the pointer, a shade darker (`--cui-calendar-cell-selected-hover-bg`, `--cui-calendar-cell-selected-hover-color`); it used to take the hover colour until the pointer left. - The range preview no longer stays on the date just picked, and in week selection it no longer drops while the pointer crosses a day of the adjacent month inside the row it previews. - In the years view the navigation names the page it shows, `2020 – 2031`, instead of the one year the page is built around, so turning a page is announced as the new range. The grid label and the navigation write the range in the locale's own digits. - In the years view the double arrows and `Page Down` / `Page Up` turn the calendar by the twelve years a page shows instead of ten, so a turn no longer repeats two years of the previous page. - In the years view the year button goes back to the view that picks the date instead of doing nothing, and it is disabled in year selection, where the years view is the one that picks. - Without `weekNumbersLabel` the week-number column is named for screen readers with the locale's word for week, in a visually hidden span; before, its header was empty. Each week number is named the same way with its number (`Week 36`), and the new `ariaWeekNumberLabel` prop takes a function of the week number to name it yourself. - Breaking **The years view names its double arrows with new `ariaNavNextYearsLabel` / `ariaNavPrevYearsLabel` props** (`'Next 12 years'` / `'Previous 12 years'`) instead of the year labels, which stay on the days, months and quarters views. A page that translates `ariaNavNextYearLabel` / `ariaNavPrevYearLabel` needs to translate these two as well. - **A grid in which nothing can be picked is described by the new `ariaNothingToPickLabel` prop** (`'Nothing on this page can be picked'`), also announced when the calendar turns to such a page, so a page that translates the other calendar labels translates this one too. - **A pick is announced through the new `ariaSelectedDateAnnouncement` and `ariaSelectedRangeAnnouncement` props** (`'Selected date: {date}'`, `'Selected range: {start} to {end}'`); before, picking a date with Enter left a screen reader silent. A page that translates the other calendar labels translates these two as well. - The toggle of `CDatePicker` and of `CDateRangePicker` is named with the value the picker holds (`Toggle calendar, Friday, August 14, 2026`), so a screen reader reads the picked date when the popup closes and focus goes back to it. - The month and year between the navigation arrows are no longer a live region. A page turn is announced through `announce()`, inside the panel of a date picker when the calendar sits in one, and a key that leaves a day or a week row names no page, since the date that takes focus names it: a key that moved from August 31 to September 1 used to be read twice, as the date and then as `September 2026`. - A locale whose own calendar has different months (Persian by default in `fa-IR`, or an Islamic, Hebrew or Chinese calendar asked for with `-u-ca-`) now shows the calendar in the Gregorian calendar, in its own language and digits. The grid was always Gregorian, so `fa-IR` used to show September 1, 2026 as the 10th of Shahrivar 1405 and name the January cell Dey. Calendars that share the Gregorian months, such as Thai Buddhist or Japanese, keep their year numbering in the calendar. The date field lays out and reads Gregorian numbers for every locale, without the locale's era. - Breaking **A cell drawn by `renderDayCell` no longer gets an `aria-label`**, so its content is what a screen reader reads. Every render prop receives the cell's full name as `meta.label` (`Wednesday, August 12, 2026`, `August 2026`, `Q3 2026`, `2026`); put it in the cell, for example in a `visually-hidden` span next to a short visible label marked `aria-hidden="true"`. Day cells the calendar draws itself announce the full date with the weekday instead of the short numeric date (`8/12/2026`), which also leaves their `title` tooltip, and in week selection the row that takes focus is named by the days it spans (`August 10 – 16, 2026`), after its week number when week numbers are shown (`Week 33, August 10 – 16, 2026`), instead of reading out all seven. - `renderDayCell` receives `isToday: false` for the copy of today among an adjacent month's days, which takes neither the `today` class nor `aria-current="date"` either, and in day selection `isInRange: false` for a day among an adjacent month's days that only fills the grid, which the range is not drawn on. With `selectAdjacentDays` the range and its hover preview are now drawn on the adjacent month's days as well, and `isInRange` stays `true` for them. - A cell that cannot be picked carries `aria-disabled="true"`: a day outside `minDate` / `maxDate` or in `disabledDates`, a week row, month, quarter or year outside the range, and in day selection a day among an adjacent month's days unless `selectAdjacentDays` is on. Such an adjacent day is no longer `aria-selected` either, and `renderDayCell` gets `isDisabled: true` and `isSelected: false` for it, so the copy of a picked date that fills the next panel reads as unavailable filler. - With `range`, the grid of the view that picks the range is `aria-multiselectable`, and every day, week row, month, quarter or year of the selected range that can be picked carries `aria-selected="true"`, not only its two ends, so a screen reader announces the ones in between as selected. The months and years views of a day range only navigate and keep it on the ends, and `isSelected` still marks only the ends. - In week selection, `renderDayCell` gets the `isDisabled`, `isInRange` and `isSelected` of the day's week row, the way the calendar draws it: every day of a selected week is `isSelected`, every day of a week in the range is `isInRange`, and a day is `isDisabled` only when its row cannot be picked. Before, each field described the day alone, so a selected week reported only the day holding its start or end date as selected. - A year below 100 stays as written: a calendar on December of year 99 draws the days of year 99, where it drew 1999, and its next panel shows January of year 100, where it showed January 2000. The month, quarter and year views, the arrow keys and paging keep the year the same way. Years before 1 cannot be picked, as dates before `minDate` cannot: their cells are disabled, and the arrow keys and paging stop at 1 January of year 1. - A year string written in four digits keeps its year: `0026-05`, `0026W05`, `0026Q2`, `0026` and `12/31/0099` given to the calendar or a picker stand for the years 26 and 99, where they became 2026 and 1999. Two digits still expand to the century within 50 years of today. The value reported for week, month, quarter and year selection writes the year in at least four digits (`0026-05`, where it was `26-05`), so it reads back as the same year. ### CCallout - **New: `theme`.** It sets the color context and renders a `.theme-*` class, so the callout also picks up a theme class placed on any element above it. The class colors the leading edge and tints the border. - Deprecated **`color` still works and is removed in v7.** It renders the same `.theme-{color}` class as `theme` and loses to `theme` when both are set, so the modifier classes the component used to emit (`.callout-{color}`) are gone from its output. - **A callout without a color no longer draws its leading edge in `currentColor`.** The class read a custom property that only the color modifiers declared, so on a bare `` the declaration was invalid and the property fell back to its initial value. It now defaults to the callout's own border color. - **The 1px border of a colored callout is tinted** instead of staying neutral. The leading edge is unchanged. ### Deprecated color classes - **`.alert-{color}`, `.btn-{color}`, `.btn-outline-{color}`, `.btn-subtle-{color}`, `.btn-ghost-{color}`, `.callout-{color}`, `.chip-{color}` and `.list-group-item-{color}` ship in [`coreui-legacy.css`](https://coreui.io/react/docs/customize/optimize/#v5-compatibility-css), not in the component stylesheets.** The components render theme classes now, so none of them emit those spellings — the sheet only serves markup you wrote by hand. Import it while you still need it, and drop it once your markup uses the theme classes. They are removed outright in v7. - **The `color` property renders the theme classes.** `` renders `btn btn-solid theme-primary` rather than `btn btn-primary`, so an app that has not moved off `color` keeps its styling without loading the legacy sheet. - **`CFormCheck` and `CFormSwitch` import `coreui-legacy.css` themselves.** They render the v5 `.form-check` markup by design; the sheet comes with them, so nothing changes for you. ### CCard - Breaking **`textColor` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `className="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **A card is roomier, rounder and framed in the solid border colour.** `--cui-card-spacer-y` / `-x` go from `1rem` to `--cui-spacer-6` (`1.25rem`) and the image-overlay padding follows them. `CCardHeader`, `CCardFooter` and a `CListGroup` placed directly in the card take `--cui-card-spacer-x` as their inline padding, so their text lines up with the body; the header and footer keep `.5rem` of block padding. The border reads `--cui-border-color` instead of `--cui-border-color-translucent`, except on a `translucent` card, and the radius is `--cui-radius-7` (`.75rem`; v5 used `.375rem`). A card filled with `textBgColor` or `color` keeps that neutral frame; add the matching `border-` class to frame it in the fill colour. To keep the v5 look, set `--cui-card-spacer-y` and `-x` to `var(--cui-spacer-5)` and `--cui-card-border-radius` to `.375rem` on the card. - Breaking **`CCardLink` is removed.** `.card-link` is gone from v6 — it existed to space sibling links with an inline margin, which only worked while they were inline, and `.card-body` is a flex column with `--cui-card-body-gap` now. Wrap the links yourself: `
`. - Breaking **`.card-body` is a flex column.** It spaces its children with `--cui-card-body-gap` and zeroes their block margins, so nothing in a card needs `.mb-*` any more. Two consequences for existing markup: a direct child takes its natural width rather than filling the card — add `.w-100` where a block child has to stretch — and `text-align` no longer moves a button or a link, because they are flex items. Use `.mx-auto` or `.ms-auto` instead. - **Stacked sections are divided by a single rule.** A ``, a list group or a bottom image that follows a top image, a body or a list group draws a divider above itself in the card's own border, so two bodies in a row, or an image above a body, no longer sit with nothing between them, and a border utility or a theme on the card carries over to every divider. A section hidden with `hidden` or `.d-none` does not count. `` and `` draw their own divider, as before. - **`` squares the corners at each seam along the writing direction.** The rules named the physical corners, so a right-to-left group squared its outer corners and rounded the ones that meet. A list group at the edge of a grouped card is squared like the other sections. - Breaking **`color` no longer takes a gradient.** v6 removes the `bg-*-gradient` utilities the value mapped to, so the `Gradients` union is gone from the prop's type. Reach for `.bg-gradient` alongside the color if you want the sheen. - **`style` on `CProgress` lands on the track.** It used to travel to the bar with the other attributes; now it stays on the `.progress`, as it does in the Vue edition, so the segment and gradient variables set there reach the mask and the bar alike. The other HTML attributes still go to the bar. - **Gradient bars.** `--cui-progress-bar-bg-image` paints the bar with an image over its colour, so a gradient is one variable in `style`; stripes layer over it and have their own `--cui-progress-bar-stripes` and `--cui-progress-bar-stripe-color`. - **`segmented` and `segments` on `CProgress`.** The track becomes a row of rounded segments — `--cui-progress-segment-min-width` wide and `--cui-progress-segment-gap` apart, or at most `segments` of them — and the bar fills whole segments only, recounted as the track resizes. Corners come from `--cui-progress-segment-border-radius`. - Breaking **`.card-header-pills` is gone.** It pulled the pill row out to the header's padding edge, which is wrong for pills — they carry their own background, so flush against the inner edge they touch the border. Drop the class from ``. - Breaking **`` attaches from a container query, not a media query.** The `sm` breakpoint is the width of the nearest query container, not the viewport. Mark an ancestor with `.contains-inline`; without a container the query has nothing to read and the cards stay stacked at every width. The same applies to `` with `layout="horizontal-*"`. - **New: `theme`** paints the card's frame and caps with a theme color, with contrast text in the header and footer; the body keeps the card background. It is a different axis from `color`, which still applies the `bg-{color}` utility across the whole surface, and from `textBgColor`. Put the class on a single section — `` — and only that section follows it. - **New: `variant="subtle"`** swaps the solid fill for the theme's subtle background and border, and **new: `translucent`** blurs whatever is behind the card and thins the caps to match. They are independent — `.card-subtle` and `.card-translucent` combine — which is why `translucent` is a boolean of its own and not a second `variant` value. - **New: `layout="row"`** lays a card out along the inline axis, with `` for an image cap on either side. It replaces the `` + `` recipe, which needed a wrapper per section and drew no divider between them. ### CChip, CChipSet, CChipInput - Breaking **`CChipInput` carries its chips in a hidden `