--- url: "https://vueda.dev/v3/reference/api/vue/index.md" title: "Vue Components" --- # Vue Components ## Views ### [`_ActionBanner`](/v3/reference/api/vue/_ActionBanner.md) ### [`ActionForm`](/v3/reference/api/vue/ActionForm.md) Form shell that executes a server action, handles dry-run validation, shows success/error toasts, and provides confirm and cancel button slots. Renders a pinned actions strip (confirm + cancel + optional hint) below the form, or, with the `page` prop, a sticky action bar above it. When the form has per-field errors that no rendered field shows beside itself, it also renders a structured validation alert sourced from `formContext.state.errors`. The alert sits with the non-field error block above the fields, so a reader meets it before the first field and the submit control. Also mounts a `FormConfirmDialog` bound to the action's confirmation controller, so actions the server gates behind warning acknowledgement (HTTP 409) can be confirmed and retried. `ActionForm` renders no warnings content of its own; a consumer that needs to render them (e.g. a bulk action grouping per-object warnings by their display name) supplies the `form-confirm-dialog-warnings` slot, which forwards FormConfirmDialog's `warnings` slot scope (`warnings`, the controller's raw warnings mapping). Without that slot, `FormConfirmDialog`'s own default rendering shows through. ### [`AuthForm`](/v3/reference/api/vue/AuthForm.md) Renders a page-level authentication form with a title, subtitle, and action slot. Delegates the form submission to an inner ActionForm. By default the form's action needs a recent session, so a pending reauthentication flow sends the user to the reauthenticate route. That flow belongs to the whole session, not to this form. Set `requireRecentAuth` to `false` for a form whose action the server accepts without a recent session. ### [`AuthorizingForm`](/v3/reference/api/vue/AuthorizingForm.md) Authentication wrapper that monitors login state and redirects the user after a successful sign-in, rendering a header, subtitle, and delegating to ActionForm for the actual credential form. ### [`DetailView`](/v3/reference/api/vue/DetailView.md) Renders a full detail page for a single model instance, including a page title, a sticky action bar with available object actions and workflow transitions, and a FormModel that displays or edits the object's fields. Fetches the object from the API automatically using the provided app, model, and pk props. ### [`ModelActionForm`](/v3/reference/api/vue/ModelActionForm.md) Wraps `ActionForm` to execute a named action (such as delete or a custom bulk operation) against one or more model instances. It displays the selected objects, a confirmation message, and handles submission, dry-run validation, and post-action redirect to the appropriate list or detail view. Renders a tone-tracked confirmation card with a banner, a selected-objects chip-row panel, and a confirm-prompt panel. The `page` prop renders the same parts as a routed page instead: the confirm button moves into the sticky action bar and the parts sit in the page gutter, as the detail views lay out a page. The action views and `ViewDestroy` set `page`. The `bare` prop suppresses the card chrome and banner, for a host that wraps the form in a card of its own. ### [`ViewAction`](/v3/reference/api/vue/ViewAction.md) Full-page view for executing a model action. Renders a page title with a "Go Back" button and embeds a ModelActionForm for the specified app, model, and action. Accepts an optional primary key and initial form values to pre-populate the form. ### [`ViewActionNotFound`](/v3/reference/api/vue/ViewActionNotFound.md) Error view displayed when a requested model action route does not exist. Composes `SystemMessageCard(tone="info")` with a "404" crest showing the unrecognized `app/model/action` key, a `TriedUrlCallout` highlighting the action segment as the error, a `SuggestionList(shape="action")` listing the closest model's actions by route name, sorted by string similarity to the tried action (detail actions only when the tried route has a pk, which their links reuse), a `DiagnosticStrip` debug footer, and a `Back` + `Browse all actions` actions row. HTTP verb chips in the action shape remain empty until the server exposes per-action verb metadata. ### [`ViewActionRouter`](/v3/reference/api/vue/ViewActionRouter.md) Resolves the correct view component for a given model action at runtime, delegating to CRUD views, workflow transition views, or dynamically imported custom action views as appropriate. ### [`ViewActivate`](/v3/reference/api/vue/ViewActivate.md) View that renders a confirmation form for the activate action via ModelActionForm, then sends a PATCH request to the activate endpoint when the user confirms. Contributes its title to the layout's PageTitle display via usePageTitle and teleports its "Go Back" action into the title action zone via PageActions, matching sibling action-router views (ViewAction, ViewExecuteTransition, ViewHistoryList). ### [`ViewChangePassword`](/v3/reference/api/vue/ViewChangePassword.md) Form that allows an authenticated user to change their password by providing their current password and confirming the new one. The server checks the current password and does not require a recent session, so the form sets `requireRecentAuth` to `false`. ### [`ViewCreate`](/v3/reference/api/vue/ViewCreate.md) Form view for creating a new model instance, including a page title, a sticky submit button bar, and a FormModel that renders the configured fields. ### [`ViewDeactivate`](/v3/reference/api/vue/ViewDeactivate.md) View that renders a confirmation form for the deactivate action via ModelActionForm, then sends a PATCH request to the deactivate endpoint when the user confirms. It shares its body with ViewActivate: the selected objects, the page title, the "Go Back" action, warning confirmation, and bulk requests. Attributes and slots pass through to ModelActionForm, so a wrapping page can adapt it, for example to a self-service account page with `confirmText`, `bannerTitle`, `actionSuccessSummary`, and the `confirm-message` slot. ### [`ViewDestroy`](/v3/reference/api/vue/ViewDestroy.md) View that presents a confirmation form and displays a list of selected items to be deleted via ModelActionForm, then sends a DELETE request when the user confirms. Wraps the ModelActionForm in a destructive-toned card with a danger banner so the blast radius is legible at a glance. The banner exposes a `linkedObjectCounts` prop and a `banner` slot for surfacing cascading-delete summaries when the server provides them. Contributes its own page title ("Delete Widget", or "Delete 3 Widgets" for a bulk destroy) through {@link usePageTitle}, so the layout's PageTitle display renders a heading here as it does on the other CRUD views. ### [`ViewExecuteTransition`](/v3/reference/api/vue/ViewExecuteTransition.md) Framework confirmation view for a workflow transition code that has no project-supplied override. Renders a page title with a "Go Back" button and embeds a `ModelActionForm`, whose submit runs through `storeWorkflow.executeTransition` instead of the generic model-action endpoint. `ViewActionRouter` resolves this as the final fallback for a recognized transition code, after any `ViewAction{App}{Model}{Code}.vue` or `ViewAction{Code}.vue` project override. A transition confirmation submits no form values: `run-action` forwards only the dry-run and warning-acknowledgement arguments to `storeWorkflow.executeTransition`. A project supplying fields through the `extra-fields` slot renders and validates them, but their values never reach the request; forward them through a project-supplied override instead. ### [`ViewForgotPassword`](/v3/reference/api/vue/ViewForgotPassword.md) Default forgot password view. Asks for an email address and requests a password reset link for it, inside an AuthorizingForm card. The server answers the same way whether or not an account uses the address, so the confirmation does not say that one does. Replace pieces through the `field(email)`, `widget(email)`, `action-bar`, and `suffix` slots; any other AuthorizingForm or ActionForm slot is forwarded through. ### [`ViewHistoryList`](/v3/reference/api/vue/ViewHistoryList.md) Paginated list view showing the history of one model instance as the actions that produced it. Each action groups the events it wrote, and each event lists its field changes with old and new values, in a table or card layout. ### [`ViewList`](/v3/reference/api/vue/ViewList.md) Full-page list view for a Django model. Renders a paginated, sortable, and searchable data grid with support for column hiding, filter groups, bulk actions, targetless actions, workflow transitions, column totals, and switching between paginated and show-all display. Persists sort order, visible columns, and active filters across page visits via the list preference store. ### [`ViewLoading`](/v3/reference/api/vue/ViewLoading.md) Compact loading status for route-level async resolution. Shows a loading icon and label, with optional request details and dependency progress. After `slowAfterMs`, shows a slow-load message and the optional `slow-actions` slot. ### [`ViewNotFound`](/v3/reference/api/vue/ViewNotFound.md) Full-page 404 error view displayed when a route path does not match any registered route. Composes `SystemMessageCard(tone="info")` with a "404" crest, a `TriedUrlCallout` highlighting the segments of the typed path that diverge from the closest matching route, a `SuggestionList(shape="route")` of N-best scored matches, a `DiagnosticStrip` debug footer, and a `Back` + `Go to home` actions row. ### [`ViewRead`](/v3/reference/api/vue/ViewRead.md) Read-only detail view that fetches and displays a single model instance identified by its primary key. ### [`ViewReauthenticate`](/v3/reference/api/vue/ViewReauthenticate.md) Default reauthentication view. Confirms a signed-in user's identity before a reauthentication-guarded action, with the proof the server requires for the account. `storeUser.authPendingFlow` names it: `mfa_reauthenticate` renders `ViewTwoFactorAuth` submitting through `storeUser.twoFactorReauthenticate`; `reauthenticate` renders a password form in an AuthorizingForm card submitting through `storeUser.reauthenticate`. Both wait for `authPendingFlow` to clear before redirecting, so a user whose session is already recent is sent on without a prompt. The `header`, `subTitle`, and `toasts` set here are defaults: an attribute passed in with the same name falls through to whichever form is showing and replaces it, as does any other AuthorizingForm prop such as `redirect`. Integrators can replace pieces of the password form through the `field(password)`, `widget(password)`, and `action-bar` slots; other slots are forwarded to the form being rendered. ### [`ViewRecoveryCodes`](/v3/reference/api/vue/ViewRecoveryCodes.md) Account security page for managing two-factor authentication recovery codes. Displays the user's unused recovery codes (when a TOTP device is configured) with options to copy, download, or print them, and provides a button to generate a fresh set of codes. ### [`ViewResetPassword`](/v3/reference/api/vue/ViewResetPassword.md) Default reset password view, the page a password reset email links to. Checks the link, then asks for a new password and its confirmation inside an AuthorizingForm card. The emailed link carries the account's `pk` in its path and the `token` in its query, so a route passes both as props, for example `/reset-password/:pk` with `props: (route) => ({ pk: route.params.pk, token: route.query.token })`. A link the server rejects shows the `invalid-message` slot instead of the form. After a successful reset the view goes to `signInTo`. Replace pieces through the `field(password)`, `widget(password)`, `field(password_confirm)`, `widget(password_confirm)`, `action-bar`, and `invalid-message` slots; any other AuthorizingForm or ActionForm slot is forwarded through. ### [`ViewSelectedObjectsAction`](/v3/reference/api/vue/ViewSelectedObjectsAction.md) Shared body of ViewActivate and ViewDeactivate: loads the selected objects, contributes the page title, teleports a "Go Back" action into the title action zone, and runs the action through ModelActionForm with a PATCH request. Every attribute, such as `tone` or `confirmText`, and every slot passes through to ModelActionForm. The wrapping view owns the root element, its theme key, and the action's defaults. ### [`ViewSetupDevice`](/v3/reference/api/vue/ViewSetupDevice.md) Multi-step form that guides the user through enrolling a two-factor authentication device. Presents a method-selection step (TOTP app, email, or SMS), then a verification step where the user confirms the device with a one-time code, then a confirmation step. ### [`ViewSignIn`](/v3/reference/api/vue/ViewSignIn.md) Default sign-in view. Renders an email and password credential form inside an AuthorizingForm card. Post-login routing and MFA pending-flow detection come from AuthorizingForm (via useSignInFlow); submission, loading, and server-side validation mapping come from the inner ActionForm. Integrators can use this view as-is, adjust copy and behaviour through props (`header`, `subTitle`, `redirect`, `formProps`, `requireRecentLogin`, `toasts`, theme overrides, all forwarded to AuthorizingForm), show a "Forgot password?" link with `forgotPasswordTo`, or replace individual pieces through the `field(email)`, `widget(email)`, `field(password)`, `widget(password)`, `action-bar`, and `suffix` slots. Any other AuthorizingForm or ActionForm slot is forwarded through. ### [`ViewTwoFactorAuth`](/v3/reference/api/vue/ViewTwoFactorAuth.md) Two-factor authentication challenge view. Lets the user select an available verification method (TOTP, SMS, email), request a code to be sent for applicable methods (with a 60-second resend cooldown), and submit the code. A separate ghost CTA reveals a recovery-code path that swaps the form body to a single mono text input. By default the code completes sign-in through `storeUser.twoFactorAuthenticate`. The `header`, `subTitle`, and `runAction` set here are defaults: an attribute passed in with the same name falls through to the root AuthorizingForm and replaces it. `ViewReauthenticate` passes `runAction` that way to confirm a signed-in user's second factor through `storeUser.twoFactorReauthenticate`. The server lists methods and sends codes for the user in the pending login stage or, failing that, the signed-in user, so one fetch serves both. Once a who-is request has succeeded, an anonymous user with no second-factor flow pending has no sign-in to finish here, for example because the pending sign-in expired. The view sends that user to the `sign-in` route, keeping the `redirect` query, and shows a warning toast that explains why. A signed-out user whose methods request is refused with an `UnauthorizedError` goes there too. Both paths share one redirect, so the user sees one toast and one navigation when both react to the same refused request. ### [`ViewUpdate`](/v3/reference/api/vue/ViewUpdate.md) Editable detail view that loads a model instance, presents it in a form, and submits changes back to the server on save. ## Widgets ### [`WidgetBooleanReadOnly`](/v3/reference/api/vue/WidgetBooleanReadOnly.md) Read-only presentation for boolean fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link BooleanDisplay} instead of the raw serialized literal. `fieldMappings` selects this widget through `readOnlyWidget` and supplies the per-type labels through `readOnlyWidgetProps`, so a project that says "Enabled" and "Disabled" sets them once in its own mapping rather than per field. A consumer's own `default` slot still wins: this widget supplies the boolean rendering only when the field has no `widget(fieldName)default` override. ### [`WidgetCheckbox`](/v3/reference/api/vue/WidgetCheckbox.md) A checkbox widget that renders a Checkbox with form field integration. Supports tri-state (checked, unchecked, indeterminate) for NullBooleanField, translating null field values to the indeterminate visual state. ### [`WidgetCombobox`](/v3/reference/api/vue/WidgetCombobox.md) A combobox widget supporting static options or API-backed search, single or multiple selection, grouping, and read-only display. Replaces WidgetSearchableSelect, WidgetAutoComplete, and WidgetMultiSelect. Provide either `options` (static mode) or both `app` and `model` (API mode). The `multiple` prop works in both modes. ### [`WidgetDateField`](/v3/reference/api/vue/WidgetDateField.md) A date or datetime picker widget that combines segment-based input with a calendar popover. Uses DateField for keyboard-friendly segment editing and Calendar for visual date selection. Set granularity to "minute" or "second" for datetime input. ### [`WidgetDateRangeField`](/v3/reference/api/vue/WidgetDateRangeField.md) A date or datetime range picker widget that combines segment-based input with a range calendar popover. Uses DateRangeField for keyboard-friendly segment editing and RangeCalendar for visual range selection. Set granularity to "minute" or "second" for datetime range input. ### [`WidgetDateTimeReadOnly`](/v3/reference/api/vue/WidgetDateTimeReadOnly.md) Read-only presentation for date, time, and datetime fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link DateTimeDisplay} instead of the raw serialized string. `fieldMappings` selects this widget through `readOnlyWidget` and supplies the per-type display options through `readOnlyWidgetProps`, which mirror the `columnProps` that `columnMappings` gives `ColumnDateTime`. A read view and a list therefore format the same field the same way, and an empty value renders the same dash in both. A consumer's own `default` slot still wins: this widget supplies the date rendering only when the field has no `widget(fieldName)default` override. ### [`WidgetDuration`](/v3/reference/api/vue/WidgetDuration.md) A duration input widget that renders separate numeric spinners for days, hours, minutes, and seconds. Each time unit can be shown or hidden independently via props. The value is DRF's duration string (`[D ]HH:MM:SS`), as a Django `DurationField` sends and reads it, or with `seconds` a number of seconds, as `DurationSecondsField` sends and reads it. The shown units split the value between them, so a duration of two days reads as 48 hours when days are hidden. Clearing a unit while the rest of the value is zero sets the value to `null`. Entering `0` keeps a zero duration. A negative value, such as Django's `-1 23:00:00` for minus one hour, shows a "Negative" segment with a minus sign before the spinners. The spinners show the duration's size, and editing them keeps the value negative. ### [`WidgetDurationReadOnly`](/v3/reference/api/vue/WidgetDurationReadOnly.md) Read-only presentation for duration fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link DurationDisplay} instead of the raw serialized literal. `fieldMappings` selects this widget through `readOnlyWidget` and supplies the display options through `readOnlyWidgetProps`, which mirror the `columnProps` that `columnMappings` gives `ColumnDuration`. A read view and a list therefore word the same field the same way, and an empty value renders the same dash in both. A consumer's own `default` slot still wins: this widget supplies the duration rendering only when the field has no `widget(fieldName)default` override. ### [`WidgetFile`](/v3/reference/api/vue/WidgetFile.md) A file-upload widget that displays an existing file as a labelled download link with remove and download actions, and falls back to a file-uploader input when no file is selected. ### [`WidgetFileReadOnly`](/v3/reference/api/vue/WidgetFileReadOnly.md) Read-only presentation for file and image fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link FileDisplay}: a link labelled with the file name, instead of the `{ name, url }` object that the plain read-only widget prints. `fieldMappings` selects this widget through `readOnlyWidget`. A consumer's own `default` slot still wins: this widget supplies the file rendering only when the field has no `widget(fieldName)default` override. ### [`WidgetGenericAutoComplete`](/v3/reference/api/vue/WidgetGenericAutoComplete.md) A generic foreign-key widget for Django content-type style relations. Renders a type selector combobox paired with an object search combobox, storing a `{ content_type, object_id }` value pair. ### [`WidgetHtml`](/v3/reference/api/vue/WidgetHtml.md) A rich-text editor widget backed by Tiptap. Stores and emits HTML string content, and accepts an optional `editorHeight` prop to control the editor's visible area. ### [`WidgetImage`](/v3/reference/api/vue/WidgetImage.md) An image upload widget that shows a file picker when no image is selected and a preview with a remove button once one has been chosen. The widget value is the raw File object selected by the user. ### [`WidgetJson`](/v3/reference/api/vue/WidgetJson.md) A JSON editor widget backed by CodeMirror. It edits real JSON values, not stringified copies, so JSONField submissions keep their object/scalar shape. ### [`WidgetJsonReadOnly`](/v3/reference/api/vue/WidgetJsonReadOnly.md) Read-only presentation for `JSON` fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link JsonDisplay} instead of the one-line literal the plain read-only widget prints. The block form is the point: a read view has the room to indent a nested payload, while a list cell does not, so {@link ColumnJson} renders the same value inline. Both give a null value the same dash. `fieldMappings` selects this widget through `readOnlyWidget` and supplies the display options through `readOnlyWidgetProps`. A consumer's own `default` slot still wins: this widget supplies the `JSON` rendering only when the field has no `widget(fieldName)default` override. ### [`WidgetModel`](/v3/reference/api/vue/WidgetModel.md) Renders a select, multi-select, or radio widget populated with choices fetched from a Django model. Choices are loaded lazily: the API request is deferred until the field is focused or already has a value. Pass the `type` prop to choose between `select`, `multiSelect`, and `radio` presentations. ### [`WidgetNativeSelect`](/v3/reference/api/vue/WidgetNativeSelect.md) A native select dropdown widget that renders a NativeSelect with option elements for each entry. Used for choice fields when a lightweight native dropdown is preferred over the headless Select. ### [`WidgetNumberInput`](/v3/reference/api/vue/WidgetNumberInput.md) A numeric input widget that assembles NumberField sub-components with increment and decrement buttons. Converts between string field values and numeric display values. Optionally displays a unit label suffix. ### [`WidgetOTPInput`](/v3/reference/api/vue/WidgetOTPInput.md) A one-time code widget that renders an InputOTP with form field integration. Used for verification codes when paired with FormField. Renders one slot per character unless the default slot supplies its own groups and slots. ### [`WidgetPreviewableTemplate`](/v3/reference/api/vue/WidgetPreviewableTemplate.md) A widget that combines an editable input (HTML editor, plain input, or textarea) with a live preview pane that substitutes `$variable` placeholders using dependency data. ### [`WidgetRadioGroup`](/v3/reference/api/vue/WidgetRadioGroup.md) A radio group widget that renders a RadioGroup with RadioGroupItem children for each option. Used for choice fields (e.g. BooleanField with choices) when paired with FormField. ### [`WidgetRangeSlider`](/v3/reference/api/vue/WidgetRangeSlider.md) A range slider widget that renders a Slider with form field integration. Used for numeric range inputs when paired with FormField. ### [`WidgetReadOnly`](/v3/reference/api/vue/WidgetReadOnly.md) Renders a field value as non-editable text, with optional prefix and suffix strings. When `app` and `model` props are provided, the raw foreign-key value is resolved to a human-readable name and rendered as a link to the related record's detail view. ### [`WidgetSelectDropdown`](/v3/reference/api/vue/WidgetSelectDropdown.md) A dropdown select widget that assembles Select sub-components for static choice fields. Used when a styled dropdown is preferred over a native select element. ### [`WidgetTagsInput`](/v3/reference/api/vue/WidgetTagsInput.md) A tags input widget for a field that holds a list of values. Each entry becomes a removable tag, and the field value is the array of entered strings. An entry is added on Enter, on the comma delimiter, on paste, and when the input loses focus. Each entry is trimmed before it is added, so ` 2` next to an existing `2` is a duplicate. With `numeric`, only entries written as decimal numbers are added, such as `12`, `-2.5`, `.5`, or `1e3`. A rejected entry stays in the input, marked invalid, until it is edited. ### [`WidgetTemplateLegend`](/v3/reference/api/vue/WidgetTemplateLegend.md) A read-only widget that displays a legend of available `$variable` substitution tags, rendered as a labelled list with click-to-copy tag values; the default slot can replace the entire list. ### [`WidgetTextInput`](/v3/reference/api/vue/WidgetTextInput.md) A text input widget that renders a Input with form field integration. Used for CharField and similar string-based fields when paired with FormField. Supports optional input masking via the mask prop. ### [`WidgetTextTextarea`](/v3/reference/api/vue/WidgetTextTextarea.md) A textarea widget that renders a Textarea with form field integration. Used for CharField (TextField variant) and similar multi-line string fields when paired with FormField. ### [`WidgetTimeField`](/v3/reference/api/vue/WidgetTimeField.md) A time picker widget using segment-based input. Users tab through hour, minute, and optional second segments. No calendar popover is shown since this handles time-only values. ### [`WidgetTimeRangeField`](/v3/reference/api/vue/WidgetTimeRangeField.md) A time range picker widget that renders two segment-based time inputs for start and end values. Converts between the field's { lower, upper } object format and @internationalized/date Time objects. ### [`WidgetToggle`](/v3/reference/api/vue/WidgetToggle.md) A boolean toggle widget that renders a Switch with form field integration. Used for BooleanField when paired with FormField. ### [`WidgetUnmapped`](/v3/reference/api/vue/WidgetUnmapped.md) Renders a diagnostic when a form model resolves no widget for a field, either because the field's type pair has no entry in the field mappings or because a configured widget name does not resolve. Surfaces a misconfigured field definition in the form rather than dropping the field silently. ## Controls ### [`Button`](/v3/reference/api/vue/Button.md) A button control built on Reka UI's Primitive. Its look resolves on two axes, `tone` (color) and `emphasis` (structure). A bare button rests at neutral fill; the primary fill is opt-in with `tone="primary"`. Size styles also resolve via the theme system. ### [`ButtonGroup`](/v3/reference/api/vue/ButtonGroup.md) A container that groups related buttons into a single visual unit. Applies radius and edge adjustments to adjacent children based on orientation. ### [`ButtonGroupSeparator`](/v3/reference/api/vue/ButtonGroupSeparator.md) A visual divider placed between items in a ButtonGroup. Stretches to fill the button group's cross-axis. ### [`ButtonGroupText`](/v3/reference/api/vue/ButtonGroupText.md) A text label element that can be placed inside a ButtonGroup. Renders with muted background styling to visually complement adjacent buttons. ### [`Calendar`](/v3/reference/api/vue/Calendar.md) A full-featured calendar component built on CalendarRoot with optional month/year navigation dropdowns. Supports single and multiple date selection, date range constraints, and configurable heading layouts. ### [`CalendarCell`](/v3/reference/api/vue/CalendarCell.md) A styled wrapper for a single calendar cell, adding selection highlight and focus handling. ### [`CalendarCellTrigger`](/v3/reference/api/vue/CalendarCellTrigger.md) The interactive trigger button within a calendar cell that handles day selection. Applies button ghost styling with additional state-based modifiers for selection, disabled, and unavailable states. ### [`CalendarFooter`](/v3/reference/api/vue/CalendarFooter.md) A chin below Calendar / RangeCalendar that surfaces a range summary label and apply / clear actions. The default slot replaces the layout entirely; the named `summary` slot fills the leading mono summary line and `actions` fills the trailing button row. ### [`CalendarGrid`](/v3/reference/api/vue/CalendarGrid.md) A styled wrapper for the calendar grid table that contains weeks and day cells. ### [`CalendarGridBody`](/v3/reference/api/vue/CalendarGridBody.md) A wrapper for the calendar grid's body element containing week rows. ### [`CalendarGridHead`](/v3/reference/api/vue/CalendarGridHead.md) A wrapper for the calendar grid's header element containing day-of-week labels. ### [`CalendarGridRow`](/v3/reference/api/vue/CalendarGridRow.md) A styled row within the calendar grid representing a single week. ### [`CalendarHeadCell`](/v3/reference/api/vue/CalendarHeadCell.md) A styled header cell displaying a day-of-week abbreviation in the calendar grid. ### [`CalendarHeader`](/v3/reference/api/vue/CalendarHeader.md) The header bar of the calendar containing navigation buttons and the month/year heading. ### [`CalendarHeading`](/v3/reference/api/vue/CalendarHeading.md) Displays the current month and year label in the calendar header. Exposes a headingValue slot prop for custom rendering. ### [`CalendarNextButton`](/v3/reference/api/vue/CalendarNextButton.md) A navigation button that advances the calendar to the next month or year. ### [`CalendarPrevButton`](/v3/reference/api/vue/CalendarPrevButton.md) A navigation button that moves the calendar to the previous month or year. ### [`Checkbox`](/v3/reference/api/vue/Checkbox.md) A checkbox built on Reka UI's CheckboxRoot, displaying a check icon when checked and a minus icon when indeterminate. ### [`Combobox`](/v3/reference/api/vue/Combobox.md) Root of a Combobox widget. Combines a searchable input with a filtered option list. ### [`ComboboxAnchor`](/v3/reference/api/vue/ComboboxAnchor.md) Anchor element that positions the ComboboxList relative to the trigger. ### [`ComboboxEmpty`](/v3/reference/api/vue/ComboboxEmpty.md) Shown inside ComboboxList when no items match the current search. ### [`ComboboxGroup`](/v3/reference/api/vue/ComboboxGroup.md) Groups related ComboboxItem elements with an optional heading. ### [`ComboboxInput`](/v3/reference/api/vue/ComboboxInput.md) The search input for Combobox, rendered with a search icon. ### [`ComboboxItem`](/v3/reference/api/vue/ComboboxItem.md) A selectable option within ComboboxList. ### [`ComboboxItemIndicator`](/v3/reference/api/vue/ComboboxItemIndicator.md) Visual indicator shown when a ComboboxItem is selected. ### [`ComboboxList`](/v3/reference/api/vue/ComboboxList.md) The dropdown list panel for Combobox, rendered in a portal. ### [`ComboboxSeparator`](/v3/reference/api/vue/ComboboxSeparator.md) A visual divider between groups or items in ComboboxList. ### [`ComboboxTrigger`](/v3/reference/api/vue/ComboboxTrigger.md) A button that opens the Combobox list. ### [`ComboboxViewport`](/v3/reference/api/vue/ComboboxViewport.md) Scrollable viewport inside ComboboxList. ### [`ComboboxVirtualizer`](/v3/reference/api/vue/ComboboxVirtualizer.md) Virtualizes the list of items inside ComboboxViewport for large datasets. Requires manual filtering of options before passing them in. Uses a render function (not a template) to pass slots directly to reka-ui's ComboboxVirtualizer without adding an extra renderSlot Fragment layer. A template-based wrapper would produce two nested Fragments, causing ListboxVirtualizer's depth-1 VNode search to return undefined and crash. ### [`Command`](/v3/reference/api/vue/Command.md) Root of a command palette with built-in filtering, providing context to child components. ### [`CommandDialog`](/v3/reference/api/vue/CommandDialog.md) Wraps Command inside a modal dialog for use as a floating command palette. ### [`CommandEmpty`](/v3/reference/api/vue/CommandEmpty.md) Shown inside CommandList when no items match the current search. ### [`CommandFooter`](/v3/reference/api/vue/CommandFooter.md) A chin below CommandList that surfaces keyboard-navigation hints and custom action labels. The default slot replaces the layout entirely; the named `start` and `end` slots fill the leading hint group and the trailing hint. ### [`CommandGroup`](/v3/reference/api/vue/CommandGroup.md) Groups related CommandItem elements with an optional heading. ### [`CommandInput`](/v3/reference/api/vue/CommandInput.md) The search input for Command, bound to the shared filter state. ### [`CommandItem`](/v3/reference/api/vue/CommandItem.md) A selectable command option within CommandList or CommandGroup. ### [`CommandList`](/v3/reference/api/vue/CommandList.md) Scrollable container that renders the filtered list of command items. ### [`CommandSeparator`](/v3/reference/api/vue/CommandSeparator.md) A visual divider between groups or items within CommandList. ### [`CommandShortcut`](/v3/reference/api/vue/CommandShortcut.md) Displays a keyboard shortcut hint aligned to the right of a CommandItem. ### [`DateField`](/v3/reference/api/vue/DateField.md) A segment-based date input built on Reka UI's DateFieldRoot. Users tab through individual year, month, day (and optional time) segments. Supports granularity for date-only or datetime input. ### [`DateFieldInput`](/v3/reference/api/vue/DateFieldInput.md) A single segment of a date field (year, month, day, hour, minute, etc.). Renders an editable segment inside a DateField. ### [`DateRangeField`](/v3/reference/api/vue/DateRangeField.md) A segment-based date range input built on Reka UI's DateRangeFieldRoot. Renders start and end date segments that users tab through individually. Supports granularity for date-only or datetime range input. ### [`DateRangeFieldInput`](/v3/reference/api/vue/DateRangeFieldInput.md) A single segment of a date range field (year, month, day, hour, minute, etc.). Renders an editable segment for either the start or end date inside a DateRangeField. ### [`FileUpload`](/v3/reference/api/vue/FileUpload.md) A file-upload control with a hidden native file input, a styled trigger button, and an optional drag-and-drop zone. Emits the selected File via v-model. ### [`Input`](/v3/reference/api/vue/Input.md) A styled text input built on the native HTML input element, with support for v-model binding. ### [`InputGroup`](/v3/reference/api/vue/InputGroup.md) A container that groups an input with inline addons, buttons, or text, with coordinated focus and error states. ### [`InputGroupAddon`](/v3/reference/api/vue/InputGroupAddon.md) An addon element placed at the start, end, or above/below an input group, with optional click-to-focus behavior. ### [`InputGroupButton`](/v3/reference/api/vue/InputGroupButton.md) A sized button emphasis designed for inline placement within an input group. ### [`InputGroupInput`](/v3/reference/api/vue/InputGroupInput.md) A borderless input element styled for seamless placement inside an input group. ### [`InputGroupText`](/v3/reference/api/vue/InputGroupText.md) A inline text or icon label displayed inside an input group alongside the input. ### [`InputGroupTextarea`](/v3/reference/api/vue/InputGroupTextarea.md) A borderless textarea element styled for seamless placement inside an input group. ### [`InputOTP`](/v3/reference/api/vue/InputOTP.md) A styled OTP (one-time password) input built on vue-input-otp's OTPInput, with slot forwarding for custom slot rendering. ### [`InputOTPGroup`](/v3/reference/api/vue/InputOTPGroup.md) A flex container that groups OTP slot elements horizontally. ### [`InputOTPSeparator`](/v3/reference/api/vue/InputOTPSeparator.md) A visual separator between OTP slot groups, rendering a minus icon by default. ### [`InputOTPSlot`](/v3/reference/api/vue/InputOTPSlot.md) An individual OTP character slot that displays the current character and an animated caret when active. ### [`NativeSelect`](/v3/reference/api/vue/NativeSelect.md) A styled native `