Vue Components

Daily log of changes to the Vue components. Entries are grouped by merge date and list the components affected.

Breaking changes are flagged with a 🚨 Breaking badge and include a short migration note.

2026-06-09

list, calendar, drawer, fileupload, phoneinput, dateslider, multiselect — type-only symbols (HTMLAttributes, Ref, ComputedRef, DateRange, DateValue, ChunkOptions, VueUploadItem, …) are now imported with import type / inline type. They were previously imported as runtime values, which compiles under a lenient setup but breaks the build under verbatimModuleSyntax: true (now the default in recent create-vue / @vue/tsconfig scaffolds) with TS1484. No API change — import-only fix. If you reached into these components and copied an import { DateRange } from radix-vue, note that radix-vue exports it as a type only; use import { type DateRange } rather than re-declaring it.

input — forwards native HTML attributes (autocomplete, name, required, …) to the inner <input> so they bind to the actual form field instead of being absorbed by the wrapper element.
phoneinput — same forwarding pattern applied to the nested <Input>, so callers can pass autocomplete="tel" and the like and have them reach the right element.

badge — removed the extra-one … extra-seven ad-hoc variants (and their subtle compound variants). Migration: switch to one of the standard variants (brand, informative, highlight, …) or define the extra colours in your project's components config.

multiselect — new moreText prop to customise the "+N more" overflow label.
timepicker — lazy prop fixed: the model is now updated only on commit when lazy is on, instead of leaking every intermediate keystroke.

timepicker — when the picker opens, the validated value typed manually is now scrolled into view and centered inside the dropdown.

datepicker — fixed: the picker was incorrectly disabled while in editable mode; the segmented input now syncs the initial value correctly. Layout classes that used to be hard-coded inline have been moved to the component config so projects can override them.

datepicker — rewritten on top of reka-ui's DateFieldRoot / DateFieldInput for proper native date segments instead of manual input masking. New editable prop; locale is now driven by the locale prop (falls back to en-GB for dd/mm/yyyy, en-US otherwise). Internally now uses PopoverAnchor instead of PopoverTrigger to preserve keyboard navigation in editable mode. Migration: reka-ui becomes a peer dependency; if you reached into the previous DateInput-on-top-of-Input internals you'll need to update.

timepicker — fixed: the HH (24h) and hh (12h) format tokens were swapped and now match the standard convention. Projects using either token will format correctly without code changes.

calendar — new captionLayout prop ("default" | "dropdown") with month/year dropdowns in dropdown mode, default year range of ±100 years, reactive placeholder.
datepicker — picks up the new calendar internals and related navigation tweaks.

popover — customWidth prop renamed to fullWidth and the semantics are inverted. Before, the popover width defaulted to the configured popoverConfig.width; now it sizes to its content by default and only stretches to the configured width when fullWidth is true. Migration: drop customWidth={false} (matches the new default); replace customWidth={true} with no prop, or pass fullWidth if you want the popover to stretch to the trigger width.
select, multiselect — new fullWidth prop (non-breaking) so the listbox can stretch to the trigger.
multiselect — fixed wrong React import that was breaking SSR builds.

datepicker — the dropdown caption now shows the year next to the month name; truncate regression fixed on the trigger label; typo fixes in the iconset and DatePresetsTrigger.vue.

actionbar — default value fix: when the consumer doesn't pass an explicit prop, the component now falls back to the internal isLg breakpoint check instead of a stale hard-coded default.