)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used."
},
"VDataTable/disable-sort": {
"type": "boolean\n",
"description": "Toggles rendering of sort button."
},
"VDataTable/headers": {
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'end' | 'start' | undefined\n readonly align?: 'end' | 'start' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]\n",
"description": "An array of objects that each describe a header column."
},
"VDataTable/loading-text": {
"type": "string\n",
"description": "Text shown when the data is loading."
},
"VDataTable/expand-transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Transition used to animate the `expanded` slot content. Pass a string transition name, a component via `{ component }`, or any `` props object."
},
"VDataTable/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTable/group-collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the row group is expanded."
},
"VDataTable/group-expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the row group is collapsed."
},
"VDataTable/row-props": {
"type": " | Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row."
},
"VDataTable/hide-default-body": {
"type": "boolean\n",
"description": "Hides the default body."
},
"VDataTable/hide-default-footer": {
"type": "boolean\n",
"description": "Hides the default footer."
},
"VDataTable/hide-default-header": {
"type": "boolean\n",
"description": "Hides the default header."
},
"VDataTable/fixed-header": {
"type": "boolean\n",
"description": "Fixed header to top of table."
},
"VDataTable/sort-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for unsorted columns. By default it uses either **sortAscIcon** or **sortDescIcon** depending on **initialSortOrder**, but can be customized to show a neutral icon instead."
},
"VDataTable/sort-asc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for ascending sort button."
},
"VDataTable/sort-desc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for descending sort button."
},
"VDataTable/select-all-label": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTable/gridlines": {
"type": "boolean | 'horizontal' | 'vertical' | 'all'\n",
"description": "Controls cell borders\n- **horizontal** draws lines between rows\n- **vertical** between columns (keeps horizontal lines of header and footer rows)\n- **all** / `true` draws both vertical and horizontal lines\n- `false` removes all lines."
},
"VDataTable/fixed-footer": {
"type": "boolean\n",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table."
},
"VDataTable/hover": {
"type": "boolean\n",
"description": "Adds a hover effects to a table rows."
},
"VDataTable/striped": {
"type": "'odd' | 'even'\n",
"description": "Applies a background to either **even** or **odd** rows."
},
"VDataTable/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Previous icon."
},
"VDataTable/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Next icon."
},
"VDataTable/first-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "First icon."
},
"VDataTable/last-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Last icon."
},
"VDataTable/items-per-page-text": {
"type": "string\n",
"description": "Text for items-per-page dropdown."
},
"VDataTable/page-text": {
"type": "string\n",
"description": "Label for page number."
},
"VDataTable/first-page-label": {
"type": "string\n",
"description": "Label for first page."
},
"VDataTable/prev-page-label": {
"type": "string\n",
"description": "Label for previous page."
},
"VDataTable/next-page-label": {
"type": "string\n",
"description": "Label for next page."
},
"VDataTable/last-page-label": {
"type": "string\n",
"description": "Label for last page."
},
"VDataTable/items-per-page-options": {
"type": "(number | { title: string; value: number })[]\n",
"description": "Array of options to show in the items-per-page dropdown."
},
"VDataTable/show-current-page": {
"type": "boolean\n",
"description": "Show current page number between prev/next icons."
},
"VDataTable/show-first-last-page": {
"type": "boolean | 'only-first'\n",
"description": "Show buttons for going to first and last page. Since v4.1.0 it accepts `'only-first'`, to only the first page button."
},
"VDataTableFooter/color": {
"type": "string\n",
"description": "Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDataTableFooter/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Previous icon."
},
"VDataTableFooter/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Next icon."
},
"VDataTableFooter/first-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "First icon."
},
"VDataTableFooter/last-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Last icon."
},
"VDataTableFooter/items-per-page-text": {
"type": "string\n",
"description": "Text for items-per-page dropdown."
},
"VDataTableFooter/page-text": {
"type": "string\n",
"description": "Label for page number."
},
"VDataTableFooter/first-page-label": {
"type": "string\n",
"description": "Label for first page."
},
"VDataTableFooter/prev-page-label": {
"type": "string\n",
"description": "Label for previous page."
},
"VDataTableFooter/next-page-label": {
"type": "string\n",
"description": "Label for next page."
},
"VDataTableFooter/last-page-label": {
"type": "string\n",
"description": "Label for last page."
},
"VDataTableFooter/items-per-page-options": {
"type": "(number | { title: string; value: number })[]\n",
"description": "Array of options to show in the items-per-page dropdown."
},
"VDataTableFooter/show-current-page": {
"type": "boolean\n",
"description": "Show current page number between prev/next icons."
},
"VDataTableFooter/show-first-last-page": {
"type": "boolean | 'only-first'\n",
"description": "Show buttons for going to first and last page. Since v4.1.0 it accepts `'only-first'`, to only the first page button."
},
"VDataTableHeaders/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDataTableHeaders/sticky": {
"type": "boolean\n",
"description": "Deprecated, use `fixed-header` instead."
},
"VDataTableHeaders/color": {
"type": "string\n",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header."
},
"VDataTableHeaders/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VDataTableHeaders/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDataTableHeaders/initial-sort-order": {
"type": "'desc' | 'asc'\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableHeaders/multi-sort": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableHeaders/header-props": {
"type": "unknown\n",
"description": "Additional props to be be passed to the default header"
},
"VDataTableHeaders/disable-sort": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableHeaders/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTableHeaders/fixed-header": {
"type": "boolean\n",
"description": "Sticks the header to the top of the table."
},
"VDataTableHeaders/sort-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for unsorted columns. By default it uses either **sortAscIcon** or **sortDescIcon** depending on **initialSortOrder**, but can be customized to show a neutral icon instead."
},
"VDataTableHeaders/sort-asc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for ascending sort button."
},
"VDataTableHeaders/sort-desc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for descending sort button."
},
"VDataTableHeaders/select-all-label": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableRow/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDataTableRow/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDataTableRow/item": {
"type": "unknown\n",
"description": "Data (key, index and column values) of the displayed item."
},
"VDataTableRow/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is collapsed."
},
"VDataTableRow/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is expanded."
},
"VDataTableRow/get-matches": {
"type": "(item: DataTableItem) => Record\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))"
},
"VDataTableRow/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDataTableRow/index": {
"type": "number\n",
"description": "Row index."
},
"VDataTableRow/cell-props": {
"type": " | Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)\n",
"description": "Props to be applied to the cell."
},
"VDataTableRow/select-row-label": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))"
},
"VDataTableRow/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTableRows/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDataTableRows/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDataTableRows/items": {
"type": "(DataTableItem | Group | GroupSummary)[]\n",
"description": "An array of strings or objects used for automatically generating children components."
},
"VDataTableRows/loading": {
"type": "string | boolean | { side: 'end' | 'start' | 'both'; color: string }\n",
"description": "Displays `loading` slot if set to `true`"
},
"VDataTableRows/hide-no-data": {
"type": "boolean\n",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open."
},
"VDataTableRows/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is collapsed."
},
"VDataTableRows/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is expanded."
},
"VDataTableRows/no-data-text": {
"type": "string\n",
"description": "Text shown when no items are provided to the component."
},
"VDataTableRows/get-matches": {
"type": "(item: DataTableItem) => Record\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))"
},
"VDataTableRows/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDataTableRows/cell-props": {
"type": " | Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used."
},
"VDataTableRows/loading-text": {
"type": "string\n",
"description": "Text shown when the data is loading."
},
"VDataTableRows/expand-transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Transition used to animate the `expanded` slot content. Pass a string transition name, a component via `{ component }`, or any `` props object."
},
"VDataTableRows/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTableRows/group-collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableRows/group-expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableRows/row-props": {
"type": " | Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row."
},
"VDataTableServer/search": {
"type": "string\n",
"description": "Text input used to filter items."
},
"VDataTableServer/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDataTableServer/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDataTableServer/height": {
"type": "string | number\n",
"description": "Use the height prop to set the height of the table."
},
"VDataTableServer/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VDataTableServer/sticky": {
"type": "boolean\n",
"description": "Deprecated, use `fixed-header` instead."
},
"VDataTableServer/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VDataTableServer/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDataTableServer/color": {
"type": "string\n",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header."
},
"VDataTableServer/items": {
"type": "any[]\n",
"description": "An array of strings or objects used for automatically generating children components."
},
"VDataTableServer/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VDataTableServer/hide-no-data": {
"type": "boolean\n",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open."
},
"VDataTableServer/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is collapsed."
},
"VDataTableServer/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is expanded."
},
"VDataTableServer/opened": {
"type": "string[]\n",
"description": "Array of group IDs that should be open. Can be bound to external variable using **v-model:opened**."
},
"VDataTableServer/select-strategy": {
"type": "'single' | 'page' | 'all'\n",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list)."
},
"VDataTableServer/item-value": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that contains its value."
},
"VDataTableServer/return-object": {
"type": "boolean\n",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**."
},
"VDataTableServer/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VDataTableServer/no-data-text": {
"type": "string\n",
"description": "Text shown when no items are provided to the component."
},
"VDataTableServer/get-matches": {
"type": "(item: DataTableItem) => Record\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))"
},
"VDataTableServer/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDataTableServer/items-length": {
"type": "string | number\n",
"description": "Number of all items."
},
"VDataTableServer/item-selectable": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that indicates whether the item is selectable."
},
"VDataTableServer/show-select": {
"type": "boolean\n",
"description": "Shows the column with checkboxes for selecting items in the list."
},
"VDataTableServer/page": {
"type": "string | number\n",
"description": "The current displayed page number (1-indexed)."
},
"VDataTableServer/initial-sort-order": {
"type": "'desc' | 'asc'\n",
"description": "Specifies the initial sort order when an unsorted column is clicked."
},
"VDataTableServer/sort-by": {
"type": "SortItem[]\n",
"description": "Array of column keys and sort orders that determines the sort order of the table."
},
"VDataTableServer/multi-sort": {
"type": " | boolean\n | { key: 'ctrl'; mode: 'prepend' | 'append'; modifier: 'shift' | 'alt' }\n",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **mode**: when user selects a new column to sort by, it will be set first (`prepend`) or last (`append`) in the sort priority. Defaults to `append`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously"
},
"VDataTableServer/must-sort": {
"type": "boolean\n",
"description": "Forces sorting on the column(s)."
},
"VDataTableServer/custom-key-sort": {
"type": "unknown\n",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified."
},
"VDataTableServer/items-per-page": {
"type": "string | number\n",
"description": "The number of items to display on each page."
},
"VDataTableServer/page-by": {
"type": "'item' | 'auto' | 'any'\n",
"description": "Controls how pagination counts items.\n- **item** paginates by individual items,\n- **auto** paginates by top-level groups and falls back to regular items if **group-by** is empty,\n- **any** paginates by both items and groups combined"
},
"VDataTableServer/expand-on-click": {
"type": "boolean\n",
"description": "Expands item when the row is clicked."
},
"VDataTableServer/show-expand": {
"type": "boolean\n",
"description": "Shows the expand icon."
},
"VDataTableServer/expanded": {
"type": "string[]\n",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**."
},
"VDataTableServer/expand-strategy": {
"type": "'multiple' | 'single'\n",
"description": "Controls how many rows can be expanded at once. Use `single` to collapse the previously expanded row when another is opened."
},
"VDataTableServer/group-by": {
"type": "SortItem[]\n",
"description": "Defines the grouping of the table items."
},
"VDataTableServer/open-all": {
"type": "boolean\n",
"description": "Opens all groups by default. Synchronizes with **v-model:opened**, so closed groups are not re-opened accidentally."
},
"VDataTableServer/group-key": {
"type": "(options: { key: string; value: any; parentKey: string }) => string\n",
"description": "Custom function to generate group IDs. Receives `{ key, value, parentKey }` where `parentKey` is `null` for top-level groups. Useful when group values contain special characters or are non-string types."
},
"VDataTableServer/header-props": {
"type": "unknown\n",
"description": "Pass props to the default header. See [`v-data-table-server` API](/api/v-data-table-server) for more information."
},
"VDataTableServer/cell-props": {
"type": " | Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used."
},
"VDataTableServer/disable-sort": {
"type": "boolean\n",
"description": "Toggles rendering of sort button."
},
"VDataTableServer/headers": {
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'end' | 'start' | undefined\n readonly align?: 'end' | 'start' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]\n",
"description": "An array of objects that each describe a header column."
},
"VDataTableServer/loading-text": {
"type": "string\n",
"description": "Text shown when the data is loading."
},
"VDataTableServer/expand-transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Transition used to animate the `expanded` slot content. Pass a string transition name, a component via `{ component }`, or any `` props object."
},
"VDataTableServer/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTableServer/group-collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableServer/group-expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableServer/row-props": {
"type": " | Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row."
},
"VDataTableServer/hide-default-body": {
"type": "boolean\n",
"description": "Hides the default body."
},
"VDataTableServer/hide-default-footer": {
"type": "boolean\n",
"description": "Hides the default footer."
},
"VDataTableServer/hide-default-header": {
"type": "boolean\n",
"description": "Hides the default header."
},
"VDataTableServer/fixed-header": {
"type": "boolean\n",
"description": "Use the fixed-header prop together with the height prop to fix the header to the top of the table."
},
"VDataTableServer/sort-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for unsorted columns. By default it uses either **sortAscIcon** or **sortDescIcon** depending on **initialSortOrder**, but can be customized to show a neutral icon instead."
},
"VDataTableServer/sort-asc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for ascending sort button."
},
"VDataTableServer/sort-desc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for descending sort button."
},
"VDataTableServer/select-all-label": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableServer/gridlines": {
"type": "boolean | 'horizontal' | 'vertical' | 'all'\n",
"description": "Controls cell borders\n- **horizontal** draws lines between rows\n- **vertical** between columns (keeps horizontal lines of header and footer rows)\n- **all** / `true` draws both vertical and horizontal lines\n- `false` removes all lines."
},
"VDataTableServer/fixed-footer": {
"type": "boolean\n",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table."
},
"VDataTableServer/hover": {
"type": "boolean\n",
"description": "Will add a hover effect to a table's row when the mouse is over it."
},
"VDataTableServer/striped": {
"type": "'odd' | 'even'\n",
"description": "Applies a background to either **even** or **odd** rows."
},
"VDataTableServer/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Previous icon."
},
"VDataTableServer/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Next icon."
},
"VDataTableServer/first-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "First icon."
},
"VDataTableServer/last-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Last icon."
},
"VDataTableServer/items-per-page-text": {
"type": "string\n",
"description": "Text for items-per-page dropdown."
},
"VDataTableServer/page-text": {
"type": "string\n",
"description": "Label for page number."
},
"VDataTableServer/first-page-label": {
"type": "string\n",
"description": "Label for first page."
},
"VDataTableServer/prev-page-label": {
"type": "string\n",
"description": "Label for previous page."
},
"VDataTableServer/next-page-label": {
"type": "string\n",
"description": "Label for next page."
},
"VDataTableServer/last-page-label": {
"type": "string\n",
"description": "Label for last page."
},
"VDataTableServer/items-per-page-options": {
"type": "(number | { title: string; value: number })[]\n",
"description": "Array of options to show in the items-per-page dropdown."
},
"VDataTableServer/show-current-page": {
"type": "boolean\n",
"description": "Show current page number between prev/next icons."
},
"VDataTableServer/show-first-last-page": {
"type": "boolean | 'only-first'\n",
"description": "Show buttons for going to first and last page. Since v4.1.0 it accepts `'only-first'`, to only the first page button."
},
"VDataTableVirtual/search": {
"type": "string\n",
"description": "Text input used to filter items."
},
"VDataTableVirtual/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDataTableVirtual/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDataTableVirtual/height": {
"type": "string | number\n",
"description": "Use the height prop to set the height of the table."
},
"VDataTableVirtual/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VDataTableVirtual/sticky": {
"type": "boolean\n",
"description": "Deprecated, use `fixed-header` instead."
},
"VDataTableVirtual/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VDataTableVirtual/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDataTableVirtual/color": {
"type": "string\n",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header."
},
"VDataTableVirtual/items": {
"type": "any[]\n",
"description": "An array of strings or objects used for automatically generating children components."
},
"VDataTableVirtual/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VDataTableVirtual/filter-mode": {
"type": "'every' | 'some' | 'union' | 'intersection'\n",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters."
},
"VDataTableVirtual/no-filter": {
"type": "boolean\n",
"description": "Disables all item filtering."
},
"VDataTableVirtual/custom-filter": {
"type": "FilterFunction\n",
"description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted."
},
"VDataTableVirtual/custom-key-filter": {
"type": "unknown\n",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified."
},
"VDataTableVirtual/filter-keys": {
"type": "string | string[]\n",
"description": "Array of specific keys to filter on the item."
},
"VDataTableVirtual/hide-no-data": {
"type": "boolean\n",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open."
},
"VDataTableVirtual/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is collapsed."
},
"VDataTableVirtual/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the expandable row is expanded."
},
"VDataTableVirtual/opened": {
"type": "string[]\n",
"description": "Array of group IDs that should be open. Can be bound to external variable using **v-model:opened**."
},
"VDataTableVirtual/select-strategy": {
"type": "'single' | 'page' | 'all'\n",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list)."
},
"VDataTableVirtual/item-value": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that contains its value."
},
"VDataTableVirtual/return-object": {
"type": "boolean\n",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**."
},
"VDataTableVirtual/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VDataTableVirtual/no-data-text": {
"type": "string\n",
"description": "Text shown when no items are provided to the component."
},
"VDataTableVirtual/get-matches": {
"type": "(item: DataTableItem) => Record\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))"
},
"VDataTableVirtual/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDataTableVirtual/item-selectable": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that indicates whether the item is selectable."
},
"VDataTableVirtual/show-select": {
"type": "boolean\n",
"description": "Shows the column with checkboxes for selecting items in the list."
},
"VDataTableVirtual/initial-sort-order": {
"type": "'desc' | 'asc'\n",
"description": "Specifies the initial sort order when an unsorted column is clicked."
},
"VDataTableVirtual/sort-by": {
"type": "SortItem[]\n",
"description": "Array of column keys and sort orders that determines the sort order of the table."
},
"VDataTableVirtual/multi-sort": {
"type": " | boolean\n | { key: 'ctrl'; mode: 'prepend' | 'append'; modifier: 'shift' | 'alt' }\n",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **mode**: when user selects a new column to sort by, it will be set first (`prepend`) or last (`append`) in the sort priority. Defaults to `append`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously"
},
"VDataTableVirtual/must-sort": {
"type": "boolean\n",
"description": "Forces sorting on the column(s)."
},
"VDataTableVirtual/custom-key-sort": {
"type": "unknown\n",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified."
},
"VDataTableVirtual/expand-on-click": {
"type": "boolean\n",
"description": "Expands item when the row is clicked."
},
"VDataTableVirtual/show-expand": {
"type": "boolean\n",
"description": "Shows the expand icon."
},
"VDataTableVirtual/expanded": {
"type": "string[]\n",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**."
},
"VDataTableVirtual/expand-strategy": {
"type": "'multiple' | 'single'\n",
"description": "Controls how many rows can be expanded at once. Use `single` to collapse the previously expanded row when another is opened."
},
"VDataTableVirtual/group-by": {
"type": "SortItem[]\n",
"description": "Defines the grouping of the table items."
},
"VDataTableVirtual/open-all": {
"type": "boolean\n",
"description": "Opens all groups by default. Synchronizes with **v-model:opened**, so closed groups are not re-opened accidentally."
},
"VDataTableVirtual/group-key": {
"type": "(options: { key: string; value: any; parentKey: string }) => string\n",
"description": "Custom function to generate group IDs. Receives `{ key, value, parentKey }` where `parentKey` is `null` for top-level groups. Useful when group values contain special characters or are non-string types."
},
"VDataTableVirtual/header-props": {
"type": "unknown\n",
"description": "Pass props to the default header."
},
"VDataTableVirtual/cell-props": {
"type": " | Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used."
},
"VDataTableVirtual/disable-sort": {
"type": "boolean\n",
"description": "Toggles rendering of sort button."
},
"VDataTableVirtual/headers": {
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'end' | 'start' | undefined\n readonly align?: 'end' | 'start' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]\n",
"description": "An array of objects that each describe a header column."
},
"VDataTableVirtual/loading-text": {
"type": "string\n",
"description": "Text shown when the data is loading."
},
"VDataTableVirtual/expand-transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Transition used to animate the `expanded` slot content. Pass a string transition name, a component via `{ component }`, or any `` props object."
},
"VDataTableVirtual/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDataTableVirtual/group-collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableVirtual/group-expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))"
},
"VDataTableVirtual/row-props": {
"type": " | Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)\n",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row."
},
"VDataTableVirtual/hide-default-body": {
"type": "boolean\n",
"description": "Hides the default body."
},
"VDataTableVirtual/hide-default-header": {
"type": "boolean\n",
"description": "Hides the default header."
},
"VDataTableVirtual/fixed-header": {
"type": "boolean\n",
"description": "Sticks the header to the top of the table."
},
"VDataTableVirtual/sort-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for unsorted columns. By default it uses either **sortAscIcon** or **sortDescIcon** depending on **initialSortOrder**, but can be customized to show a neutral icon instead."
},
"VDataTableVirtual/sort-asc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for ascending sort button."
},
"VDataTableVirtual/sort-desc-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for descending sort button."
},
"VDataTableVirtual/select-all-label": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))"
},
"VDataTableVirtual/gridlines": {
"type": "boolean | 'horizontal' | 'vertical' | 'all'\n",
"description": "Controls cell borders\n- **horizontal** draws lines between rows\n- **vertical** between columns (keeps horizontal lines of header and footer rows)\n- **all** / `true` draws both vertical and horizontal lines\n- `false` removes all lines."
},
"VDataTableVirtual/fixed-footer": {
"type": "boolean\n",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table."
},
"VDataTableVirtual/hover": {
"type": "boolean\n",
"description": "Will add a hover effect to a table's row when the mouse is over it."
},
"VDataTableVirtual/striped": {
"type": "'odd' | 'even'\n",
"description": "Applies a background to either **even** or **odd** rows."
},
"VDataTableVirtual/item-height": {
"type": "string | number\n",
"description": "Height in pixels of each item to display."
},
"VDataTableVirtual/item-key": {
"type": "SelectItemKey\n",
"description": "The property on each item that is used as a unique key."
},
"VDateInput/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VDateInput/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VDateInput/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VDateInput/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VDateInput/type": {
"type": "string\n",
"description": "Sets input type."
},
"VDateInput/model-value": {
"type": "unknown\n",
"description": "Represents the committed v-model value"
},
"VDateInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VDateInput/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VDateInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VDateInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VDateInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VDateInput/width": {
"type": "string | number\n",
"description": "Width of the picker."
},
"VDateInput/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VDateInput/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VDateInput/location": {
"type": "Anchor\n",
"description": "Specifies the date picker's location. Can combine by using a space separated string."
},
"VDateInput/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VDateInput/rounded": {
"type": "string | number | boolean\n",
"description": "Adds a border radius to the input."
},
"VDateInput/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VDateInput/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VDateInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDateInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDateInput/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'underlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VDateInput/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VDateInput/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VDateInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VDateInput/max": {
"type": "unknown\n",
"description": "Maximum allowed date/month (ISO 8601 format)."
},
"VDateInput/min": {
"type": "unknown\n",
"description": "Minimum allowed date/month (ISO 8601 format)."
},
"VDateInput/multiple": {
"type": "number | boolean | (string & {}) | 'range'\n",
"description": "Allow the selection of multiple dates. The **range** value selects all dates between two selections."
},
"VDateInput/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VDateInput/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VDateInput/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VDateInput/role": {
"type": "string\n",
"description": "The role attribute applied to the input."
},
"VDateInput/autofocus": {
"type": "boolean\n",
"description": "Enables autofocus."
},
"VDateInput/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VDateInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VDateInput/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the outside the component's input, uses the same syntax as `v-icon`."
},
"VDateInput/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VDateInput/readonly": {
"type": "boolean\n",
"description": "Makes the picker readonly (doesn't allow to select new date)."
},
"VDateInput/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VDateInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VDateInput/header": {
"type": "string\n",
"description": "Text shown when no **display-date** is set."
},
"VDateInput/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDateInput/menu": {
"type": "boolean\n",
"description": "Renders with the menu open by default."
},
"VDateInput/menu-props": {
"type": "unknown\n",
"description": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended."
},
"VDateInput/transition": {
"type": "string\n",
"description": "The transition used when changing months into the future"
},
"VDateInput/counter": {
"type": "string | number | boolean\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VDateInput/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VDateInput/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VDateInput/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VDateInput/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VDateInput/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VDateInput/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VDateInput/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VDateInput/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VDateInput/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VDateInput/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VDateInput/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VDateInput/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VDateInput/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VDateInput/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VDateInput/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VDateInput/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VDateInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VDateInput/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VDateInput/append-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VDateInput/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VDateInput/clear-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VDateInput/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VDateInput/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VDateInput/prepend-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VDateInput/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VDateInput/counter-value": {
"type": "number | ((value: any) => number)\n",
"description": "Function returns the counter display text."
},
"VDateInput/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VDateInput/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VDateInput/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VDateInput/landscape": {
"type": "boolean\n",
"description": "Puts the picker into landscape mode."
},
"VDateInput/hide-header": {
"type": "boolean\n",
"description": "Hide the picker header."
},
"VDateInput/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VDateInput/cancel-text": {
"type": "string\n",
"description": "Text for the cancel button"
},
"VDateInput/ok-text": {
"type": "string\n",
"description": "Text for the ok button"
},
"VDateInput/hide-actions": {
"type": "boolean\n",
"description": "Hide the Cancel and OK buttons, and automatically update the value when a date is selected."
},
"VDateInput/picker-props": {
"type": "unknown\n",
"description": "Pass props through to the picker component. Intended for props that conflict with `v-text-field` (`color`, `width`, `rounded`, etc.)"
},
"VDateInput/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VDateInput/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for the previous button."
},
"VDateInput/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for the next button."
},
"VDateInput/month": {
"type": "string | number\n",
"description": "Sets the month."
},
"VDateInput/year": {
"type": "number\n",
"description": "Sets the year."
},
"VDateInput/display-format": {
"type": "string | ((date: unknown) => any)\n",
"description": "The format of the date that is displayed in the input. Can use any format [here](/features/dates/#format-options) or a custom function."
},
"VDateInput/update-on": {
"type": "('blur' | 'enter')[]\n",
"description": "Specifies when the text input should update the model value. If empty, the text field will go into read-only state."
},
"VDateInput/header-color": {
"type": "string\n",
"description": "Allows you to set a different color for the header when used in conjunction with the `color` prop."
},
"VDateInput/header-date-format": {
"type": "string\n",
"description": "Allows you to customize the format of the date selection text that appears in the header of the calendar."
},
"VDateInput/landscape-header-width": {
"type": "string | number\n",
"description": "Sets header width when in landscape mode."
},
"VDateInput/control-height": {
"type": "string | number\n",
"description": "Sets the height of the controls."
},
"VDateInput/control-variant": {
"type": "'docked' | 'modal'\n",
"description": "- **docked:** Separate control groups for month and year.\n- **modal:** Month and year are displayed together, clicking the text opens a month picker, clicking the dropdown arrow opens a year picker. There are also arrow buttons to scroll between months."
},
"VDateInput/no-month-picker": {
"type": "boolean\n",
"description": "Only applies to `controlVariant=\"modal\"`, the month and year picker buttons are combined into one that only opens the year picker."
},
"VDateInput/mode-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used for the mode button."
},
"VDateInput/view-mode": {
"type": "'month' | 'year' | 'months'\n",
"description": "Sets the view mode of the date picker."
},
"VDateInput/hide-weekdays": {
"type": "boolean\n",
"description": "Hides the weekdays."
},
"VDateInput/show-week": {
"type": "boolean\n",
"description": "Toggles visibility of the week numbers in the body of the calendar."
},
"VDateInput/reverse-transition": {
"type": "string\n",
"description": "The transition used when changing months into the past"
},
"VDateInput/events": {
"type": " | string[]\n | ((date: string) => string | boolean | string[])\n | Record\n",
"description": "Array of dates or object defining events or colors or function returning boolean/color/array of colors."
},
"VDateInput/event-color": {
"type": " | string\n | boolean\n | string[]\n | Record\n | ((date: string) => string | boolean | string[])\n",
"description": "Sets the color for event dots. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date."
},
"VDateInput/no-auto-navigation": {
"type": "boolean\n",
"description": "Prevents the displayed month from automatically following the selected value. Useful when building multi-calendar layouts where each picker manages its own view."
},
"VDateInput/show-adjacent-months": {
"type": "boolean\n",
"description": "Toggles visibility of days from previous and next months."
},
"VDateInput/weekdays": {
"type": "(0 | 1 | 2 | 4 | 5 | 6 | 3)[]\n",
"description": "An array of weekdays to display. Does not affect the order."
},
"VDateInput/weeks-in-month": {
"type": "'static' | 'dynamic'\n",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks."
},
"VDateInput/first-day-of-week": {
"type": "string | number\n",
"description": "Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateInput/first-day-of-year": {
"type": "string | number\n",
"description": "Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateInput/allowed-dates": {
"type": "unknown[] | ((date: unknown) => boolean)\n",
"description": "Restricts which dates can be selected."
},
"VDateInput/weekday-format": {
"type": "'long' | 'short' | 'narrow'\n",
"description": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateInput/preview-value": {
"type": "unknown\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDateInput/allowed-months": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which months can be selected."
},
"VDateInput/allowed-years": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which years can be selected."
},
"VDateInput/input-format": {
"type": "string\n",
"description": "Format for manual date input. Use yyyy, mm, dd with separators '.', '-', '/' (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy')."
},
"VDatePicker/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VDatePicker/header": {
"type": "string\n",
"description": "Text shown when no **display-date** is set."
},
"VDatePicker/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VDatePicker/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDatePicker/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VDatePicker/max": {
"type": "unknown\n",
"description": "Maximum allowed date/month (ISO 8601 format)."
},
"VDatePicker/min": {
"type": "unknown\n",
"description": "Minimum allowed date/month (ISO 8601 format)."
},
"VDatePicker/multiple": {
"type": "number | boolean | (string & {}) | 'range'\n",
"description": "Allow the selection of multiple dates. The **range** value selects all dates between two selections."
},
"VDatePicker/width": {
"type": "string | number\n",
"description": "Width of the picker."
},
"VDatePicker/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDatePicker/location": {
"type": "Anchor\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VDatePicker/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePicker/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VDatePicker/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VDatePicker/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VDatePicker/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VDatePicker/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VDatePicker/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDatePicker/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VDatePicker/transition": {
"type": "string\n",
"description": "The transition used when changing months into the future"
},
"VDatePicker/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VDatePicker/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VDatePicker/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VDatePicker/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VDatePicker/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePicker/position": {
"type": "'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'\n",
"description": "Sets the position for the component."
},
"VDatePicker/readonly": {
"type": "boolean\n",
"description": "Makes the picker readonly (doesn't allow to select new date)."
},
"VDatePicker/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VDatePicker/weekdays": {
"type": "(0 | 1 | 2 | 3 | 4 | 5 | 6)[]\n",
"description": "An array of weekdays to display. Does not affect the order."
},
"VDatePicker/first-day-of-week": {
"type": "string | number\n",
"description": "Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePicker/first-day-of-year": {
"type": "string | number\n",
"description": "Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePicker/weekday-format": {
"type": "'long' | 'short' | 'narrow'\n",
"description": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePicker/month": {
"type": "string | number\n",
"description": "Sets the month."
},
"VDatePicker/events": {
"type": " | string[]\n | ((date: string) => string | boolean | string[])\n | Record\n",
"description": "Array of dates or object defining events or colors or function returning boolean/color/array of colors."
},
"VDatePicker/event-color": {
"type": " | string\n | boolean\n | string[]\n | Record\n | ((date: string) => string | boolean | string[])\n",
"description": "Sets the color for event dots. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date."
},
"VDatePicker/year": {
"type": "number\n",
"description": "Sets the year."
},
"VDatePicker/show-week": {
"type": "boolean\n",
"description": "Toggles visibility of the week numbers in the body of the calendar."
},
"VDatePicker/hide-header": {
"type": "boolean\n",
"description": "Hides the header."
},
"VDatePicker/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Sets the icon for next month/year button."
},
"VDatePicker/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Sets the icon for previous month/year button."
},
"VDatePicker/reverse-transition": {
"type": "string\n",
"description": "The transition used when changing months into the past"
},
"VDatePicker/landscape": {
"type": "boolean\n",
"description": "Changes the picker to landscape mode."
},
"VDatePicker/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VDatePicker/header-color": {
"type": "string\n",
"description": "Allows you to set a different color for the header when used in conjunction with the `color` prop."
},
"VDatePicker/header-date-format": {
"type": "string\n",
"description": "Allows you to customize the format of the date selection text that appears in the header of the calendar."
},
"VDatePicker/landscape-header-width": {
"type": "string | number\n",
"description": "Sets header width when in landscape mode."
},
"VDatePicker/control-height": {
"type": "string | number\n",
"description": "Sets the height of the controls."
},
"VDatePicker/control-variant": {
"type": "'docked' | 'modal'\n",
"description": "- **docked:** Separate control groups for month and year.\n- **modal:** Month and year are displayed together, clicking the text opens a month picker, clicking the dropdown arrow opens a year picker. There are also arrow buttons to scroll between months."
},
"VDatePicker/no-month-picker": {
"type": "boolean\n",
"description": "Only applies to `controlVariant=\"modal\"`, the month and year picker buttons are combined into one that only opens the year picker."
},
"VDatePicker/mode-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon displayed next to the current month and year, toggles year selection when clicked."
},
"VDatePicker/view-mode": {
"type": "'month' | 'year' | 'months'\n",
"description": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`."
},
"VDatePicker/hide-weekdays": {
"type": "boolean\n",
"description": "Hides the weekdays."
},
"VDatePicker/no-auto-navigation": {
"type": "boolean\n",
"description": "Prevents the displayed month from automatically following the selected value. Useful when building multi-calendar layouts where each picker manages its own view."
},
"VDatePicker/show-adjacent-months": {
"type": "boolean\n",
"description": "Toggles visibility of days from previous and next months."
},
"VDatePicker/weeks-in-month": {
"type": "'static' | 'dynamic'\n",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks."
},
"VDatePicker/allowed-dates": {
"type": "unknown[] | ((date: unknown) => boolean)\n",
"description": "Restricts which dates can be selected."
},
"VDatePicker/preview-value": {
"type": "unknown\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDatePicker/allowed-months": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which months can be selected."
},
"VDatePicker/allowed-years": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which years can be selected."
},
"VDatePickerControls/disabled": {
"type": "string | boolean | string[]\n",
"description": "Removes the ability to click or target the component."
},
"VDatePickerControls/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VDatePickerControls/active": {
"type": "string | string[]\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VDatePickerControls/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the next button."
},
"VDatePickerControls/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the previous button."
},
"VDatePickerControls/control-height": {
"type": "string | number\n",
"description": "Sets the height of the controls."
},
"VDatePickerControls/control-variant": {
"type": "'docked' | 'modal'\n",
"description": "- **docked:** Separate control groups for month and year.\n- **modal:** Month and year are displayed together, clicking the text opens a month picker, clicking the dropdown arrow opens a year picker. There are also arrow buttons to scroll between months."
},
"VDatePickerControls/no-month-picker": {
"type": "boolean\n",
"description": "Only applies to `controlVariant=\"modal\"`, the month and year picker buttons are combined into one that only opens the year picker."
},
"VDatePickerControls/mode-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the mode button."
},
"VDatePickerControls/month-text": {
"type": "string\n",
"description": "Text displayed for the current month."
},
"VDatePickerControls/year-text": {
"type": "string\n",
"description": "Text displayed for the current year."
},
"VDatePickerControls/view-mode": {
"type": "'month' | 'year' | 'months'\n",
"description": "Sets the view mode of the date picker."
},
"VDatePickerHeader/header": {
"type": "string\n",
"description": "Sets the header content."
},
"VDatePickerHeader/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePickerHeader/transition": {
"type": "string\n",
"description": "Sets the transition when the header changes."
},
"VDatePickerHeader/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VDatePickerMonth/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDatePickerMonth/max": {
"type": "unknown\n",
"description": "Sets the maximum date of the month."
},
"VDatePickerMonth/min": {
"type": "unknown\n",
"description": "Sets the minimum date of the month."
},
"VDatePickerMonth/multiple": {
"type": "number | boolean | (string & {}) | 'range'\n",
"description": "Sets the multiple of the month."
},
"VDatePickerMonth/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDatePickerMonth/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePickerMonth/transition": {
"type": "string\n",
"description": "The transition used when changing months into the future"
},
"VDatePickerMonth/readonly": {
"type": "boolean\n",
"description": "Puts the picker in a readonly state."
},
"VDatePickerMonth/weekdays": {
"type": "(0 | 1 | 2 | 3 | 4 | 5 | 6)[]\n",
"description": "An array of weekdays to display. Does not affect the order."
},
"VDatePickerMonth/first-day-of-week": {
"type": "string | number\n",
"description": "Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePickerMonth/first-day-of-year": {
"type": "string | number\n",
"description": "Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePickerMonth/weekday-format": {
"type": "'long' | 'short' | 'narrow'\n",
"description": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDatePickerMonth/month": {
"type": "string | number\n",
"description": "Sets the month."
},
"VDatePickerMonth/events": {
"type": " | string[]\n | ((date: string) => string | boolean | string[])\n | Record\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDatePickerMonth/event-color": {
"type": " | string\n | boolean\n | string[]\n | Record\n | ((date: string) => string | boolean | string[])\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDatePickerMonth/year": {
"type": "string | number\n",
"description": "Sets the year."
},
"VDatePickerMonth/show-week": {
"type": "boolean\n",
"description": "Show the week number."
},
"VDatePickerMonth/reverse-transition": {
"type": "string\n",
"description": "The transition used when changing months into the past"
},
"VDatePickerMonth/hide-weekdays": {
"type": "boolean\n",
"description": "Hide the days of the week letters."
},
"VDatePickerMonth/no-auto-navigation": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDatePickerMonth/show-adjacent-months": {
"type": "boolean\n",
"description": "Show adjacent months."
},
"VDatePickerMonth/weeks-in-month": {
"type": "'static' | 'dynamic'\n",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks."
},
"VDatePickerMonth/allowed-dates": {
"type": "unknown[] | ((date: unknown) => boolean)\n",
"description": "Sets the allowed dates of the month."
},
"VDatePickerMonth/preview-value": {
"type": "unknown\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))"
},
"VDatePickerMonths/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VDatePickerMonths/max": {
"type": "unknown\n",
"description": "Sets the maximum selectable date. Months after this date will be disabled."
},
"VDatePickerMonths/min": {
"type": "unknown\n",
"description": "Sets the minimum selectable date. Months before this date will be disabled."
},
"VDatePickerMonths/model-value": {
"type": "number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDatePickerMonths/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePickerMonths/year": {
"type": "number\n",
"description": "Sets the year for the given months."
},
"VDatePickerMonths/columns": {
"type": "number\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))"
},
"VDatePickerMonths/allowed-months": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which months can be selected."
},
"VDatePickerYears/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VDatePickerYears/max": {
"type": "unknown\n",
"description": "Sets the maximum date of the month."
},
"VDatePickerYears/min": {
"type": "unknown\n",
"description": "Sets the minimum date of the month."
},
"VDatePickerYears/model-value": {
"type": "number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDatePickerYears/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDatePickerYears/columns": {
"type": "number\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerYears.json))"
},
"VDatePickerYears/allowed-years": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which years can be selected."
},
"VDateRangePicker/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VDateRangePicker/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VDateRangePicker/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDateRangePicker/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VDateRangePicker/max": {
"type": "unknown\n",
"description": "Sets the maximum date of the month."
},
"VDateRangePicker/min": {
"type": "unknown\n",
"description": "Sets the minimum date of the month."
},
"VDateRangePicker/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VDateRangePicker/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDateRangePicker/location": {
"type": "Anchor\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VDateRangePicker/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDateRangePicker/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VDateRangePicker/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VDateRangePicker/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VDateRangePicker/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VDateRangePicker/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VDateRangePicker/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDateRangePicker/transition": {
"type": "string\n",
"description": "The transition used when changing months into the future"
},
"VDateRangePicker/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VDateRangePicker/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VDateRangePicker/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VDateRangePicker/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VDateRangePicker/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDateRangePicker/position": {
"type": "'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'\n",
"description": "Sets the position for the component."
},
"VDateRangePicker/readonly": {
"type": "boolean\n",
"description": "Puts the picker in a readonly state."
},
"VDateRangePicker/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VDateRangePicker/weekdays": {
"type": "(0 | 1 | 2 | 3 | 4 | 5 | 6)[]\n",
"description": "An array of weekdays to display. Does not affect the order."
},
"VDateRangePicker/first-day-of-week": {
"type": "string | number\n",
"description": "Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateRangePicker/first-day-of-year": {
"type": "string | number\n",
"description": "Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateRangePicker/weekday-format": {
"type": "'long' | 'short' | 'narrow'\n",
"description": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)"
},
"VDateRangePicker/show-week": {
"type": "boolean\n",
"description": "Show the week number."
},
"VDateRangePicker/hide-header": {
"type": "boolean\n",
"description": "Hide the picker header."
},
"VDateRangePicker/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the next button."
},
"VDateRangePicker/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the previous button."
},
"VDateRangePicker/reverse-transition": {
"type": "string\n",
"description": "The transition used when changing months into the past"
},
"VDateRangePicker/landscape": {
"type": "boolean\n",
"description": "Puts the picker into landscape mode."
},
"VDateRangePicker/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VDateRangePicker/control-height": {
"type": "string | number\n",
"description": "Sets the height of the controls."
},
"VDateRangePicker/hide-weekdays": {
"type": "boolean\n",
"description": "Hide the days of the week letters."
},
"VDateRangePicker/weeks-in-month": {
"type": "'static' | 'dynamic'\n",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks."
},
"VDateRangePicker/allowed-dates": {
"type": "unknown[] | ((date: unknown) => boolean)\n",
"description": "Sets the allowed dates of the month."
},
"VDateRangePicker/allowed-months": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which months can be selected."
},
"VDateRangePicker/allowed-years": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which years can be selected."
},
"VDateRangePicker/independent-months": {
"type": "boolean\n",
"description": "Decouples the two calendar panels so each month can be navigated independently."
},
"VDefaultsProvider/reset": {
"type": "string | number\n",
"description": "Reset the default values up the nested chain by {n} amount."
},
"VDefaultsProvider/disabled": {
"type": "boolean\n",
"description": "Turns off all calculations of new default values for improved performance in situations where defaults propagation isn't necessary."
},
"VDefaultsProvider/root": {
"type": "string | boolean\n",
"description": "Force current defaults to match the application root defaults."
},
"VDefaultsProvider/scoped": {
"type": "boolean\n",
"description": "Prevents the ability for default values to be inherited from parent components."
},
"VDefaultsProvider/defaults": {
"type": "{\n global: Record\n [string]: Record\n}\n",
"description": "Specify new default prop values for components. Keep in mind that this will be merged with previously defined values."
},
"VDialog/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDialog/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VDialog/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VDialog/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VDialog/location": {
"type": "Anchor\n",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.."
},
"VDialog/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the content element."
},
"VDialog/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDialog/transition": {
"type": " | string\n | boolean\n | (TransitionProps & { component: Component })\n | {\n component: ComponentPublicInstanceConstructor<\n CreateComponentPublicInstanceWithMixins<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record,\n PublicProps,\n {},\n true,\n {},\n SlotsType>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n {},\n any,\n ComponentProvideOptions,\n OptionTypesType<{}, {}, {}, {}, {}, {}>,\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n {},\n {},\n {},\n {}\n >,\n any,\n any,\n any,\n ComputedOptions,\n MethodOptions\n > &\n ComponentOptionsBase<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record,\n string,\n {},\n {},\n string,\n SlotsType>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n ComponentProvideOptions\n > &\n VNodeProps &\n AllowedComponentProps &\n ComponentCustomProps & {\n filterProps: (props: T) => Partial>\n }\n }\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VDialog/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VDialog/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VDialog/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VDialog/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VDialog/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VDialog/fullscreen": {
"type": "boolean\n",
"description": "Changes layout for fullscreen display."
},
"VDialog/scrollable": {
"type": "boolean\n",
"description": "When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the [scrollable example](/components/dialogs#scrollable)."
},
"VDialog/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VDialog/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VDialog/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VDialog/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VDialog/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VDialog/no-click-animation": {
"type": "boolean\n",
"description": "Disables the bounce effect when clicking outside of a `v-dialog`'s content when using the **persistent** prop."
},
"VDialog/persistent": {
"type": "boolean\n",
"description": "Clicking outside of the element or pressing **esc** key will not deactivate it."
},
"VDialog/scrim": {
"type": "string | boolean\n",
"description": "Accepts true/false to enable background, and string to define color."
},
"VDialog/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VDialog/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VDialog/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VDialog/open-on-click": {
"type": "boolean\n",
"description": "Activate the component when the activator is clicked."
},
"VDialog/open-on-hover": {
"type": "boolean\n",
"description": "Designates whether component should activate when its activator is hovered."
},
"VDialog/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VDialog/close-on-content-click": {
"type": "boolean\n",
"description": "Closes component when you click on its content."
},
"VDialog/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VDialog/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VDialog/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VDialog/location-strategy": {
"type": "'static' | 'connected' | LocationStrategyFunction\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VDialog/origin": {
"type": "Anchor | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VDialog/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VDialog/stick-to-target": {
"type": "boolean\n",
"description": "Enables the overlay content to go off-screen when scrolling."
},
"VDialog/viewport-margin": {
"type": "string | number\n",
"description": "Sets custom viewport margin for the overlay content"
},
"VDialog/scroll-strategy": {
"type": "'close' | 'none' | 'block' | 'reposition' | ScrollStrategyFunction\n",
"description": "Strategy used when the component is activate and user scrolls."
},
"VDialog/retain-focus": {
"type": "boolean\n",
"description": "Captures and keeps focus within the content element when using **Tab** and **Shift**+**Tab**. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard."
},
"VDialog/capture-focus": {
"type": "boolean\n",
"description": "When enabled, focus will be trapped within the component's content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility."
},
"VDialog/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VDialogBottomTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VDialogBottomTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDialogBottomTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VDialogBottomTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VDialogBottomTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VDialogBottomTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VDialogTopTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VDialogTopTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VDialogTopTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VDialogTopTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VDialogTopTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VDialogTopTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VDialogTransition/target": {
"type": "HTMLElement | [number, number]\n",
"description": "Sets the target element for the transition."
},
"VDivider/length": {
"type": "string | number\n",
"description": "Sets the dividers length. Default unit is px."
},
"VDivider/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VDivider/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VDivider/variant": {
"type": "'dashed' | 'dotted' | 'double' | 'solid'\n",
"description": "Applies `border-style`."
},
"VDivider/vertical": {
"type": "boolean\n",
"description": "Displays dividers vertically."
},
"VDivider/inset": {
"type": "boolean\n",
"description": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**."
},
"VDivider/opacity": {
"type": "string | number\n",
"description": "Sets the component's opacity value"
},
"VDivider/gradient": {
"type": "boolean\n",
"description": "Adds fading effect for both sides."
},
"VDivider/thickness": {
"type": "string | number\n",
"description": "Sets the dividers thickness. Default unit is px."
},
"VDivider/content-offset": {
"type": "string | number | (string | number)[]\n",
"description": "Increases content spacing from the lines. When passed as an array, the second value shifts slot content down (or right in vertical mode)."
},
"VEmptyState/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VEmptyState/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VEmptyState/size": {
"type": "string | number\n",
"description": "The size used to control the dimensions of the media element inside the component. Can be specified as a number or a string (e.g., '50%', '100px')."
},
"VEmptyState/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VEmptyState/image": {
"type": "string\n",
"description": "Apply a specific image using [v-img](/components/images/)."
},
"VEmptyState/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VEmptyState/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VEmptyState/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VEmptyState/icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VEmptyState/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VEmptyState/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VEmptyState/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VEmptyState/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VEmptyState/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VEmptyState/href": {
"type": "string\n",
"description": "The URL the action button links to."
},
"VEmptyState/to": {
"type": "string\n",
"description": "The URL the action button links to."
},
"VEmptyState/justify": {
"type": "'start' | 'end' | 'center'\n",
"description": "Control the justification of the text."
},
"VEmptyState/headline": {
"type": "string\n",
"description": "A large headline often used for 404 pages."
},
"VEmptyState/action-text": {
"type": "string\n",
"description": "The text used for the action button."
},
"VEmptyState/text-width": {
"type": "string | number\n",
"description": "Sets the width of the text container."
},
"VExpandTransition/mode": {
"type": "'default' | 'in-out' | 'out-in'\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VExpandTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VExpandTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VExpandTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VExpandXTransition/mode": {
"type": "'default' | 'in-out' | 'out-in'\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VExpandXTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VExpandXTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VExpandXTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VExpansionPanel/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VExpansionPanel/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VExpansionPanel/disabled": {
"type": "boolean\n",
"description": "Disables the expansion-panel content."
},
"VExpansionPanel/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VExpansionPanel/value": {
"type": "any\n",
"description": "Controls the opened/closed state of content."
},
"VExpansionPanel/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VExpansionPanel/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VExpansionPanel/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VExpansionPanel/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VExpansionPanel/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VExpansionPanel/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VExpansionPanel/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VExpansionPanel/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VExpansionPanel/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VExpansionPanel/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VExpansionPanel/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VExpansionPanel/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VExpansionPanel/static": {
"type": "boolean\n",
"description": "Remove title size expansion when selected."
},
"VExpansionPanel/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VExpansionPanel/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VExpansionPanel/readonly": {
"type": "boolean\n",
"description": "Makes the expansion panel content read only."
},
"VExpansionPanel/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VExpansionPanel/hover": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))"
},
"VExpansionPanel/expand-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a expandable state."
},
"VExpansionPanel/collapse-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a collapsable state."
},
"VExpansionPanel/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon in the content title."
},
"VExpansionPanel/focusable": {
"type": "boolean\n",
"description": "Makes the expansion panel content focusable."
},
"VExpansionPanelText/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VExpansionPanelTitle/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VExpansionPanelTitle/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VExpansionPanelTitle/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VExpansionPanelTitle/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VExpansionPanelTitle/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VExpansionPanelTitle/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VExpansionPanelTitle/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VExpansionPanelTitle/static": {
"type": "boolean\n",
"description": "Remove title size expansion when selected."
},
"VExpansionPanelTitle/readonly": {
"type": "boolean\n",
"description": "Makes the expansion panel content read only."
},
"VExpansionPanelTitle/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VExpansionPanelTitle/hover": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))"
},
"VExpansionPanelTitle/expand-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a expandable state."
},
"VExpansionPanelTitle/collapse-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a collapsable state."
},
"VExpansionPanelTitle/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon in the content title."
},
"VExpansionPanelTitle/focusable": {
"type": "boolean\n",
"description": "Makes the expansion panel headers focusable."
},
"VExpansionPanels/flat": {
"type": "boolean\n",
"description": "Removes the expansion-panel's elevation and borders."
},
"VExpansionPanels/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VExpansionPanels/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VExpansionPanels/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VExpansionPanels/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VExpansionPanels/model-value": {
"type": "unknown\n",
"description": "Controls expanded panel(s). Defaults to an empty array when using **multiple** prop. It is recommended to set unique `value` prop for the panels inside, otherwise index is used instead."
},
"VExpansionPanels/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VExpansionPanels/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VExpansionPanels/rounded": {
"type": "string | number | boolean | (string | number)[]\n",
"description": "Applies a border radius to the first and last panel. Since v4.1.0 accepts array of two values to customize inner radius."
},
"VExpansionPanels/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VExpansionPanels/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VExpansionPanels/variant": {
"type": "'default' | 'inset' | 'accordion' | 'popout'\n",
"description": "Applies a distinct style to the component."
},
"VExpansionPanels/gap": {
"type": "string | number\n",
"description": "Sets the gap between panels. Hides the divider automatically."
},
"VExpansionPanels/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VExpansionPanels/static": {
"type": "boolean\n",
"description": "Remove title size expansion when selected."
},
"VExpansionPanels/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VExpansionPanels/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VExpansionPanels/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VExpansionPanels/readonly": {
"type": "boolean\n",
"description": "Makes the entire expansion panel read only."
},
"VExpansionPanels/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VExpansionPanels/hover": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))"
},
"VExpansionPanels/expand-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a expandable state."
},
"VExpansionPanels/collapse-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used when the expansion panel is in a collapsable state."
},
"VExpansionPanels/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon in the content title."
},
"VExpansionPanels/focusable": {
"type": "boolean\n",
"description": "Makes the expansion-panel headers focusable."
},
"VExpansionPanels/no-divider": {
"type": "boolean\n",
"description": "Hides the dividers between adjacent panels."
},
"VFab/symbol": {
"type": "any\n",
"description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/)."
},
"VFab/flat": {
"type": "boolean\n",
"description": "Removes the button box shadow. This is different than using the 'flat' variant."
},
"VFab/replace": {
"type": "boolean\n",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation."
},
"VFab/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VFab/name": {
"type": "string\n",
"description": "Assign a specific name for layout registration."
},
"VFab/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFab/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VFab/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VFab/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VFab/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFab/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VFab/location": {
"type": "Anchor\n",
"description": "The location of the fab relative to the layout. Only works when using **app**."
},
"VFab/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the component."
},
"VFab/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFab/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFab/extended": {
"type": "boolean\n",
"description": "An alternate style for the FAB that expects text."
},
"VFab/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VFab/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VFab/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VFab/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFab/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFab/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFab/order": {
"type": "string | number\n",
"description": "Adjust the order of the component in relation to its registration order."
},
"VFab/text": {
"type": "string | number | boolean\n",
"description": "Specify content text for the component."
},
"VFab/icon": {
"type": " | boolean\n | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_."
},
"VFab/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VFab/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VFab/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFab/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VFab/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFab/variant": {
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VFab/stacked": {
"type": "boolean\n",
"description": "Displays the button as a flex-column."
},
"VFab/position": {
"type": "'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'\n",
"description": "Sets the position for the component."
},
"VFab/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VFab/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VFab/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VFab/offset": {
"type": "boolean\n",
"description": "Translates the Fab up or down, depending on if location is set to **top** or **bottom**."
},
"VFab/block": {
"type": "boolean\n",
"description": "Expands the button to 100% of available space."
},
"VFab/active-color": {
"type": "string\n",
"description": "The applied color when the component is in an active state."
},
"VFab/href": {
"type": "string\n",
"description": "Designates the component as anchor and applies the **href** attribute."
},
"VFab/to": {
"type": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric\n",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
},
"VFab/exact": {
"type": "boolean\n",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
},
"VFab/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content."
},
"VFab/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VFab/readonly": {
"type": "boolean\n",
"description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard."
},
"VFab/slim": {
"type": "boolean\n",
"description": "Reduces padding to 0 8px."
},
"VFab/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VFab/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VFab/layout": {
"type": "boolean\n",
"description": "If true, will effect layout dimensions based on size and position."
},
"VFab/app": {
"type": "boolean\n",
"description": "If true, attaches to the closest layout and positions according to the value of **location**."
},
"VFab/appear": {
"type": "boolean\n",
"description": "Used to control the animation of the FAB."
},
"VFabTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VFabTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFabTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VFabTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VFabTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VFabTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VFadeTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VFadeTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFadeTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VFadeTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VFadeTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VFadeTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VField/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VField/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VField/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VField/details": {
"type": "boolean\n",
"description": "Controls whether the field generates an `aria-describedby` attribute for accessibility."
},
"VField/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VField/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VField/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VField/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VField/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VField/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VField/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VField/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VField/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VField/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VField/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VField/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VField/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VField/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VField/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VField/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VField/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VField/append-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VField/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VField/clear-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VField/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VField/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VField/prepend-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VField/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VField/label-id": {
"type": "string\n",
"description": "Sets the DOM id on the inner label element. Useful for associating the label with custom input elements."
},
"VFieldLabel/floating": {
"type": "boolean\n",
"description": "Elevates the label above the slotted content."
},
"VFileInput/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VFileInput/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VFileInput/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VFileInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VFileInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VFileInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VFileInput/multiple": {
"type": "boolean\n",
"description": "Adds the **multiple** attribute to the input, allowing multiple file selections."
},
"VFileInput/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFileInput/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VFileInput/model-value": {
"type": "File | File[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VFileInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFileInput/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFileInput/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFileInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFileInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFileInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFileInput/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VFileInput/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VFileInput/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VFileInput/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VFileInput/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VFileInput/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VFileInput/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VFileInput/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VFileInput/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VFileInput/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VFileInput/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VFileInput/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VFileInput/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VFileInput/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VFileInput/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VFileInput/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VFileInput/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VFileInput/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VFileInput/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VFileInput/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VFileInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VFileInput/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VFileInput/chips": {
"type": "boolean\n",
"description": "Changes display of selections to chips."
},
"VFileInput/counter": {
"type": "boolean\n",
"description": "Displays the number of selected files."
},
"VFileInput/append-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VFileInput/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VFileInput/clear-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VFileInput/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VFileInput/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VFileInput/prepend-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VFileInput/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VFileInput/counter-size-string": {
"type": "string\n",
"description": "The text displayed when using the **counter** and **show-size** props. Can also be customized globally on the [internationalization page](/customization/internationalization)."
},
"VFileInput/counter-string": {
"type": "string\n",
"description": "The text displayed when using the **counter** prop. Can also be customized globally on the [internationalization page](/customization/internationalization)."
},
"VFileInput/hide-input": {
"type": "boolean\n",
"description": "Display the icon only without the input (file names)."
},
"VFileInput/show-size": {
"type": "boolean | 1000 | 1024\n",
"description": "Sets the displayed size of selected file(s). When using **true** will default to _1000_ displaying (**kB, MB, GB**) while _1024_ will display (**KiB, MiB, GiB**)."
},
"VFileInput/truncate-length": {
"type": "string | number\n",
"description": "The length of a filename before it is truncated with ellipsis."
},
"VFileInput/filter-by-type": {
"type": "string\n",
"description": "Make the input accept only files matched by one or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers). Applies to drag & drop and selecting folders. Emits `rejected` event when some files do not pass through to make it possible to notify user and deliver better user experience."
},
"VFileUpload/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VFileUpload/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VFileUpload/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VFileUpload/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VFileUpload/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFileUpload/multiple": {
"type": "boolean\n",
"description": "Allows multiple files to be uploaded."
},
"VFileUpload/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFileUpload/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VFileUpload/model-value": {
"type": "File | File[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VFileUpload/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileUpload/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFileUpload/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFileUpload/icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VFileUpload/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFileUpload/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFileUpload/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VFileUpload/scrim": {
"type": "string | boolean\n",
"description": "Determines whether an overlay is used when hovering over the component with files. Accepts true/false to enable background, and string to define color."
},
"VFileUpload/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VFileUpload/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VFileUpload/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VFileUpload/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VFileUpload/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VFileUpload/subtitle": {
"type": "string\n",
"description": "Specify a subtitle text for the component."
},
"VFileUpload/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VFileUpload/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the input is focused and apply color."
},
"VFileUpload/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VFileUpload/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VFileUpload/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VFileUpload/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VFileUpload/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VFileUpload/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VFileUpload/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VFileUpload/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VFileUpload/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VFileUpload/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VFileUpload/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VFileUpload/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VFileUpload/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VFileUpload/show-size": {
"type": "boolean\n",
"description": "Shows the size of the file."
},
"VFileUpload/filter-by-type": {
"type": "string\n",
"description": "Make the input accept only files matched by one or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers). Applies to drag & drop and selecting folders. Emits `rejected` event when some files do not pass through to make it possible to notify user and deliver better user experience."
},
"VFileUpload/browse-text": {
"type": "string\n",
"description": "Text for the browse button."
},
"VFileUpload/divider-text": {
"type": "string\n",
"description": "Text in the divider."
},
"VFileUpload/inset-file-list": {
"type": "boolean\n",
"description": "Renders the file list inside the dropzone container instead of below it."
},
"VFileUpload/hide-browse": {
"type": "boolean\n",
"description": "Hides the browse button."
},
"VFileUploadDropzone/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VFileUploadDropzone/length": {
"type": "string | number\n",
"description": "Sets the dividers length. Default unit is px."
},
"VFileUploadDropzone/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VFileUploadDropzone/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VFileUploadDropzone/model-value": {
"type": "File[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VFileUploadDropzone/error": {
"type": "boolean\n",
"description": "Puts the dropzone in an error state, changing the border color."
},
"VFileUploadDropzone/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFileUploadDropzone/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VFileUploadDropzone/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VFileUploadDropzone/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFileUploadDropzone/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VFileUploadDropzone/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFileUploadDropzone/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFileUploadDropzone/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VFileUploadDropzone/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VFileUploadDropzone/location": {
"type": "Anchor\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VFileUploadDropzone/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VFileUploadDropzone/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFileUploadDropzone/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFileUploadDropzone/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VFileUploadDropzone/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFileUploadDropzone/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileUploadDropzone/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFileUploadDropzone/multiple": {
"type": "boolean\n",
"description": "Allows multiple files to be uploaded."
},
"VFileUploadDropzone/readonly": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUploadDropzone.json))"
},
"VFileUploadDropzone/subtitle": {
"type": "string\n",
"description": "Specify a subtitle text for the component."
},
"VFileUploadDropzone/opacity": {
"type": "string | number\n",
"description": "Sets the component's opacity value"
},
"VFileUploadDropzone/scrim": {
"type": "string | boolean\n",
"description": "Determines whether an overlay is used when hovering over the component with files. Accepts true/false to enable background, and string to define color."
},
"VFileUploadDropzone/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VFileUploadDropzone/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VFileUploadDropzone/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VFileUploadDropzone/browse-text": {
"type": "string\n",
"description": "Text for the browse button."
},
"VFileUploadDropzone/divider-text": {
"type": "string\n",
"description": "Text in the divider."
},
"VFileUploadDropzone/hide-browse": {
"type": "boolean\n",
"description": "Hides the browse button."
},
"VFileUploadDropzone/inset-file-list": {
"type": "boolean\n",
"description": "Renders the file list inside the dropzone container instead of below it."
},
"VFileUploadDropzone/show-size": {
"type": "boolean\n",
"description": "Shows the size of the file."
},
"VFileUploadDropzone/thickness": {
"type": "string | number\n",
"description": "Sets the dividers thickness. Default unit is px."
},
"VFileUploadItem/title": {
"type": "string | number | boolean\n",
"description": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead."
},
"VFileUploadItem/replace": {
"type": "boolean\n",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation."
},
"VFileUploadItem/link": {
"type": "boolean\n",
"description": "Designates that the component is a link. This is automatic when using the href or to prop."
},
"VFileUploadItem/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VFileUploadItem/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFileUploadItem/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VFileUploadItem/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VFileUploadItem/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFileUploadItem/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VFileUploadItem/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFileUploadItem/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFileUploadItem/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VFileUploadItem/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VFileUploadItem/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFileUploadItem/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFileUploadItem/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VFileUploadItem/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFileUploadItem/color": {
"type": "string\n",
"description": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),"
},
"VFileUploadItem/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VFileUploadItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VFileUploadItem/value": {
"type": "any\n",
"description": "The value used for selection. Obtained from [`v-list`](/api/v-list)'s `v-model:selected` when the item is selected."
},
"VFileUploadItem/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VFileUploadItem/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VFileUploadItem/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VFileUploadItem/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content."
},
"VFileUploadItem/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VFileUploadItem/slim": {
"type": "boolean\n",
"description": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation."
},
"VFileUploadItem/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VFileUploadItem/href": {
"type": "string\n",
"description": "Designates the component as anchor and applies the **href** attribute."
},
"VFileUploadItem/exact": {
"type": "boolean\n",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
},
"VFileUploadItem/to": {
"type": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric\n",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
},
"VFileUploadItem/subtitle": {
"type": "string | number | boolean\n",
"description": "Specify a subtitle text for the component."
},
"VFileUploadItem/active-class": {
"type": "string\n",
"description": "The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation."
},
"VFileUploadItem/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop."
},
"VFileUploadItem/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children."
},
"VFileUploadItem/nav": {
"type": "boolean\n",
"description": "Reduces the width v-list-item takes up as well as adding a border radius."
},
"VFileUploadItem/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VFileUploadItem/index": {
"type": "number\n",
"description": "The index of the file in the upload list."
},
"VFileUploadItem/prepend-avatar": {
"type": "string\n",
"description": "Prepends a [v-avatar](/components/avatars/) component in the **prepend** slot before default content."
},
"VFileUploadItem/append-avatar": {
"type": "string\n",
"description": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot."
},
"VFileUploadItem/show-size": {
"type": "boolean\n",
"description": "Show the size of the file"
},
"VFileUploadItem/file": {
"type": "File\n",
"description": "The file object uploaded"
},
"VFileUploadItem/file-icon": {
"type": "string\n",
"description": "The icon prepending each uploaded file. This will be a preview image if the file is an image."
},
"VFileUploadItem/tabindex": {
"type": "string | number\n",
"description": "Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy=\"track\"` to prevent Tab key navigation into items."
},
"VFileUploadList/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VFileUploadList/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VFileUploadList/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VFileUploadList/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VFileUploadList/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VFileUploadList/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VFileUploadList/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VFileUploadList/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VFileUploadList/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VFileUploadList/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VFileUploadList/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFileUploadList/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFileUploadList/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VFileUploadList/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFileUploadList/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileUploadList/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VFileUploadList/activated": {
"type": "any\n",
"description": "Array of ids of activated nodes."
},
"VFileUploadList/disabled": {
"type": "boolean\n",
"description": "Puts all children inputs into a disabled state."
},
"VFileUploadList/files": {
"type": "File[]\n",
"description": "An array of File objects to display in the list. When used inside a VFileUpload, this is provided automatically via injection."
},
"VFileUploadList/items": {
"type": "any[]\n",
"description": "Can be an array of objects or strings. By default objects should have a **title** property, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props), a **value** property to allow selection, and a **children** property containing more item objects. Keys to use for these can be changed with the **item-title**, **item-value**, **item-props**, and **item-children** props."
},
"VFileUploadList/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VFileUploadList/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VFileUploadList/slim": {
"type": "boolean\n",
"description": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation."
},
"VFileUploadList/active-class": {
"type": "string\n",
"description": "The class applied to the component when it is in an active state."
},
"VFileUploadList/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFileUploadList/filterable": {
"type": "boolean\n",
"description": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox."
},
"VFileUploadList/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the list item is collapsed."
},
"VFileUploadList/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the list item is expanded."
},
"VFileUploadList/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers."
},
"VFileUploadList/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children."
},
"VFileUploadList/indent": {
"type": "string | number\n",
"description": "Overrides the indent size for nested groups."
},
"VFileUploadList/nav": {
"type": "boolean\n",
"description": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**."
},
"VFileUploadList/navigation-strategy": {
"type": "'focus' | 'track'\n",
"description": "Determines keyboard navigation behavior. **focus** (default) moves DOM focus to items, suitable for traditional lists. **track** provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex=\"-1\"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling."
},
"VFileUploadList/navigation-index": {
"type": "number\n",
"description": "Specifies the currently selected navigation index when using `navigationStrategy=\"track\"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items."
},
"VFileUploadList/activatable": {
"type": "boolean\n",
"description": "Designates whether the list items are activatable. Additionally, sets necessary accessibility attributes internally."
},
"VFileUploadList/selectable": {
"type": "boolean\n",
"description": "Designates whether the list items are selectable. Additionally, sets necessary accessibility attributes internally."
},
"VFileUploadList/opened": {
"type": "any\n",
"description": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`."
},
"VFileUploadList/selected": {
"type": "any\n",
"description": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`."
},
"VFileUploadList/mandatory": {
"type": "boolean\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VFileUploadList/items-registration": {
"type": "'props' | 'render'\n",
"description": "When set to 'props', skips rendering collapsed items/nodes (for significant performance gains)."
},
"VFileUploadList/active-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | ActiveStrategy\n | ((mandatory: boolean) => ActiveStrategy)\n",
"description": "Affects how items with children behave when activated. If not specified, the **single-independent** strategy will be used.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **single-leaf:** Similar as **leaf**, but only a single item can be activated at a time.\n- **independent:** All nodes can be activated whether they have children or not.\n- **single-independent:** Similar as **independent**, but only a single item can be activated at a time."
},
"VFileUploadList/select-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | 'classic'\n | 'trunk'\n | 'branch'\n | SelectStrategy\n | ((mandatory: boolean) => SelectStrategy)\n",
"description": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model.\n- **branch**: Same as classic but if any of a node's children are selected then that node will also be added to the model."
},
"VFileUploadList/open-strategy": {
"type": "'list' | 'multiple' | 'single' | OpenStrategy\n",
"description": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected."
},
"VFileUploadList/item-title": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that contains its title."
},
"VFileUploadList/item-value": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that contains its value."
},
"VFileUploadList/item-children": {
"type": "SelectItemKey\n",
"description": "Property on supplied `items` that contains its children."
},
"VFileUploadList/item-props": {
"type": "SelectItemKey\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VFileUploadList/item-type": {
"type": "SelectItemKey\n",
"description": "Designates the key on the supplied items that is used for determining the nodes type."
},
"VFileUploadList/return-object": {
"type": "boolean\n",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**."
},
"VFileUploadList/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VFileUploadList/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VFileUploadList/show-size": {
"type": "boolean\n",
"description": "Shows the size of each file."
},
"VFooter/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VFooter/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VFooter/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VFooter/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VFooter/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the component."
},
"VFooter/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VFooter/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VFooter/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VFooter/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VFooter/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VFooter/name": {
"type": "string\n",
"description": "Assign a specific name for layout registration."
},
"VFooter/app": {
"type": "boolean\n",
"description": "Determines the position of the footer. If true, the footer would be given a fixed position at the bottom of the viewport. If false, the footer is set to the bottom of the page."
},
"VFooter/order": {
"type": "string | number\n",
"description": "Adjust the order of the component in relation to its registration order."
},
"VForm/model-value": {
"type": "boolean\n",
"description": "The value representing the validity of the form. If the value is `null` then no validation has taken place yet, or the form has been reset. Otherwise the value will be a `boolean` that indicates if validation has passed or not."
},
"VForm/disabled": {
"type": "boolean\n",
"description": "Puts all children inputs into a disabled state."
},
"VForm/readonly": {
"type": "boolean\n",
"description": "Puts all children inputs into a readonly state."
},
"VForm/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Changes the events in which validation occurs."
},
"VForm/fast-fail": {
"type": "boolean\n",
"description": "Stop validation as soon as any rules fail."
},
"VHeatmap/rounded": {
"type": "string | number\n",
"description": "Cell corner radius. Accepts a number or string with `px` or `%` units only — the value is passed directly to the SVG `` `rx`/`ry` attributes."
},
"VHeatmap/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VHeatmap/items": {
"type": "Record[]\n",
"description": "Data items to render."
},
"VHeatmap/item-value": {
"type": "SelectItemKey\n",
"description": "Property name or function that returns the numeric value of an item, used for cell color matching."
},
"VHeatmap/item-props": {
"type": " | Record\n | ((item: {\n value: number\n bucketIndex: number\n mixPercentage: number\n color: string\n raw: Record\n row: any\n column: any\n groupKey: string\n }) => Record)\n",
"description": "Additional props to pass to each `v-heatmap-cell`."
},
"VHeatmap/legend": {
"type": " | boolean\n | { labels: string[]; cellSize: string | number | (string | number)[] }\n",
"description": "Controls the legend rendered below the grid. Accepts boolean or an object allowing you to configure labels and legend cell size."
},
"VHeatmap/group-by": {
"type": "SelectItemKey\n",
"description": "Property name or function used to split items into separate column groups (e.g. by month)."
},
"VHeatmap/hover": {
"type": "boolean\n",
"description": "Enables the hover interaction that scales a cell when hovered."
},
"VHeatmap/columns": {
"type": "any[]\n",
"description": "Explicit list of column keys. When omitted, columns are derived from the items."
},
"VHeatmap/cell-size": {
"type": "string | number | (string | number)[]\n",
"description": "Sets size of each cell. A single value sets both width and height. Accepts `[width, height]` tuple."
},
"VHeatmap/gap": {
"type": "string | number\n",
"description": "Spacing between cells."
},
"VHeatmap/group-gap": {
"type": "string | number\n",
"description": "Spacing between column groups, in pixels."
},
"VHeatmap/hide-column-headers": {
"type": "boolean\n",
"description": "Hides the column labels."
},
"VHeatmap/hide-row-headers": {
"type": "boolean\n",
"description": "Hides the row labels."
},
"VHeatmap/hover-scale": {
"type": "string | number\n",
"description": "Controls the cell's scale factor applied on hover."
},
"VHeatmap/item-row": {
"type": "SelectItemKey\n",
"description": "Property name or function that returns the row key of an item."
},
"VHeatmap/item-column": {
"type": "SelectItemKey\n",
"description": "Property name or function that returns the column key of an item."
},
"VHeatmap/thresholds": {
"type": " | { min: number; color: string }[]\n | {\n from: { min: number; color: string }\n to: { min: number; color: string }\n colorSpace:\n | 'hsl'\n | 'srgb'\n | 'srgb-linear'\n | 'hwb'\n | 'lab'\n | 'lch'\n | 'oklab'\n | 'oklch'\n hueInterpolation: 'shorter' | 'longer'\n }\n",
"description": "Controls how each item's value maps to a cell color. Two forms:\n- **Buckets:** an array of `{ min, color }` stops. Each cell takes the color of the highest stop whose `min` it meets or exceeds.\n- **Linear:** a `{ from, to }` pair that interpolates between two stops via `color-mix`. Optional `colorSpace` (e.g. `'oklch'`) picks the interpolation space, and `hueInterpolation` (`'shorter'` / `'longer'``) controls hue path in polar spaces."
},
"VHeatmap/empty-color": {
"type": "string\n",
"description": "Fill color for cells with `null` value."
},
"VHeatmap/rows": {
"type": "any[]\n",
"description": "Explicit list of row keys. When omitted, rows are derived from the items in insertion order."
},
"VHeatmapCell/height": {
"type": "number\n",
"description": "Cell height in pixels."
},
"VHeatmapCell/width": {
"type": "number\n",
"description": "Cell width in pixels."
},
"VHeatmapCell/disabled": {
"type": "boolean\n",
"description": "Renders the cell in a disabled when toggled off using interactive legend state."
},
"VHeatmapCell/item": {
"type": "{\n value: number\n bucketIndex: number\n mixPercentage: number\n color: string\n raw: Record\n row: any\n column: any\n groupKey: string\n}\n",
"description": "Heatmap cell data. Exposes `value` and `color` for use in slot content."
},
"VHeatmapCell/cell-props": {
"type": "unknown\n",
"description": "Additional attributes spread on the cell `` element. A `title` value renders as an SVG `` child (native tooltip)."
},
"VHeatmapCell/y": {
"type": "number\n",
"description": "Vertical offset of the cell within the parent SVG."
},
"VHeatmapCell/x": {
"type": "number\n",
"description": "Horizontal offset of the cell within the parent SVG."
},
"VHighlight/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VHighlight/match-all": {
"type": "boolean\n",
"description": "When enabled, all occurrences of each query term are highlighted. When disabled, only the first occurrence of each term is highlighted. Has no effect when **matches** is provided."
},
"VHighlight/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VHighlight/color": {
"type": "string\n",
"description": "Applies a theme or CSS color to highlighted matches. The background is derived by mixing this color with the theme's highlight opacity."
},
"VHighlight/matches": {
"type": "[number, number][]\n",
"description": "Pre-computed match ranges as `[start, end]` pairs. Takes priority over **query** when provided and non-empty."
},
"VHighlight/opacity": {
"type": "string | number\n",
"description": "Overrides the background opacity of highlighted matches. Accepts only CSS `<percentage>` - use `30%` instead of `0.3`."
},
"VHighlight/ignore-case": {
"type": "boolean\n",
"description": "When enabled, matching is case-insensitive."
},
"VHighlight/mark-class": {
"type": "string\n",
"description": "Additional CSS class(es) applied to each `<mark>` element wrapping a highlighted match."
},
"VHighlight/query": {
"type": "string | string[]\n",
"description": "The search string or array of strings to highlight within the text."
},
"VHotkey/keys": {
"type": "string\n",
"description": "String representing keyboard shortcuts to display. Supports multiple formats:\n- **Single keys:** `\"k\"`, `\"enter\"`, `\"escape\"`\n- **Key combinations:** `\"ctrl+k\"`, `\"meta+shift+p\"`, `\"alt+arrowup\"`\n- **Sequential actions:** `\"ctrl+k-then-p\"` (use dash for 'then' relationships)\n- **Multiple shortcuts:** `\"ctrl+k meta+p\"` (space-separated for alternative shortcuts)\n\nSupports platform-aware key names like `meta` (becomes Cmd on Mac, Ctrl on PC) and `alt` (becomes Option on Mac)."
},
"VHotkey/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VHotkey/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VHotkey/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VHotkey/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VHotkey/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VHotkey/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VHotkey/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VHotkey/variant": {
"type": " | 'text'\n | 'flat'\n | 'elevated'\n | 'tonal'\n | 'outlined'\n | 'plain'\n | 'contained'\n",
"description": "Controls the visual style and presentation of the hotkey component. Supports standard Vuetify variants plus a special contained variant:\n\n**Standard Variants** (apply styling to individual key elements):\n- **elevated (default):** Raised appearance with shadow, good for standalone hotkey displays\n- **flat:** Solid background without shadow, clean and minimal\n- **tonal:** Subtle tinted background without border, balances visibility with restraint\n- **outlined:** Border-only styling without elevation, lightweight and unobtrusive\n- **text:** Minimal styling with text color emphasis only, blends with content\n- **plain:** No background or border, most subtle option\n\n**Special Variant** (different visual structure):\n- **contained:** Follows MDN's nested `<kbd>` pattern - wraps all keys in a single styled container with unstyled nested elements. Creates a cohesive visual unit that clearly groups related keys together. Cannot be combined with standard variants. Ideal for complex key combinations where you want to show the entire sequence as one unit."
},
"VHotkey/disabled": {
"type": "boolean\n",
"description": "Applies a disabled visual state to the component."
},
"VHotkey/prefix": {
"type": "string\n",
"description": "Text to display before the hotkey."
},
"VHotkey/suffix": {
"type": "string\n",
"description": "Text to display after the hotkey."
},
"VHotkey/inline": {
"type": "boolean\n",
"description": "Optimizes the component for seamless integration within text content and documentation. Applies compact styling with baseline alignment, constrained height (1lh), and responsive typography that inherits from parent text. Ideal for help documentation, tooltips, and instructional content. When using multiple inline hotkeys in the same paragraph, increase line-height to prevent visual overlap on text wrapping."
},
"VHotkey/display-mode": {
"type": "'symbol' | 'text' | 'icon'\n",
"description": "Controls how keyboard keys are visually represented. Affects the entire component's appearance:\n- **icon:** Uses SVG icons for keys when appropriate (default)\n- **symbol:** Uses Unicode symbols (⌘, ⌃, ⇧, ⌥) - Allows you to manage presentation of modifier keys with fonts\n- **text:** Uses full text labels (Command, Control, Shift, Alt) - most accessible and descriptive"
},
"VHotkey/key-map": {
"type": "unknown\n",
"description": "Custom key mapping object that defines how individual keys should be displayed. Users can import and modify the exported `hotkeyMap` to create custom configurations. Each key maps to a `PlatformKeyConfig` object with:\n\n```typescript\n{\n mac?: { symbol?: string, icon?: string, text: string },\n default: { symbol?: string, icon?: string, text: string }\n}\n```\n\n**Usage Example:**\n```typescript\nimport { hotkeyMap } from 'vuetify/labs/VHotkey'\n\nconst customKeyMap = {\n ...hotkeyMap,\n 'custom-key': {\n default: { text: 'Custom', icon: 'custom-icon' },\n mac: { text: 'Custom', symbol: '⚡' }\n }\n}\n```\n\nThis enables:\n- **Custom key definitions:** Add support for application-specific keys\n- **Localization:** Override text representations for different languages\n- **Brand customization:** Change how modifier keys appear\n- **Platform-specific styling:** Different representations for Mac vs other platforms\n\nRecommended to set at the application level via component defaults rather than per-instance for consistency."
},
"VHotkey/platform": {
"type": "'auto' | 'pc' | 'mac'\n",
"description": "Controls platform-specific rendering behavior for keyboard shortcuts. Accepts three values:\n- **`'auto'` (default):** Automatically detects the user's platform based on user agent and renders appropriately\n- **`'mac'`:** Forces Mac-style rendering (Command symbols, icons, Option key, etc.)\n- **`'pc'`:** Forces PC-style rendering (Ctrl text, Alt key, etc.)\n\nThis is particularly useful for:\n- **Cross-platform testing:** Verify how shortcuts appear on different platforms\n- **Design consistency:** Ensure specific platform rendering in demos and prototypes\n- **Development workflow:** Test platform-specific behaviors without switching devices\n- **Documentation:** Show platform-specific examples in help content"
},
"VHover/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VHover/disabled": {
"type": "boolean\n",
"description": "Removes hover functionality."
},
"VHover/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VHover/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VIcon/end": {
"type": "boolean\n",
"description": "Applies margin at the start of the component."
},
"VIcon/start": {
"type": "boolean\n",
"description": "Applies margin at the end of the component."
},
"VIcon/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VIcon/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VIcon/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VIcon/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VIcon/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VIcon/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VIcon/opacity": {
"type": "string | number\n",
"description": "Sets the component's opacity value"
},
"VIconBtn/text": {
"type": "string | number | boolean\n",
"description": "Specify content text for the component."
},
"VIconBtn/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VIconBtn/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VIconBtn/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VIconBtn/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VIconBtn/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VIconBtn/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VIconBtn/icon-sizes": {
"type": "['default' | 'small' | 'x-small' | 'large' | 'x-large', number][]\n",
"description": "An array of tuples that define the icon sizes for each named size."
},
"VIconBtn/icon-size": {
"type": "string | number\n",
"description": "The specific size of the icon, can use named sizes."
},
"VIconBtn/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VIconBtn/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VIconBtn/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VIconBtn/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VIconBtn/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VIconBtn/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VIconBtn/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VIconBtn/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component."
},
"VIconBtn/active": {
"type": "boolean\n",
"description": "When undefined (default), the component utilizes its default variant, otherwise it will use the activeVariant if active is true, or the baseVariant if active is false."
},
"VIconBtn/active-color": {
"type": "string\n",
"description": "The applied color when the component is in an active state."
},
"VIconBtn/readonly": {
"type": "boolean\n",
"description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard."
},
"VIconBtn/loading": {
"type": "boolean\n",
"description": "Displays circular progress bar in place of the icon."
},
"VIconBtn/opacity": {
"type": "string | number\n",
"description": "Sets the component's opacity value"
},
"VIconBtn/icon-color": {
"type": "string\n",
"description": "Explicit color applied to the icon."
},
"VIconBtn/base-variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "When active is a boolean, this variant is used when active is false."
},
"VIconBtn/hide-overlay": {
"type": "boolean\n",
"description": "Hides overlay from being displayed when active or focused."
},
"VIconBtn/rotate": {
"type": "string | number\n",
"description": "The rotation of the icon in degrees."
},
"VIconBtn/sizes": {
"type": "['default' | 'small' | 'x-small' | 'large' | 'x-large', number][]\n",
"description": "An array of tuples that define the button sizes for each named size."
},
"VIconBtn/active-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "When active is a boolean, this icon is used when active is true."
},
"VIconBtn/active-variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "When active is a boolean, this variant is used when active is true."
},
"VImg/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VImg/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VImg/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VImg/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VImg/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VImg/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VImg/position": {
"type": "string\n",
"description": "Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements."
},
"VImg/absolute": {
"type": "boolean\n",
"description": "Applies position: absolute to the component."
},
"VImg/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VImg/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VImg/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VImg/alt": {
"type": "string\n",
"description": "Alternate text for screen readers. Leave empty for decorative images."
},
"VImg/src": {
"type": " | string\n | { src: string; srcset: string; lazySrc: string; aspect: number }\n",
"description": "The image URL. This prop is mandatory."
},
"VImg/draggable": {
"type": "boolean | 'true' | 'false'\n",
"description": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable)."
},
"VImg/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VImg/content-class": {
"type": "any\n",
"description": "Apply a custom class to the internal content element."
},
"VImg/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "The transition to use when switching from `lazy-src` to `src`. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VImg/options": {
"type": "IntersectionObserverInit\n",
"description": "Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor."
},
"VImg/inline": {
"type": "boolean\n",
"description": "Display as an inline element instead of a block, also disables flex-grow."
},
"VImg/gradient": {
"type": "string\n",
"description": "The gradient to apply to the image. Only supports [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) syntax, anything else should be done with classes."
},
"VImg/sizes": {
"type": "string\n",
"description": "For use with `srcset`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)."
},
"VImg/cover": {
"type": "boolean\n",
"description": "Resizes the background image to cover the entire container."
},
"VImg/image-class": {
"type": "any\n",
"description": "Applies CSS classes to the inner `<img>` element."
},
"VImg/lazy-src": {
"type": "string\n",
"description": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied. \nNOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided."
},
"VImg/srcset": {
"type": "string\n",
"description": "A set of alternate images to use based on device size. [Read more...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)."
},
"VImg/aspect-ratio": {
"type": "string | number\n",
"description": "Calculated as `width/height`, so for a 1920x1080px image this will be `1.7778`. Will be calculated automatically if omitted."
},
"VImg/crossorigin": {
"type": "'' | 'anonymous' | 'use-credentials'\n",
"description": "Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)"
},
"VImg/referrerpolicy": {
"type": " | 'origin'\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'origin-when-cross-origin'\n | 'same-origin'\n | 'strict-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url'\n",
"description": "Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)"
},
"VInfiniteScroll/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VInfiniteScroll/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VInfiniteScroll/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VInfiniteScroll/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VInfiniteScroll/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VInfiniteScroll/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VInfiniteScroll/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VInfiniteScroll/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VInfiniteScroll/mode": {
"type": "'intersect' | 'manual'\n",
"description": "Specifies if content should load automatically when scrolling (**intersect**) or manually (**manual**)."
},
"VInfiniteScroll/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Specifies if scroller is **vertical** or **horizontal**."
},
"VInfiniteScroll/side": {
"type": "'end' | 'start' | 'both'\n",
"description": "Specifies the side where new content should appear. Either the **start**, **end**, or **both** sides."
},
"VInfiniteScroll/margin": {
"type": "string | number\n",
"description": "Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied."
},
"VInfiniteScroll/load-more-text": {
"type": "string\n",
"description": "Text shown in default load more button, when in manual mode."
},
"VInfiniteScroll/empty-text": {
"type": "string\n",
"description": "Text shown when there is no more content to load."
},
"VInput/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VInput/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VInput/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VInput/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VInput/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VInput/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VInput/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VInput/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VInput/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the input is focused and apply color."
},
"VInput/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VInput/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VInput/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VInput/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VInput/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VInput/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VInput/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Changes the direction of the input."
},
"VInput/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VInput/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VInput/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VInput/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VInput/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VInput/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VItemGroup/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VItemGroup/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VItemGroup/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VItemGroup/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VItemGroup/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VItemGroup/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VItemGroup/selected-class": {
"type": "string\n",
"description": "Configure the selected CSS class. This class will be available in `v-item` default scoped slot."
},
"VItemGroup/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VKbd/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VKbd/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VKbd/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VKbd/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VKbd/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VKbd/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VKbd/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VKbd/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VLabel/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VLabel/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VLayout/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VLayout/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VLayout/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VLayout/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VLayout/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VLayout/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VLayout/full-height": {
"type": "boolean\n",
"description": "Sets the component height to 100%."
},
"VLayout/overlaps": {
"type": "string[]\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VLayoutItem/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VLayoutItem/position": {
"type": "'top' | 'bottom' | 'left' | 'right'\n",
"description": "The position of the item."
},
"VLayoutItem/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the component."
},
"VLayoutItem/name": {
"type": "string\n",
"description": "Assign a specific name for layout registration."
},
"VLayoutItem/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component."
},
"VLayoutItem/order": {
"type": "string | number\n",
"description": "Adjust the order of the component in relation to its registration order."
},
"VLazy/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VLazy/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VLazy/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VLazy/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VLazy/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VLazy/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VLazy/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VLazy/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VLazy/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VLazy/options": {
"type": "IntersectionObserverInit\n",
"description": "Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor."
},
"VLigatureIcon/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VLigatureIcon/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VList/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VList/nav": {
"type": "boolean\n",
"description": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**."
},
"VList/activated": {
"type": "unknown\n",
"description": "Array of ids of activated nodes."
},
"VList/disabled": {
"type": "boolean\n",
"description": "Puts all children inputs into a disabled state."
},
"VList/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VList/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VList/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VList/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VList/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VList/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VList/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VList/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VList/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VList/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VList/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VList/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VList/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VList/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VList/variant": {
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VList/items": {
"type": "any[]\n",
"description": "Can be an array of objects or strings. By default objects should have a **title** property, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props), a **value** property to allow selection, and a **children** property containing more item objects. Keys to use for these can be changed with the **item-title**, **item-value**, **item-props**, and **item-children** props."
},
"VList/item-props": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VList/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VList/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers."
},
"VList/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VList/mandatory": {
"type": "boolean\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VList/active-class": {
"type": "string\n",
"description": "The class applied to the component when it is in an active state."
},
"VList/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VList/slim": {
"type": "boolean\n",
"description": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation."
},
"VList/selected": {
"type": "unknown\n",
"description": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`."
},
"VList/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VList/filterable": {
"type": "boolean\n",
"description": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox."
},
"VList/expand-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon to display when the list item is collapsed."
},
"VList/collapse-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon to display when the list item is expanded."
},
"VList/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children."
},
"VList/indent": {
"type": "string | number\n",
"description": "Overrides the indent size for nested groups."
},
"VList/navigation-strategy": {
"type": "'focus' | 'track'\n",
"description": "Determines keyboard navigation behavior. **focus** (default) moves DOM focus to items, suitable for traditional lists. **track** provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex=\"-1\"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling."
},
"VList/navigation-index": {
"type": "number\n",
"description": "Specifies the currently selected navigation index when using `navigationStrategy=\"track\"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items."
},
"VList/activatable": {
"type": "boolean\n",
"description": "Designates whether the list items are activatable. Additionally, sets necessary accessibility attributes internally."
},
"VList/selectable": {
"type": "boolean\n",
"description": "Designates whether the list items are selectable. Additionally, sets necessary accessibility attributes internally."
},
"VList/opened": {
"type": "unknown\n",
"description": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`."
},
"VList/items-registration": {
"type": "'props' | 'render'\n",
"description": "When set to 'props', skips rendering collapsed items/nodes (for significant performance gains)."
},
"VList/active-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/activeStrategies.ts#L27-L31\" target=\"_blank\">ActiveStrategy</a>\n | ((mandatory: boolean) => <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/activeStrategies.ts#L27-L31\" target=\"_blank\">ActiveStrategy</a>)\n",
"description": "Affects how items with children behave when activated. If not specified, the **single-independent** strategy will be used.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **single-leaf:** Similar as **leaf**, but only a single item can be activated at a time.\n- **independent:** All nodes can be activated whether they have children or not.\n- **single-independent:** Similar as **independent**, but only a single item can be activated at a time."
},
"VList/select-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | 'classic'\n | 'trunk'\n | 'branch'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L28-L32\" target=\"_blank\">SelectStrategy</a>\n | ((mandatory: boolean) => <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L28-L32\" target=\"_blank\">SelectStrategy</a>)\n",
"description": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model.\n- **branch**: Same as classic but if any of a node's children are selected then that node will also be added to the model."
},
"VList/open-strategy": {
"type": "'list' | 'multiple' | 'single' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/openStrategies.ts#L20-L23\" target=\"_blank\">OpenStrategy</a>\n",
"description": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected."
},
"VList/item-title": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its title."
},
"VList/item-value": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its value."
},
"VList/item-children": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its children."
},
"VList/item-type": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Designates the key on the supplied items that is used for determining the nodes type."
},
"VList/return-object": {
"type": "boolean\n",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**."
},
"VListGroup/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VListGroup/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListGroup/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VListGroup/disabled": {
"type": "boolean\n",
"description": "Puts all children inputs into a disabled state."
},
"VListGroup/value": {
"type": "any\n",
"description": "Expands / Collapse the list-group."
},
"VListGroup/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VListGroup/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VListGroup/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VListGroup/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VListGroup/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the list item is collapsed."
},
"VListGroup/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the list item is expanded."
},
"VListGroup/fluid": {
"type": "boolean\n",
"description": "Removes the left padding assigned for action icons from group items."
},
"VListGroup/raw-id": {
"type": "string | number\n",
"description": "Defines the root element's id attribute in the component. If it is provided, the id attribute will be dynamically generated in the format: \"v-list-group--id-[rawId]\"."
},
"VListGroup/subgroup": {
"type": "boolean\n",
"description": "Designate the component as nested list group."
},
"VListImg/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VListItem/replace": {
"type": "boolean\n",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation."
},
"VListItem/link": {
"type": "boolean\n",
"description": "Designates that the component is a link. This is automatic when using the href or to prop."
},
"VListItem/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListItem/nav": {
"type": "boolean\n",
"description": "Reduces the width v-list-item takes up as well as adding a border radius."
},
"VListItem/title": {
"type": "string | number | boolean\n",
"description": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead."
},
"VListItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VListItem/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VListItem/value": {
"type": "any\n",
"description": "The value used for selection. Obtained from [`v-list`](/api/v-list)'s `v-model:selected` when the item is selected."
},
"VListItem/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VListItem/color": {
"type": "string\n",
"description": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),"
},
"VListItem/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VListItem/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VListItem/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VListItem/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VListItem/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VListItem/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VListItem/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VListItem/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VListItem/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VListItem/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VListItem/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VListItem/variant": {
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VListItem/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop."
},
"VListItem/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VListItem/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VListItem/active-class": {
"type": "string\n",
"description": "The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation."
},
"VListItem/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VListItem/href": {
"type": "string\n",
"description": "Designates the component as anchor and applies the **href** attribute."
},
"VListItem/to": {
"type": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric\n",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
},
"VListItem/exact": {
"type": "boolean\n",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
},
"VListItem/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content."
},
"VListItem/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VListItem/slim": {
"type": "boolean\n",
"description": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation."
},
"VListItem/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VListItem/subtitle": {
"type": "string | number | boolean\n",
"description": "Specify a subtitle text for the component."
},
"VListItem/append-avatar": {
"type": "string\n",
"description": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot."
},
"VListItem/prepend-avatar": {
"type": "string\n",
"description": "Prepends a [v-avatar](/components/avatars/) component in the **prepend** slot before default content."
},
"VListItem/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children."
},
"VListItem/index": {
"type": "number\n",
"description": "The index of the item within the list. Used internally for keyboard navigation and selection."
},
"VListItem/tabindex": {
"type": "string | number\n",
"description": "Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy=\"track\"` to prevent Tab key navigation into items."
},
"VListItemAction/end": {
"type": "boolean\n",
"description": "Applies margin at the start of the component."
},
"VListItemAction/start": {
"type": "boolean\n",
"description": "Applies margin at the end of the component."
},
"VListItemAction/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListItemMedia/end": {
"type": "boolean\n",
"description": "Applies margin at the start of the component."
},
"VListItemMedia/start": {
"type": "boolean\n",
"description": "Applies margin at the end of the component."
},
"VListItemMedia/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListItemSubtitle/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListItemSubtitle/opacity": {
"type": "string | number\n",
"description": "Sets the component's opacity value"
},
"VListItemTitle/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VListSubheader/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VListSubheader/sticky": {
"type": "boolean\n",
"description": "Sticks the header to the top of the table."
},
"VListSubheader/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VListSubheader/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VListSubheader/inset": {
"type": "boolean\n",
"description": "Insets the subheader without additional spacing, aligning it flush with the surrounding content."
},
"VLocaleProvider/locale": {
"type": "string\n",
"description": "Specify a locale to use."
},
"VLocaleProvider/rtl": {
"type": "boolean\n",
"description": "Specify a RTL mode."
},
"VLocaleProvider/messages": {
"type": "unknown\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VLocaleProvider/fallback-locale": {
"type": "string\n",
"description": "Specify a fallback locale to use when a locale is not found."
},
"VMain/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VMain/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VMain/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VMain/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VMain/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VMain/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VMain/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VMain/scrollable": {
"type": "boolean\n",
"description": "Specify a custom scrollable function."
},
"VMaskInput/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VMaskInput/type": {
"type": "string\n",
"description": "Sets input type."
},
"VMaskInput/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VMaskInput/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VMaskInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VMaskInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VMaskInput/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VMaskInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VMaskInput/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VMaskInput/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VMaskInput/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VMaskInput/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VMaskInput/role": {
"type": "string\n",
"description": "The role attribute applied to the input."
},
"VMaskInput/autofocus": {
"type": "boolean\n",
"description": "Enables autofocus."
},
"VMaskInput/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VMaskInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VMaskInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VMaskInput/rounded": {
"type": "string | number | boolean\n",
"description": "Adds a border radius to the input."
},
"VMaskInput/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VMaskInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VMaskInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VMaskInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VMaskInput/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VMaskInput/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VMaskInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VMaskInput/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VMaskInput/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the outside the component's input, uses the same syntax as `v-icon`."
},
"VMaskInput/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VMaskInput/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VMaskInput/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VMaskInput/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VMaskInput/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VMaskInput/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VMaskInput/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VMaskInput/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VMaskInput/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VMaskInput/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VMaskInput/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VMaskInput/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VMaskInput/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VMaskInput/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VMaskInput/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VMaskInput/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VMaskInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VMaskInput/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VMaskInput/counter": {
"type": "string | number | boolean\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VMaskInput/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VMaskInput/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VMaskInput/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VMaskInput/append-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VMaskInput/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VMaskInput/clear-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VMaskInput/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VMaskInput/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VMaskInput/prepend-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VMaskInput/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VMaskInput/counter-value": {
"type": "number | ((value: any) => number)\n",
"description": "Function returns the counter display text."
},
"VMaskInput/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VMaskInput/mask": {
"type": " | string\n | {\n mask: string\n tokens: Record<\n string,\n | { convert: (char: string) => string }\n | { pattern: undefined; test: (char: string) => boolean }\n | { pattern: RegExp; test: undefined }\n >\n }\n",
"description": "Apply a mask to the input. See [guide](/components/mask-inputs/#guide) for more information."
},
"VMaskInput/return-masked-value": {
"type": "boolean\n",
"description": "Returns the unmodified masked string."
},
"VMenu/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VMenu/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VMenu/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VMenu/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VMenu/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VMenu/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component. Use `auto` to use the activator width."
},
"VMenu/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VMenu/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.."
},
"VMenu/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VMenu/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VMenu/id": {
"type": "string\n",
"description": "The unique identifier of the component."
},
"VMenu/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VMenu/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VMenu/submenu": {
"type": "boolean\n",
"description": "Opens with right arrow and closes on left instead of up/down. Implies `location=\"end\"`. Directions are reversed for RTL."
},
"VMenu/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VMenu/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VMenu/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VMenu/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VMenu/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VMenu/no-click-animation": {
"type": "boolean\n",
"description": "Disables the bounce effect when clicking outside of the content element when using the persistent prop."
},
"VMenu/persistent": {
"type": "boolean\n",
"description": "Clicking outside of the element or pressing esc key will not deactivate it."
},
"VMenu/scrim": {
"type": "string | boolean\n",
"description": "Accepts true/false to enable background, and string to define color."
},
"VMenu/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VMenu/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VMenu/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VMenu/open-on-click": {
"type": "boolean\n",
"description": "Designates whether menu should open on activator click."
},
"VMenu/open-on-hover": {
"type": "boolean\n",
"description": "Designates whether menu should open on activator hover."
},
"VMenu/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VMenu/close-on-content-click": {
"type": "boolean\n",
"description": "Designates if menu should close when its content is clicked."
},
"VMenu/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only works with the **open-on-hover** prop."
},
"VMenu/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only works with the **open-on-hover** prop."
},
"VMenu/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VMenu/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VMenu/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VMenu/stick-to-target": {
"type": "boolean\n",
"description": "Enables the overlay content to go off-screen when scrolling."
},
"VMenu/viewport-margin": {
"type": "string | number\n",
"description": "Sets custom viewport margin for the overlay content"
},
"VMenu/scroll-strategy": {
"type": "'close' | 'block' | 'none' | 'reposition' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n",
"description": "Strategy used when the component is activate and user scrolls."
},
"VMenu/retain-focus": {
"type": "boolean\n",
"description": "Captures and keeps focus within the content element when using **Tab** and **Shift**+**Tab**. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard."
},
"VMenu/capture-focus": {
"type": "boolean\n",
"description": "When enabled, focus will be trapped within the component's content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility."
},
"VMenu/disable-initial-focus": {
"type": "boolean\n",
"description": "Deprecated, use `capture-focus` instead. Prevents automatic redirect of first `focusin` event. Intended to use on permanently open menus or VSpeedDial."
},
"VMenu/transition": {
"type": " | string\n | boolean\n | (TransitionProps & { component: Component })\n | {\n component: ComponentPublicInstanceConstructor<\n CreateComponentPublicInstanceWithMixins<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n PublicProps,\n {},\n true,\n {},\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n {},\n any,\n ComponentProvideOptions,\n OptionTypesType<{}, {}, {}, {}, {}, {}>,\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n {},\n {},\n {},\n {}\n >,\n any,\n any,\n any,\n ComputedOptions,\n MethodOptions\n > &\n ComponentOptionsBase<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n string,\n {},\n {},\n string,\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n ComponentProvideOptions\n > &\n VNodeProps &\n AllowedComponentProps &\n ComponentCustomProps & {\n filterProps: (props: T) => Partial<Pick<T, U>>\n }\n }\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VMenu/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator."
},
"VMessages/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VMessages/active": {
"type": "boolean\n",
"description": "Determines whether the messages are visible or not."
},
"VMessages/transition": {
"type": " | string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component; leaveAbsolute: boolean; group: boolean }\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VMessages/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VMonthPicker/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VMonthPicker/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VMonthPicker/model-value": {
"type": "unknown\n",
"description": "The selected month in `YYYY-MM` format, or null if no month is selected. When `multiple` is set, expects an array of strings."
},
"VMonthPicker/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VMonthPicker/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VMonthPicker/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VMonthPicker/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VMonthPicker/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VMonthPicker/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VMonthPicker/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VMonthPicker/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VMonthPicker/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VMonthPicker/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VMonthPicker/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VMonthPicker/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VMonthPicker/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VMonthPicker/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VMonthPicker/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VMonthPicker/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VMonthPicker/max": {
"type": "string\n",
"description": "Maximum selectable date in `YYYY-MM` format."
},
"VMonthPicker/min": {
"type": "string\n",
"description": "Minimum selectable date in `YYYY-MM` format."
},
"VMonthPicker/multiple": {
"type": "boolean | 'range'\n",
"description": "Allows multiple month selections. When set to `true`, enables multi-select. When set to `'range'`, enables range selection where the first and last selected months define the range boundaries."
},
"VMonthPicker/readonly": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VMonthPicker.json))"
},
"VMonthPicker/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VMonthPicker/transition": {
"type": "string\n",
"description": "The transition used when changing year into the future"
},
"VMonthPicker/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VMonthPicker/hide-header": {
"type": "boolean\n",
"description": "Hide the picker header."
},
"VMonthPicker/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VMonthPicker/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VMonthPicker.json))"
},
"VMonthPicker/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VMonthPicker.json))"
},
"VMonthPicker/header-color": {
"type": "string\n",
"description": "Overrides the color used for the header and title areas. Falls back to `color` when not set."
},
"VMonthPicker/mode-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VMonthPicker.json))"
},
"VMonthPicker/reverse-transition": {
"type": "string\n",
"description": "The transition used when changing year into the past"
},
"VMonthPicker/allowed-months": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which months can be selected. Accepts an array of month numbers (0-11) or a function that receives a month number and returns a boolean."
},
"VMonthPicker/allowed-years": {
"type": "number[] | ((date: number) => boolean)\n",
"description": "Restricts which years can be selected in years view."
},
"VMonthPicker/selected-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display next to selected months in list view."
},
"VMonthPicker/months-columns": {
"type": "string | number\n",
"description": "Number of columns to use when displaying months in grid view. When set to `1`, switches to list view."
},
"VMonthPicker/years-columns": {
"type": "string | number\n",
"description": "Number of columns to use when displaying years in year selection view."
},
"VNavigationDrawer/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VNavigationDrawer/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VNavigationDrawer/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VNavigationDrawer/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VNavigationDrawer/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VNavigationDrawer/location": {
"type": "'top' | 'end' | 'bottom' | 'start' | 'left' | 'right'\n",
"description": "Controls the edge of the screen the drawer is attached to."
},
"VNavigationDrawer/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the component."
},
"VNavigationDrawer/sticky": {
"type": "boolean\n",
"description": "When true, the drawer will remain visible when scrolling past the top of the page."
},
"VNavigationDrawer/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VNavigationDrawer/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VNavigationDrawer/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VNavigationDrawer/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VNavigationDrawer/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VNavigationDrawer/name": {
"type": "string\n",
"description": "Assign a specific name for layout registration."
},
"VNavigationDrawer/persistent": {
"type": "boolean\n",
"description": "Clicking outside or pressing **esc** key will not dismiss the dialog."
},
"VNavigationDrawer/scrim": {
"type": "string | boolean\n",
"description": "Determines whether an overlay is used when a **temporary** drawer is open. Accepts true/false to enable background, and string to define color."
},
"VNavigationDrawer/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VNavigationDrawer/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VNavigationDrawer/retain-focus": {
"type": "boolean\n",
"description": "Captures and keeps focus within the content element when using **Tab** and **Shift**+**Tab**. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard."
},
"VNavigationDrawer/capture-focus": {
"type": "boolean\n",
"description": "When enabled, focus will be trapped within the component's content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility."
},
"VNavigationDrawer/image": {
"type": "string\n",
"description": "Apply a specific background image to the component."
},
"VNavigationDrawer/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VNavigationDrawer/floating": {
"type": "boolean\n",
"description": "A floating drawer has no visible container (no border-right)."
},
"VNavigationDrawer/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the `temporary` prop, or activate the `bottom` prop when the breakpoint value is met. Setting the value to `0` will disable this functionality."
},
"VNavigationDrawer/order": {
"type": "string | number\n",
"description": "Adjust the order of the component in relation to its registration order."
},
"VNavigationDrawer/disable-resize-watcher": {
"type": "boolean\n",
"description": "Prevents the automatic opening or closing of the drawer when resized, based on whether the device is mobile or desktop."
},
"VNavigationDrawer/disable-route-watcher": {
"type": "boolean\n",
"description": "Disables opening of navigation drawer when route changes."
},
"VNavigationDrawer/expand-on-hover": {
"type": "boolean\n",
"description": "Collapses the drawer to a **rail-variant** until hovering with the mouse."
},
"VNavigationDrawer/permanent": {
"type": "boolean\n",
"description": "The drawer remains visible regardless of screen size."
},
"VNavigationDrawer/rail": {
"type": "boolean\n",
"description": "Sets the component width to the **rail-width** value."
},
"VNavigationDrawer/rail-width": {
"type": "string | number\n",
"description": "Sets the width for the component when `rail` is enabled."
},
"VNavigationDrawer/temporary": {
"type": "boolean\n",
"description": "A temporary drawer sits above its application and uses a scrim (overlay) to darken the background."
},
"VNavigationDrawer/touchless": {
"type": "boolean\n",
"description": "Disable mobile touch functionality."
},
"VNumberInput/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VNumberInput/type": {
"type": "string\n",
"description": "**IGNORED** underlying input is always of type 'text'"
},
"VNumberInput/model-value": {
"type": "number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VNumberInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VNumberInput/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VNumberInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VNumberInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VNumberInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VNumberInput/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VNumberInput/rounded": {
"type": "string | number | boolean\n",
"description": "Adds a border radius to the input."
},
"VNumberInput/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VNumberInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VNumberInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VNumberInput/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'underlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VNumberInput/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VNumberInput/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VNumberInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VNumberInput/max": {
"type": "number\n",
"description": "Specifies the maximum allowable value for the input."
},
"VNumberInput/min": {
"type": "number\n",
"description": "Specifies the minimum allowable value for the input."
},
"VNumberInput/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VNumberInput/step": {
"type": "number\n",
"description": "Defines the interval between allowed values when the user increments or decrements the input"
},
"VNumberInput/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VNumberInput/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VNumberInput/role": {
"type": "string\n",
"description": "The role attribute applied to the input."
},
"VNumberInput/autofocus": {
"type": "boolean\n",
"description": "Enables autofocus."
},
"VNumberInput/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VNumberInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VNumberInput/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the outside the component's input, uses the same syntax as `v-icon`."
},
"VNumberInput/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VNumberInput/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VNumberInput/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VNumberInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VNumberInput/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VNumberInput/counter": {
"type": "string | number | boolean\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VNumberInput/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VNumberInput/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VNumberInput/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VNumberInput/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VNumberInput/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VNumberInput/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VNumberInput/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VNumberInput/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VNumberInput/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VNumberInput/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VNumberInput/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VNumberInput/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VNumberInput/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VNumberInput/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VNumberInput/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VNumberInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VNumberInput/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VNumberInput/append-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VNumberInput/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VNumberInput/clear-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VNumberInput/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VNumberInput/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VNumberInput/prepend-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VNumberInput/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VNumberInput/counter-value": {
"type": "number | ((value: any) => number)\n",
"description": "Function returns the counter display text."
},
"VNumberInput/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VNumberInput/control-variant": {
"type": "'default' | 'split' | 'hidden' | 'stacked'\n",
"description": "Controls layout of the stepper buttons."
},
"VNumberInput/inset": {
"type": "boolean\n",
"description": "Applies an indentation to the dividers used in the stepper buttons."
},
"VNumberInput/hide-input": {
"type": "boolean\n",
"description": "Hide the input field."
},
"VNumberInput/precision": {
"type": "number\n",
"description": "Enforces strict precision. It is expected to be an integer value in range between `0` and `15`, or null for unrestricted."
},
"VNumberInput/min-fraction-digits": {
"type": "number\n",
"description": "Specifies the minimum fraction digits to be displayed (capped to `precision`). Defaults to `precision` when not explicitly set."
},
"VNumberInput/decimal-separator": {
"type": "string\n",
"description": "Expects single character to be used as decimal separator."
},
"VNumberInput/grouping": {
"type": "boolean | 'auto' | 'always' | 'min2'\n",
"description": "Enables grouping using current locale or specific character passed to `group-separator`. Note: `'auto'` is recommended over `true`."
},
"VNumberInput/group-separator": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VNumberInput.json))"
},
"VOtpField/index": {
"type": "number\n",
"description": "Logical position of the slot within the OTP value."
},
"VOtpGroup/merged": {
"type": "boolean\n",
"description": "Merges fields within this group into a single visual block."
},
"VOtpInput/length": {
"type": "string | number\n",
"description": "The OTP field's length."
},
"VOtpInput/type": {
"type": "'number' | 'text' | 'password'\n",
"description": "Supported types: `text`, `password`, `number`."
},
"VOtpInput/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VOtpInput/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VOtpInput/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VOtpInput/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VOtpInput/pattern": {
"type": " | RegExp\n | 'numeric'\n | 'alpha'\n | 'alphanumeric'\n | 'unicode-alpha'\n | 'unicode-alphanumeric'\n",
"description": "Restricts input to characters matching the given pattern. Accepts `’numeric’`, `’alpha’`, `’alphanumeric’`, `’unicode-alpha’` (any Unicode letter, e.g. CJK / Cyrillic / Arabic), `’unicode-alphanumeric’`, or a custom `RegExp`. Defaults to `’numeric’` when `type=\"number\"`."
},
"VOtpInput/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VOtpInput/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VOtpInput/autofocus": {
"type": "boolean\n",
"description": "Automatically focuses the first input on page load"
},
"VOtpInput/model-value": {
"type": "string | number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VOtpInput/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VOtpInput/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VOtpInput/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VOtpInput/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VOtpInput/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VOtpInput/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VOtpInput/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VOtpInput/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VOtpInput/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VOtpInput/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VOtpInput/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VOtpInput/divider": {
"type": "string\n",
"description": "Specifies the dividing character between items."
},
"VOtpInput/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VOtpInput/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VOtpInput/merged": {
"type": "boolean\n",
"description": "Renders all fields in a single merged group with shared elevation and border radius."
},
"VOtpInput/focus-all": {
"type": "boolean\n",
"description": "Puts all inputs into a focus state when any are focused"
},
"VOtpInput/masked": {
"type": "boolean\n",
"description": "Hides the entered characters with bullets, similar to a password input, but makes it possible to also restrict characters to digits with `type=\"number\"`."
},
"VOtpSeparator/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VOverlay/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VOverlay/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VOverlay/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VOverlay/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VOverlay/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.."
},
"VOverlay/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the content element."
},
"VOverlay/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VOverlay/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VOverlay/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VOverlay/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VOverlay/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VOverlay/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VOverlay/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VOverlay/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VOverlay/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VOverlay/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VOverlay/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VOverlay/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VOverlay/no-click-animation": {
"type": "boolean\n",
"description": "Disables the bounce effect when clicking outside of the content element when using the persistent prop."
},
"VOverlay/persistent": {
"type": "boolean\n",
"description": "Clicking outside of the element or pressing esc key will not deactivate it."
},
"VOverlay/scrim": {
"type": "string | boolean\n",
"description": "Accepts true/false to enable background, and string to define color."
},
"VOverlay/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VOverlay/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VOverlay/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VOverlay/open-on-click": {
"type": "boolean\n",
"description": "Activate the component when the activator is clicked."
},
"VOverlay/open-on-hover": {
"type": "boolean\n",
"description": "Activate the component when the activator is hovered."
},
"VOverlay/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VOverlay/close-on-content-click": {
"type": "boolean\n",
"description": "Closes component when you click on its content."
},
"VOverlay/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VOverlay/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VOverlay/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VOverlay/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VOverlay/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VOverlay/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VOverlay/stick-to-target": {
"type": "boolean\n",
"description": "Enables the overlay content to go off-screen when scrolling."
},
"VOverlay/viewport-margin": {
"type": "string | number\n",
"description": "Sets custom viewport margin for the overlay content"
},
"VOverlay/scroll-strategy": {
"type": "'close' | 'none' | 'block' | 'reposition' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n",
"description": "Strategy used when the component is activate and user scrolls."
},
"VOverlay/retain-focus": {
"type": "boolean\n",
"description": "Captures and keeps focus within the content element when using **Tab** and **Shift**+**Tab**. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard."
},
"VOverlay/capture-focus": {
"type": "boolean\n",
"description": "When enabled, focus will be trapped within the component's content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility."
},
"VOverlay/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VPagination/length": {
"type": "string | number\n",
"description": "The number of pages."
},
"VPagination/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VPagination/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VPagination/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VPagination/aria-label": {
"type": "string\n",
"description": "Label for the root element."
},
"VPagination/model-value": {
"type": "number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VPagination/start": {
"type": "string | number\n",
"description": "Specify the starting page."
},
"VPagination/color": {
"type": "string\n",
"description": "Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VPagination/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VPagination/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VPagination/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VPagination/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VPagination/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VPagination/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VPagination/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VPagination/variant": {
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VPagination/active-color": {
"type": "string\n",
"description": "The applied color when the component is in an active state."
},
"VPagination/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon to use for the next button."
},
"VPagination/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon to use for the prev button."
},
"VPagination/ellipsis": {
"type": "string\n",
"description": "Text to show between page buttons when truncating the list."
},
"VPagination/total-visible": {
"type": "string | number\n",
"description": "Specify the total visible pagination numbers."
},
"VPagination/first-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon to use for the first button."
},
"VPagination/last-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon to use for the last button."
},
"VPagination/page-aria-label": {
"type": "string\n",
"description": "Label for each page button."
},
"VPagination/current-page-aria-label": {
"type": "string\n",
"description": "Label for the currently selected page."
},
"VPagination/first-aria-label": {
"type": "string\n",
"description": "Label for the go to first button."
},
"VPagination/previous-aria-label": {
"type": "string\n",
"description": "Label for the previous button."
},
"VPagination/next-aria-label": {
"type": "string\n",
"description": "Label for the next button."
},
"VPagination/last-aria-label": {
"type": "string\n",
"description": "Label for the go to last button."
},
"VPagination/show-first-last-page": {
"type": "boolean | 'only-first'\n",
"description": "Show buttons for going to first and last page. Since v4.1.0 it accepts `'only-first'`, to only the first page button."
},
"VParallax/scale": {
"type": "string | number\n",
"description": "The scale of the parallax image."
},
"VPicker/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VPicker/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VPicker/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VPicker/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VPicker/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VPicker/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VPicker/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VPicker/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VPicker/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VPicker/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VPicker/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VPicker/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VPicker/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VPicker/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VPicker/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VPicker/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VPicker/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VPicker/position": {
"type": "'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'\n",
"description": "Sets the position for the component."
},
"VPicker/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VPicker/hide-header": {
"type": "boolean\n",
"description": "Hide the picker header."
},
"VPicker/landscape": {
"type": "boolean\n",
"description": "Puts the picker into landscape mode."
},
"VPicker/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VPickerTitle/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VPie/legend": {
"type": " | boolean\n | {\n position: 'top' | 'bottom' | 'left' | 'right'\n textFormat:\n | string\n | ((v: {\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n }) => string)\n }\n",
"description": "Controls legend visibility, position and text format."
},
"VPie/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VPie/size": {
"type": "string | number\n",
"description": "Sets the height and width of the chart (excluding title and legend)."
},
"VPie/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VPie/rounded": {
"type": "string | number\n",
"description": "Number passed as corner radius relative to 100x100 SVG viewport"
},
"VPie/gap": {
"type": "string | number\n",
"description": "Reduces segment size by a specified angle. Recommended to in range (0-10)."
},
"VPie/items": {
"type": "Record<string, any> | { color: string; pattern: string }[]\n",
"description": "Data items expected to contain `key`, `title` and `value`."
},
"VPie/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VPie/tooltip": {
"type": " | boolean\n | {\n titleFormat:\n | string\n | ((v: {\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n }) => string)\n subtitleFormat:\n | string\n | ((v: {\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n }) => string)\n avatarSize: number\n transition: string | false | true | TransitionProps\n offset: number\n }\n",
"description": "Controls tooltip visibility, transition, offset from the cursor and formats of title and subtitle."
},
"VPie/item-title": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VPie.json))"
},
"VPie/item-value": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VPie.json))"
},
"VPie/palette": {
"type": "(string | { color: string; pattern: string })[]\n",
"description": "Defines colors and patterns to be applied based on the data items order. Data items can also define their colors."
},
"VPie/item-key": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VPie.json))"
},
"VPie/rotate": {
"type": "string | number\n",
"description": "Rotates the chart segments clockwise."
},
"VPie/gauge-cut": {
"type": "string | number\n",
"description": "Allows removing bottom part of the chart to make it into a gauge. Expects angle (0-180)."
},
"VPie/inner-cut": {
"type": "string | number\n",
"description": "Specifies inner radius for a donut-style chart as a percent (0-100). Without `hide-slice`, inner slice is visible with translucent color matching the item."
},
"VPie/hover-scale": {
"type": "string | number\n",
"description": "Enables interactive behavior by reducing segment size until it gets hovered. Expects fraction value (0-0.25)."
},
"VPie/animation": {
"type": " | boolean\n | {\n duration: number\n easing:\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n | 'instant'\n }\n",
"description": "Controls duration and easing of the expand/collapse and hover effect. Defaults to `easeInOutCubic` over 400ms."
},
"VPie/hide-slice": {
"type": "boolean\n",
"description": "Makes inner slice invisible instead of semi-transparent."
},
"VPie/reveal": {
"type": "boolean | { duration: number }\n",
"description": "Enables and controls duration for initial reveal animation. Easing function is shared with `animation` prop."
},
"VPieSegment/rounded": {
"type": "string | number\n",
"description": "Number passed as corner radius relative to 100x100 SVG viewport"
},
"VPieSegment/color": {
"type": "string\n",
"description": "Sets segment color to be passed straight to CSS style attribute."
},
"VPieSegment/pattern": {
"type": "string\n",
"description": "Decal pattern to put on top of the outer slice."
},
"VPieSegment/value": {
"type": "number\n",
"description": "The value used for calculate segment/arc angle size."
},
"VPieSegment/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VPieSegment/gap": {
"type": "string | number\n",
"description": "Reduces segment size by a specified angle. Recommended to in range (0-10)."
},
"VPieSegment/hover-scale": {
"type": "string | number\n",
"description": "Reduces outer radius until segment is hovered. Expects fraction value (0-0.25)"
},
"VPieSegment/rotate": {
"type": "string | number\n",
"description": "Sets segment offset angle."
},
"VPieSegment/inner-cut": {
"type": "string | number\n",
"description": "Sets inner slice size in percent (0-100)."
},
"VPieSegment/animation": {
"type": " | boolean\n | {\n duration: number\n easing:\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n | 'instant'\n }\n",
"description": "Controls duration and easing of the expand/collapse and hover effect. Defaults to `easeInOutCubic` over 400ms."
},
"VPieSegment/hide-slice": {
"type": "boolean\n",
"description": "Makes inner slice invisible instead of semi-transparent."
},
"VPieSegment/reveal": {
"type": "boolean | { duration: number }\n",
"description": "Enables and controls duration for initial reveal animation. Easing function is shared with `animation` prop."
},
"VPieTooltip/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VPieTooltip/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "The transition used when hovering between chart segments"
},
"VPieTooltip/item": {
"type": "{\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n}\n",
"description": "Data item related to hovered segment"
},
"VPieTooltip/target": {
"type": "[number, number]\n",
"description": "The coordinates used to position the tooltip."
},
"VPieTooltip/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VPieTooltip/title-format": {
"type": " | string\n | ((v: {\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n }) => string)\n",
"description": "Formatter definition or function. When passed as String macros for `[title]` and `[value]` get replaced dynamically."
},
"VPieTooltip/subtitle-format": {
"type": " | string\n | ((v: {\n key: string | number | symbol\n color: string\n value: number\n title: string\n pattern: string\n isActive: boolean\n raw: Record<string, any>\n }) => string)\n",
"description": "Formatter definition or function. When passed as String macros for `[title]` and `[value]` get replaced dynamically."
},
"VProgress/type": {
"type": "'linear' | 'circular'\n",
"description": "Determines which progress indicator to render."
},
"VProgress/model-value": {
"type": "string | number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VProgress/absolute": {
"type": "boolean\n",
"description": "Positions the component absolutely within its parent, centering the progress indicator and placing details without affecting layout."
},
"VProgress/rounded": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VProgress.json))"
},
"VProgress/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VProgress/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgress/indeterminate": {
"type": "boolean\n",
"description": "Constantly animates, use when loading progress is unknown."
},
"VProgress/max": {
"type": "string | number\n",
"description": "Sets the maximum value for the progress indicator."
},
"VProgress/label": {
"type": "string\n",
"description": "Text displayed alongside the progress indicator and placed in `aria-label`."
},
"VProgress/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgress/details-position": {
"type": "'top' | 'bottom'\n",
"description": "Controls the position of the details (label and value) relative to the progress indicator."
},
"VProgress/value-format": {
"type": " | string\n | ((ctx: { value: number; max: number; percent: number }) => string)\n",
"description": "Formatter for the visible value text and `aria-valuetext`. Use `[value]` and `[max]` as placeholders in strings, or pass a function that receives `{ value, max }` and returns a string."
},
"VProgress/hide-label": {
"type": "boolean\n",
"description": "Hides the label text."
},
"VProgress/hide-value": {
"type": "boolean\n",
"description": "Hides the value text."
},
"VProgressCircular/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VProgressCircular/indeterminate": {
"type": "boolean | 'disable-shrink'\n",
"description": "Constantly animates, use when loading progress is unknown. If set to the string `'disable-shrink'` it will use a simpler animation that does not run on the main thread."
},
"VProgressCircular/size": {
"type": "string | number\n",
"description": "Sets the diameter of the circle in pixels."
},
"VProgressCircular/width": {
"type": "string | number\n",
"description": "Sets the stroke of the circle in pixels."
},
"VProgressCircular/model-value": {
"type": "string | number\n",
"description": "The percentage value for current progress."
},
"VProgressCircular/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgressCircular/rounded": {
"type": "boolean\n",
"description": "Rounds the ends of the progress arc for a softer appearance. When enabled, the progress stroke will have rounded caps instead of square ends."
},
"VProgressCircular/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VProgressCircular/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgressCircular/rotate": {
"type": "string | number\n",
"description": "Rotates the circle start point in degrees."
},
"VProgressCircular/reveal": {
"type": "boolean | { duration: number }\n",
"description": "Animates the progress circle from 0 to its model value when the component mounts."
},
"VProgressLinear/model-value": {
"type": "string | number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VProgressLinear/reverse": {
"type": "boolean\n",
"description": "Displays reversed progress (right to left in LTR mode and left to right in RTL)."
},
"VProgressLinear/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VProgressLinear/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VProgressLinear/absolute": {
"type": "boolean\n",
"description": "Applies position: absolute to the component."
},
"VProgressLinear/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VProgressLinear/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VProgressLinear/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VProgressLinear/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VProgressLinear/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgressLinear/variant": {
"type": "'split'\n",
"description": "Applies a distinct style to the component. **split** visually divides the progress bar at the current value, separating the filled and unfilled portions with a gap."
},
"VProgressLinear/indeterminate": {
"type": "boolean\n",
"description": "Constantly animates, use when loading progress is unknown."
},
"VProgressLinear/max": {
"type": "string | number\n",
"description": "Sets the maximum value the progress can reach."
},
"VProgressLinear/active": {
"type": "boolean\n",
"description": "Reduce the height to 0, hiding component."
},
"VProgressLinear/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VProgressLinear/opacity": {
"type": "string | number\n",
"description": "Set the opacity of the progress bar."
},
"VProgressLinear/striped": {
"type": "boolean\n",
"description": "Adds a stripe background to the filled portion of the progress component."
},
"VProgressLinear/stream": {
"type": "boolean\n",
"description": "An alternative style for portraying loading that works in tandem with **buffer-value**."
},
"VProgressLinear/bg-opacity": {
"type": "string | number\n",
"description": "Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise."
},
"VProgressLinear/buffer-value": {
"type": "string | number\n",
"description": "The percentage value for the buffer."
},
"VProgressLinear/buffer-color": {
"type": "string\n",
"description": "Sets the color of the buffer bar."
},
"VProgressLinear/buffer-opacity": {
"type": "string | number\n",
"description": "Set the opacity of the buffer bar."
},
"VProgressLinear/clickable": {
"type": "boolean\n",
"description": "Clicking on the progress track will automatically set the value."
},
"VProgressLinear/rounded-bar": {
"type": "boolean\n",
"description": "Applies a border radius to the progress bar."
},
"VProgressLinear/chunk-count": {
"type": "string | number\n",
"description": "Specifies amount of chunks to divide the bar into."
},
"VProgressLinear/chunk-width": {
"type": "string | number\n",
"description": "Defines chunk absolute size. Useful when chunk is narrow."
},
"VProgressLinear/chunk-gap": {
"type": "string | number\n",
"description": "Defines size of the gap between chunks."
},
"VPullToRefresh/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VPullToRefresh/pull-down-threshold": {
"type": "number\n",
"description": "The distance the user must pull down to trigger a refresh."
},
"VRadio/type": {
"type": "string\n",
"description": "Provides the default type for children selection controls."
},
"VRadio/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VRadio/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VRadio/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VRadio/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VRadio/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VRadio/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VRadio/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VRadio/multiple": {
"type": "boolean\n",
"description": "Changes select to multiple. Accepts array for value."
},
"VRadio/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VRadio/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VRadio/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VRadio/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VRadio/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VRadio/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VRadio/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VRadio/inline": {
"type": "boolean\n",
"description": "Puts children inputs into a row."
},
"VRadio/true-value": {
"type": "any\n",
"description": "Sets value for truthy state."
},
"VRadio/false-value": {
"type": "any\n",
"description": "Sets value for falsy state."
},
"VRadio/defaults-target": {
"type": "string\n",
"description": "The target component to provide defaults values for."
},
"VRadio/false-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when inactive."
},
"VRadio/true-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when active."
},
"VRadioGroup/type": {
"type": "string\n",
"description": "Provides the default type for children selection controls."
},
"VRadioGroup/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VRadioGroup/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VRadioGroup/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VRadioGroup/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VRadioGroup/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VRadioGroup/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VRadioGroup/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VRadioGroup/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VRadioGroup/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VRadioGroup/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VRadioGroup/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VRadioGroup/inline": {
"type": "boolean\n",
"description": "Displays radio buttons in row."
},
"VRadioGroup/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VRadioGroup/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VRadioGroup/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VRadioGroup/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VRadioGroup/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VRadioGroup/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VRadioGroup/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VRadioGroup/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VRadioGroup/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VRadioGroup/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VRadioGroup/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VRadioGroup/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VRadioGroup/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VRadioGroup/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VRadioGroup/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VRadioGroup/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VRadioGroup/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VRadioGroup/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VRadioGroup/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VRadioGroup/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VRadioGroup/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VRadioGroup/defaults-target": {
"type": "string\n",
"description": "The target component to provide defaults values for."
},
"VRadioGroup/false-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when inactive."
},
"VRadioGroup/true-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when active."
},
"VRadioGroup/indeterminate-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/SelectionControlGroup.json))"
},
"VRadioGroup/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VRangeSlider/model-value": {
"type": "(string | number)[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VRangeSlider/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VRangeSlider/reverse": {
"type": "boolean\n",
"description": "Reverses the slider direction."
},
"VRangeSlider/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VRangeSlider/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VRangeSlider/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VRangeSlider/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VRangeSlider/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VRangeSlider/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VRangeSlider/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VRangeSlider/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VRangeSlider/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VRangeSlider/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VRangeSlider/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VRangeSlider/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VRangeSlider/max": {
"type": "string | number\n",
"description": "Sets the maximum allowed value."
},
"VRangeSlider/min": {
"type": "string | number\n",
"description": "Sets the minimum allowed value."
},
"VRangeSlider/step": {
"type": "string | number\n",
"description": "If greater than 0, sets step interval for ticks."
},
"VRangeSlider/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VRangeSlider/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VRangeSlider/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VRangeSlider/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VRangeSlider/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VRangeSlider/ripple": {
"type": "boolean\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VRangeSlider/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VRangeSlider/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VRangeSlider/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the input is focused and apply color."
},
"VRangeSlider/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VRangeSlider/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VRangeSlider/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VRangeSlider/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VRangeSlider/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VRangeSlider/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VRangeSlider/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Changes the direction of the input."
},
"VRangeSlider/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VRangeSlider/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VRangeSlider/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VRangeSlider/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VRangeSlider/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VRangeSlider/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VRangeSlider/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VRangeSlider/thumb-color": {
"type": "string\n",
"description": "Sets the thumb and thumb label color."
},
"VRangeSlider/thumb-label": {
"type": "boolean | 'hover' | 'always'\n",
"description": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label. Use `'hover'` to show label when hovering over the thumb."
},
"VRangeSlider/thumb-size": {
"type": "string | number\n",
"description": "Controls the size of the thumb label."
},
"VRangeSlider/show-ticks": {
"type": "boolean | 'always'\n",
"description": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks."
},
"VRangeSlider/ticks": {
"type": "number[] | Record<number, string>\n",
"description": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks."
},
"VRangeSlider/tick-size": {
"type": "string | number\n",
"description": "Controls the size of **ticks**"
},
"VRangeSlider/track-color": {
"type": "string\n",
"description": "Sets the track's color"
},
"VRangeSlider/track-fill-color": {
"type": "string\n",
"description": "Sets the track's fill color"
},
"VRangeSlider/track-size": {
"type": "string | number\n",
"description": "Sets the track's size (height)."
},
"VRangeSlider/no-keyboard": {
"type": "boolean\n",
"description": "**FOR INTERNAL USE ONLY** Ignore keyboard events."
},
"VRangeSlider/strict": {
"type": "boolean\n",
"description": "Disallows dragging the ending thumb past the starting thumb and vice versa."
},
"VRating/length": {
"type": "string | number\n",
"description": "The amount of items to show."
},
"VRating/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VRating/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VRating/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VRating/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VRating/model-value": {
"type": "string | number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VRating/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VRating/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VRating/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VRating/active-color": {
"type": "string\n",
"description": "The applied color when the component is in an active state."
},
"VRating/readonly": {
"type": "boolean\n",
"description": "Removes all hover effects and pointer events."
},
"VRating/ripple": {
"type": "boolean\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VRating/hover": {
"type": "boolean\n",
"description": "Provides visual feedback when hovering over icons."
},
"VRating/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared by clicking on the current value."
},
"VRating/item-aria-label": {
"type": "string\n",
"description": "The **aria-label** used for each item."
},
"VRating/empty-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon displayed when empty."
},
"VRating/full-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon displayed when full."
},
"VRating/half-increments": {
"type": "boolean\n",
"description": "Allows the selection of half increments."
},
"VRating/item-label-position": {
"type": "string\n",
"description": "Position of item labels. Accepts 'top' and 'bottom'."
},
"VRating/item-labels": {
"type": "string[]\n",
"description": "Array of labels to display next to each item.."
},
"VResponsive/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VResponsive/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VResponsive/inline": {
"type": "boolean\n",
"description": "Display as an inline element instead of a block, also disables flex-grow."
},
"VResponsive/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VResponsive/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VResponsive/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VResponsive/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VResponsive/content-class": {
"type": "any\n",
"description": "Apply a custom class to the internal content element."
},
"VResponsive/aspect-ratio": {
"type": "string | number\n",
"description": "Sets a base aspect ratio, calculated as width/height. This will only set a **minimum** height, the component can still grow if it has a lot of content."
},
"VRow/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the spacing between `v-col`s. Available options are: **default**, **comfortable**, **compact**."
},
"VRow/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VRow/align": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-\\*** class. Available options are: **start**, **center**, **end**, **baseline** and **stretch**."
},
"VRow/size": {
"type": "string | number\n",
"description": "Sets the number of columns."
},
"VRow/gap": {
"type": "string | number | (string | number)[]\n",
"description": "Sets the gap between `v-col`s. Can be a single value for both row and column gap, or the array of two values [column gap, row gap]."
},
"VRow/dense": {
"type": "boolean\n",
"description": "Deprecated, use `density` with **comfortable** instead."
},
"VRow/align-sm": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-sm-\\*** class"
},
"VRow/align-md": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-md-\\*** class"
},
"VRow/align-lg": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-lg-\\*** class"
},
"VRow/align-xl": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-xl-\\*** class"
},
"VRow/align-xxl": {
"type": "'end' | 'start' | 'center' | 'baseline' | 'stretch'\n",
"description": "Deprecated, use **align-xxl-\\*** class"
},
"VRow/justify": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-\\***. Available options are: **start**, **center**, **end**, **space-between** and **space-around**."
},
"VRow/justify-sm": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-sm-\\*** class"
},
"VRow/justify-md": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-md-\\*** class"
},
"VRow/justify-lg": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-lg-\\*** class"
},
"VRow/justify-xl": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-xl-\\*** class"
},
"VRow/justify-xxl": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **justify-xxl-\\*** class"
},
"VRow/align-content": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-\\***. Available options are: **start**, **center**, **end**, **space-between**, **space-around** and **stretch**."
},
"VRow/align-content-sm": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-sm-\\*** class"
},
"VRow/align-content-md": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-md-\\*** class"
},
"VRow/align-content-lg": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-lg-\\*** class"
},
"VRow/align-content-xl": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-xl-\\*** class"
},
"VRow/align-content-xxl": {
"type": " | 'end'\n | 'start'\n | 'center'\n | 'stretch'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n",
"description": "Deprecated, use **align-content-xxl-\\*** class"
},
"VRow/no-gutters": {
"type": "boolean\n",
"description": "Removes the gutter between `v-col`s (same as `gap='0'`)."
},
"VScaleTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VScaleTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VScaleTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VScaleTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VScaleTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VScaleTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VScrollXReverseTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VScrollXReverseTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VScrollXReverseTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VScrollXReverseTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VScrollXReverseTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VScrollXReverseTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VScrollXTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VScrollXTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VScrollXTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VScrollXTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VScrollXTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VScrollXTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VScrollYReverseTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VScrollYReverseTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VScrollYReverseTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VScrollYReverseTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VScrollYReverseTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VScrollYReverseTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VScrollYTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VScrollYTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VScrollYTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VScrollYTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VScrollYTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VScrollYTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VSelect/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VSelect/search": {
"type": "string\n",
"description": "Text input used to filter items."
},
"VSelect/type": {
"type": "string\n",
"description": "Sets input type."
},
"VSelect/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VSelect/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VSelect/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VSelect/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VSelect/menu": {
"type": "boolean\n",
"description": "Renders with the menu open by default."
},
"VSelect/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VSelect/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VSelect/multiple": {
"type": "boolean\n",
"description": "Changes select to multiple. Accepts array for value."
},
"VSelect/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VSelect/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSelect/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VSelect/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VSelect/role": {
"type": "string\n",
"description": "The role attribute applied to the input."
},
"VSelect/autofocus": {
"type": "boolean\n",
"description": "Enables autofocus."
},
"VSelect/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSelect/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSelect/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VSelect/rounded": {
"type": "string | number | boolean\n",
"description": "Adds a border radius to the input."
},
"VSelect/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSelect/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSelect/transition": {
"type": " | string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component }\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VSelect/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSelect/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width of the select's `v-menu` content."
},
"VSelect/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VSelect/items": {
"type": "any[]\n",
"description": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props."
},
"VSelect/item-props": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VSelect/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSelect/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VSelect/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VSelect/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VSelect/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the outside the component's input, uses the same syntax as `v-icon`."
},
"VSelect/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VSelect/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VSelect/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VSelect/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VSelect/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VSelect/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VSelect/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VSelect/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VSelect/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VSelect/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VSelect/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VSelect/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VSelect/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VSelect/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VSelect/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VSelect/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VSelect/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VSelect/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VSelect/filter-mode": {
"type": "'every' | 'some' | 'union' | 'intersection'\n",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters."
},
"VSelect/no-filter": {
"type": "boolean\n",
"description": "Disables all item filtering."
},
"VSelect/custom-filter": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.tsx#L22-L22\" target=\"_blank\">FilterFunction</a>\n",
"description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted."
},
"VSelect/custom-key-filter": {
"type": "unknown\n",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified."
},
"VSelect/filter-keys": {
"type": "string | string[]\n",
"description": "Array of specific keys to filter on the item."
},
"VSelect/chips": {
"type": "boolean\n",
"description": "Changes display of selections to chips."
},
"VSelect/closable-chips": {
"type": "boolean\n",
"description": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components."
},
"VSelect/hide-no-data": {
"type": "boolean\n",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open."
},
"VSelect/hide-selected": {
"type": "boolean\n",
"description": "Do not display in the select menu items that are already selected."
},
"VSelect/list-props": {
"type": "unknown\n",
"description": "Pass props through to the `v-list` component. Accepts an object with anything from [v-list](/api/v-list/#props) props, camelCase keys are recommended."
},
"VSelect/item-title": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its title."
},
"VSelect/item-value": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Set property of **items**'s value - **must be primitive**. Dot notation is supported. **Note:** This is currently not supported with `v-combobox` [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479)."
},
"VSelect/item-children": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "This property currently has **no effect**."
},
"VSelect/item-type": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Designates the key on the supplied items that is used for determining the nodes type."
},
"VSelect/return-object": {
"type": "boolean\n",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**."
},
"VSelect/menu-elevation": {
"type": "string | number\n",
"description": "Sets the elevation of the dropdown menu."
},
"VSelect/menu-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Sets the the spin icon."
},
"VSelect/menu-props": {
"type": "unknown\n",
"description": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended."
},
"VSelect/no-data-text": {
"type": "string\n",
"description": "Text shown when no items are provided to the component."
},
"VSelect/open-on-clear": {
"type": "boolean\n",
"description": "When using the **clearable** prop, once cleared, the select menu will either open or stay open, depending on the current state."
},
"VSelect/item-color": {
"type": "string\n",
"description": "Sets color of selected items."
},
"VSelect/no-auto-scroll": {
"type": "boolean\n",
"description": "Prevents the select menu to scroll to the selected item automatically."
},
"VSelect/close-text": {
"type": "string\n",
"description": "Text set to the inputs `aria-label` and `title` when input menu is closed."
},
"VSelect/open-text": {
"type": "string\n",
"description": "Text set to the inputs **aria-label** and **title** when input menu is open."
},
"VSelect/counter": {
"type": "string | number | boolean\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VSelect/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VSelect/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VSelect/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VSelect/append-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VSelect/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VSelect/clear-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VSelect/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VSelect/prepend-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VSelect/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VSelect/counter-value": {
"type": "number | ((value: any) => number)\n",
"description": "Function returns the counter display text."
},
"VSelect/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VSelectionControl/type": {
"type": "string\n",
"description": "Provides the default type for children selection controls."
},
"VSelectionControl/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSelectionControl/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VSelectionControl/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VSelectionControl/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSelectionControl/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSelectionControl/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VSelectionControl/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSelectionControl/indeterminate": {
"type": "boolean\n",
"description": "Styles the control as an intermediate 'partially selected' state."
},
"VSelectionControl/multiple": {
"type": "boolean\n",
"description": "Changes select to multiple. Accepts array for value."
},
"VSelectionControl/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VSelectionControl/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VSelectionControl/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VSelectionControl/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VSelectionControl/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VSelectionControl/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VSelectionControl/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VSelectionControl/inline": {
"type": "boolean\n",
"description": "Puts children inputs into a row."
},
"VSelectionControl/true-value": {
"type": "any\n",
"description": "Sets value for truthy state."
},
"VSelectionControl/false-value": {
"type": "any\n",
"description": "Sets value for falsy state."
},
"VSelectionControl/defaults-target": {
"type": "string\n",
"description": "The target component to provide defaults values for."
},
"VSelectionControl/false-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when inactive."
},
"VSelectionControl/true-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when active."
},
"VSelectionControl/indeterminate-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when the control is in the indeterminate state."
},
"VSelectionControlGroup/type": {
"type": "string\n",
"description": "Provides the default type for children selection controls."
},
"VSelectionControlGroup/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSelectionControlGroup/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VSelectionControlGroup/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VSelectionControlGroup/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSelectionControlGroup/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSelectionControlGroup/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VSelectionControlGroup/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSelectionControlGroup/multiple": {
"type": "boolean\n",
"description": "Changes select to multiple. Accepts array for value."
},
"VSelectionControlGroup/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VSelectionControlGroup/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VSelectionControlGroup/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VSelectionControlGroup/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VSelectionControlGroup/inline": {
"type": "boolean\n",
"description": "Puts children inputs into a row."
},
"VSelectionControlGroup/defaults-target": {
"type": "string\n",
"description": "The target component to provide defaults values for."
},
"VSelectionControlGroup/false-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when inactive."
},
"VSelectionControlGroup/true-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when active."
},
"VSelectionControlGroup/indeterminate-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/SelectionControlGroup.json))"
},
"VSheet/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VSheet/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSheet/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VSheet/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSheet/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VSheet/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSheet/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSheet/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VSheet/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VSheet/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VSheet/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VSheet/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VSheet/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSheet/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VSheet/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSheet/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSkeletonLoader/type": {
"type": " | 'text'\n | (string & {})\n | 'button'\n | 'chip'\n | 'divider'\n | 'subtitle'\n | 'article'\n | 'table'\n | 'image'\n | 'actions'\n | 'table-row'\n | 'list-item'\n | 'avatar'\n | 'heading'\n | 'sentences'\n | 'paragraph'\n | 'ossein'\n | 'card'\n | 'card-avatar'\n | 'date-picker'\n | 'date-picker-options'\n | 'date-picker-days'\n | 'list-item-avatar'\n | 'list-item-two-line'\n | 'list-item-avatar-two-line'\n | 'list-item-three-line'\n | 'list-item-avatar-three-line'\n | 'table-heading'\n | 'table-thead'\n | 'table-tbody'\n | 'table-row-divider'\n | 'table-tfoot'\n | (\n | 'text'\n | (string & {})\n | 'button'\n | 'chip'\n | 'divider'\n | 'subtitle'\n | 'article'\n | 'table'\n | 'image'\n | 'actions'\n | 'table-row'\n | 'list-item'\n | 'avatar'\n | 'heading'\n | 'sentences'\n | 'paragraph'\n | 'ossein'\n | 'card'\n | 'card-avatar'\n | 'date-picker'\n | 'date-picker-options'\n | 'date-picker-days'\n | 'list-item-avatar'\n | 'list-item-two-line'\n | 'list-item-avatar-two-line'\n | 'list-item-three-line'\n | 'list-item-avatar-three-line'\n | 'table-heading'\n | 'table-thead'\n | 'table-tbody'\n | 'table-row-divider'\n | 'table-tfoot'\n )[]\n",
"description": "A string delimited list of skeleton components to create such as `type=\"text@3\"` or `type=\"card, list-item\"`. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as **article@3** and **paragraph@2** which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options."
},
"VSkeletonLoader/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSkeletonLoader/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VSkeletonLoader/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSkeletonLoader/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VSkeletonLoader/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSkeletonLoader/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSkeletonLoader/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VSkeletonLoader/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VSkeletonLoader/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSkeletonLoader/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSkeletonLoader/loading": {
"type": "boolean\n",
"description": "Applies a loading animation with a on-hover loading cursor. A value of **false** will only work when there is content in the `default` slot."
},
"VSkeletonLoader/loading-text": {
"type": "string\n",
"description": "aria-label for the element in a loading state."
},
"VSkeletonLoader/boilerplate": {
"type": "boolean\n",
"description": "Remove the loading animation from the skeleton."
},
"VSlideGroup/symbol": {
"type": "any\n",
"description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/)."
},
"VSlideGroup/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSlideGroup/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VSlideGroup/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VSlideGroup/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VSlideGroup/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VSlideGroup/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VSlideGroup/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VSlideGroup/scroll-to-active": {
"type": "boolean\n",
"description": "Keeps the last active element visible when resizing the scrollable container."
},
"VSlideGroup/content-class": {
"type": "any\n",
"description": "Adds classes to the slide group item."
},
"VSlideGroup/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Switch between horizontal and vertical modes."
},
"VSlideGroup/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VSlideGroup/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Sets the designated mobile breakpoint for the component."
},
"VSlideGroup/prev-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The prepended slot when arrows are shown."
},
"VSlideGroup/next-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The appended slot when arrows are shown."
},
"VSlideGroup/center-active": {
"type": "boolean\n",
"description": "Forces the selected component to be centered."
},
"VSlideGroup/show-arrows": {
"type": "string | boolean\n",
"description": "Change when the overflow arrow indicators are shown. By **default**, arrows *always* display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A **show-arrows** value of `true` allows these arrows to show on Mobile if the container overflowing. A value of `desktop` *always* displays arrows on Desktop while a value of `mobile` always displays arrows on Mobile. A value of `always` always displays arrows on Desktop *and* Mobile. Use **never** to turn arrows off. Find more information on how to customize breakpoint thresholds on the [breakpoints page](/customizing/breakpoints)."
},
"VSlideGroupItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlideGroupItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VSlideGroupItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VSlideXReverseTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlideXReverseTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VSlideXReverseTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSlideXReverseTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VSlideXReverseTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VSlideXReverseTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VSlideXTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlideXTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VSlideXTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSlideXTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VSlideXTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VSlideXTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VSlideYReverseTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlideYReverseTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VSlideYReverseTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSlideYReverseTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VSlideYReverseTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VSlideYReverseTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VSlideYTransition/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlideYTransition/mode": {
"type": "string\n",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition)."
},
"VSlideYTransition/origin": {
"type": "string\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSlideYTransition/group": {
"type": "boolean\n",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup)."
},
"VSlideYTransition/hide-on-leave": {
"type": "boolean\n",
"description": "Hides the leaving element (no exit animation)."
},
"VSlideYTransition/leave-absolute": {
"type": "boolean\n",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/))."
},
"VSlider/model-value": {
"type": "string | number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSlider/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VSlider/reverse": {
"type": "boolean\n",
"description": "Reverses the slider direction."
},
"VSlider/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VSlider/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSlider/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSlider/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSlider/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VSlider/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VSlider/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VSlider/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSlider/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSlider/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSlider/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VSlider/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSlider/max": {
"type": "string | number\n",
"description": "Sets the maximum allowed value."
},
"VSlider/min": {
"type": "string | number\n",
"description": "Sets the minimum allowed value."
},
"VSlider/step": {
"type": "string | number\n",
"description": "If greater than 0, sets step interval for ticks."
},
"VSlider/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VSlider/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VSlider/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VSlider/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VSlider/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VSlider/ripple": {
"type": "boolean\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VSlider/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VSlider/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VSlider/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the input is focused and apply color."
},
"VSlider/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VSlider/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VSlider/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VSlider/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VSlider/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VSlider/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VSlider/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Changes the direction of the input."
},
"VSlider/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VSlider/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VSlider/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VSlider/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VSlider/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VSlider/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VSlider/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VSlider/thumb-color": {
"type": "string\n",
"description": "Sets the thumb and thumb label color."
},
"VSlider/thumb-label": {
"type": "boolean | 'hover' | 'always'\n",
"description": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label. Use `'hover'` to show label when hovering over the thumb."
},
"VSlider/thumb-size": {
"type": "string | number\n",
"description": "Controls the size of the thumb label."
},
"VSlider/show-ticks": {
"type": "boolean | 'always'\n",
"description": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks."
},
"VSlider/ticks": {
"type": "number[] | Record<number, string>\n",
"description": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks."
},
"VSlider/tick-size": {
"type": "string | number\n",
"description": "Controls the size of **ticks**"
},
"VSlider/track-color": {
"type": "string\n",
"description": "Sets the track's color"
},
"VSlider/track-fill-color": {
"type": "string\n",
"description": "Sets the track's fill color"
},
"VSlider/track-size": {
"type": "string | number\n",
"description": "Sets the track's size (height)."
},
"VSlider/no-keyboard": {
"type": "boolean\n",
"description": "**FOR INTERNAL USE ONLY** Ignore keyboard events."
},
"VSnackbar/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VSnackbar/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VSnackbar/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSnackbar/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSnackbar/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VSnackbar/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSnackbar/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VSnackbar/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSnackbar/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSnackbar/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VSnackbar/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VSnackbar/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the content element."
},
"VSnackbar/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VSnackbar/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSnackbar/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSnackbar/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSnackbar/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VSnackbar/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSnackbar/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Displays an icon in the prepend area."
},
"VSnackbar/loading": {
"type": "boolean\n",
"description": "Displays a loading spinner in the prepend area."
},
"VSnackbar/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VSnackbar/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VSnackbar/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VSnackbar/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VSnackbar/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VSnackbar/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VSnackbar/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VSnackbar/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VSnackbar/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VSnackbar/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VSnackbar/open-on-click": {
"type": "boolean\n",
"description": "Activate the component when the activator is clicked."
},
"VSnackbar/open-on-hover": {
"type": "boolean\n",
"description": "Activate the component when the activator is hovered."
},
"VSnackbar/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VSnackbar/close-on-content-click": {
"type": "boolean\n",
"description": "Closes component when you click on its content."
},
"VSnackbar/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VSnackbar/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VSnackbar/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VSnackbar/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSnackbar/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition. Supports special location-aware mode with **slide-auto** and **scroll-auto**"
},
"VSnackbar/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VSnackbar/vertical": {
"type": "boolean\n",
"description": "Stacks snackbar content on top of the actions (button)."
},
"VSnackbar/prepend-avatar": {
"type": "string\n",
"description": "Displays an avatar in the prepend area using the provided image source."
},
"VSnackbar/queue-gap": {
"type": "number\n",
"description": "Sets the offset to show collapsed snackbars as a stack. Requires value in pixels."
},
"VSnackbar/queue-index": {
"type": "number\n",
"description": "The index position of this snackbar within a queue."
},
"VSnackbar/reverse-timer": {
"type": "boolean\n",
"description": "Reverses the direction of the timer progress bar, filling up instead of depleting."
},
"VSnackbar/timer": {
"type": "boolean | 'top' | 'bottom'\n",
"description": "Display a progress bar that counts down until the snackbar closes. Use `bottom` to change the default placement."
},
"VSnackbar/timer-color": {
"type": "string\n",
"description": "Sets the color of the timer progress bar."
},
"VSnackbar/timeout": {
"type": "string | number\n",
"description": "Time (in milliseconds) to wait until snackbar is automatically hidden. Use `-1` to keep open indefinitely. It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the countdown."
},
"VSnackbar/collapsed": {
"type": "{ width: number; height: number }\n",
"description": "Alters the element size fit behind front snackbar in the queue."
},
"VSnackbarQueue/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VSnackbarQueue/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VSnackbarQueue/closable": {
"type": "string | boolean\n",
"description": "Adds a dismiss button that closes the active snackbar."
},
"VSnackbarQueue/model-value": {
"type": "(\n | string\n | ({\n title: string\n text: string\n class: any\n height: string | number\n maxHeight: string | number\n maxWidth: string | number\n minHeight: string | number\n minWidth: string | number\n width: string | number\n location: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n absolute: boolean\n rounded: string | number | boolean\n tile: boolean\n theme: string\n color: string\n variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n disabled: boolean\n prependIcon:\n | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n loading: boolean\n eager: boolean\n closeOnBack: boolean\n contained: boolean\n contentClass: any\n contentProps: any\n opacity: string | number\n zIndex: string | number\n target:\n | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n closeOnContentClick: boolean\n locationStrategy: 'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n origin: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n transition:\n | string\n | boolean\n | (TransitionProps & { component: Component })\n attach: string | boolean | Element\n vertical: boolean\n prependAvatar: string\n queueGap: number\n queueIndex: number\n reverseTimer: boolean\n timer: boolean | 'top' | 'bottom'\n timerColor: string\n timeout: string | number\n } & { style: any } & {\n collapsed: { width: number; height: number }\n promise: Promise<unknown>\n success: (\n val: unknown,\n ) => {\n title: string\n text: string\n class: any\n height: string | number\n maxHeight: string | number\n maxWidth: string | number\n minHeight: string | number\n minWidth: string | number\n width: string | number\n location: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n absolute: boolean\n rounded: string | number | boolean\n tile: boolean\n theme: string\n color: string\n variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n disabled: boolean\n prependIcon:\n | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n loading: boolean\n eager: boolean\n closeOnBack: boolean\n contained: boolean\n contentClass: any\n contentProps: any\n opacity: string | number\n zIndex: string | number\n target:\n | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n closeOnContentClick: boolean\n locationStrategy: 'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n origin: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n transition:\n | string\n | boolean\n | (TransitionProps & { component: Component })\n attach: string | boolean | Element\n vertical: boolean\n prependAvatar: string\n queueGap: number\n queueIndex: number\n reverseTimer: boolean\n timer: boolean | 'top' | 'bottom'\n timerColor: string\n timeout: string | number\n } & { style: any }\n error: (\n val: Error,\n ) => {\n title: string\n text: string\n class: any\n height: string | number\n maxHeight: string | number\n maxWidth: string | number\n minHeight: string | number\n minWidth: string | number\n width: string | number\n location: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n absolute: boolean\n rounded: string | number | boolean\n tile: boolean\n theme: string\n color: string\n variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n disabled: boolean\n prependIcon:\n | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n loading: boolean\n eager: boolean\n closeOnBack: boolean\n contained: boolean\n contentClass: any\n contentProps: any\n opacity: string | number\n zIndex: string | number\n target:\n | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n closeOnContentClick: boolean\n locationStrategy: 'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n origin: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n transition:\n | string\n | boolean\n | (TransitionProps & { component: Component })\n attach: string | boolean | Element\n vertical: boolean\n prependAvatar: string\n queueGap: number\n queueIndex: number\n reverseTimer: boolean\n timer: boolean | 'top' | 'bottom'\n timerColor: string\n timeout: string | number\n } & { style: any }\n onDismiss: (reason: 'auto' | 'overflow' | 'dismissed' | 'cleared') => void\n })\n)[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSnackbarQueue/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSnackbarQueue/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VSnackbarQueue/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSnackbarQueue/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VSnackbarQueue/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSnackbarQueue/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSnackbarQueue/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VSnackbarQueue/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VSnackbarQueue/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the content element."
},
"VSnackbarQueue/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VSnackbarQueue/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSnackbarQueue/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSnackbarQueue/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSnackbarQueue/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VSnackbarQueue/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSnackbarQueue/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Displays an icon in the prepend area."
},
"VSnackbarQueue/loading": {
"type": "boolean\n",
"description": "Displays a loading spinner in the prepend area."
},
"VSnackbarQueue/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VSnackbarQueue/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VSnackbarQueue/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VSnackbarQueue/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VSnackbarQueue/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VSnackbarQueue/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VSnackbarQueue/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VSnackbarQueue/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VSnackbarQueue/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VSnackbarQueue/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VSnackbarQueue/open-on-click": {
"type": "boolean\n",
"description": "Activate the component when the activator is clicked."
},
"VSnackbarQueue/open-on-hover": {
"type": "boolean\n",
"description": "Activate the component when the activator is hovered."
},
"VSnackbarQueue/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VSnackbarQueue/close-on-content-click": {
"type": "boolean\n",
"description": "Closes component when you click on its content."
},
"VSnackbarQueue/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events."
},
"VSnackbarQueue/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events."
},
"VSnackbarQueue/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VSnackbarQueue/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSnackbarQueue/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition. Supports special location-aware mode with **slide-auto** and **scroll-auto**"
},
"VSnackbarQueue/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VSnackbarQueue/close-text": {
"type": "string\n",
"description": "The text used in the close button when using the **closable** prop."
},
"VSnackbarQueue/vertical": {
"type": "boolean\n",
"description": "Stacks snackbar content on top of the actions (button)."
},
"VSnackbarQueue/prepend-avatar": {
"type": "string\n",
"description": "Displays an avatar in the prepend area using the provided image source."
},
"VSnackbarQueue/total-visible": {
"type": "string | number\n",
"description": "Specify the total visible snackbars."
},
"VSnackbarQueue/gap": {
"type": "string | number\n",
"description": "Sets the gap between stacked snackbars. Requires value in pixels."
},
"VSnackbarQueue/reverse-timer": {
"type": "boolean\n",
"description": "Reverses the direction of the timer progress bar, filling up instead of depleting."
},
"VSnackbarQueue/timer": {
"type": "boolean | 'top' | 'bottom'\n",
"description": "Display a progress bar that counts down until the snackbar closes. Use `bottom` to change the default placement."
},
"VSnackbarQueue/timer-color": {
"type": "string\n",
"description": "Sets the color of the timer progress bar."
},
"VSnackbarQueue/timeout": {
"type": "string | number\n",
"description": "Time (in milliseconds) to wait until snackbar is automatically hidden. Use `-1` to keep open indefinitely. It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the countdown."
},
"VSnackbarQueue/collapsed": {
"type": "boolean\n",
"description": "Puts the visible snackbars behind each other (expands on hover)."
},
"VSnackbarQueue/display-strategy": {
"type": "'overflow' | 'hold'\n",
"description": "Determines how new snackbars are handled when the queue is full. **hold** (default) keeps new messages queued until a slot opens. **overflow** dismisses the oldest snackbar to make room for the new one."
},
"VSpacer/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VSparkline/type": {
"type": "'bar' | 'trend'\n",
"description": "Choose between a trendline or bars."
},
"VSparkline/model-value": {
"type": "(number | { value: number })[]\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSparkline/fill": {
"type": "boolean\n",
"description": "Using the **fill** property allows you to better customize the look and feel of your sparkline."
},
"VSparkline/height": {
"type": "string | number\n",
"description": "Height of the SVG container."
},
"VSparkline/width": {
"type": "string | number\n",
"description": "Width of the SVG container."
},
"VSparkline/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSparkline/labels": {
"type": "(string | (number | { value: number }))[]\n",
"description": "An array of string labels that correspond to the same index as its data counterpart."
},
"VSparkline/max": {
"type": "string | number\n",
"description": "The maximum value of the sparkline."
},
"VSparkline/min": {
"type": "string | number\n",
"description": "The minimum value of the sparkline."
},
"VSparkline/id": {
"type": "string\n",
"description": "The id of the component."
},
"VSparkline/item-value": {
"type": "string\n",
"description": "The value of the item."
},
"VSparkline/gradient": {
"type": "string[]\n",
"description": "An array of colors to use as a linear-gradient."
},
"VSparkline/inset": {
"type": "boolean\n",
"description": "Extends the line beyond the chart boundary so it runs edge-to-edge."
},
"VSparkline/animation": {
"type": "boolean | { duration: number; easing: string }\n",
"description": "Enables smooth transitions when values change. When `true`, uses default duration (300ms) and easing (`ease`). Can be an object with `duration` (ms) and `easing` (CSS easing) properties."
},
"VSparkline/smooth": {
"type": "string | number | boolean\n",
"description": "Controls the curve tension. `true` defaults to 8, `false` or `0` gives straight lines. Higher values produce smoother curves."
},
"VSparkline/tooltip": {
"type": " | boolean\n | {\n titleFormat: (item: { index: number; value: number }) => string\n offset: number\n class: any\n showCrosshair: false | true\n }\n",
"description": "Displays a tooltip on the active data point. Requires **interactive**. Can be `true` or an object with `titleFormat`, `offset`, and `showCrosshair` options."
},
"VSparkline/padding": {
"type": "string | number\n",
"description": "Low `smooth` or high `line-width` values may result in cropping, increase padding to compensate."
},
"VSparkline/auto-line-width": {
"type": "boolean\n",
"description": "Automatically expand bars to use space efficiently."
},
"VSparkline/auto-draw": {
"type": "boolean | 'once'\n",
"description": "Trace the length of the line when first rendered. Since 4.1.0 it accepts `'once'`, to make the animation play only on mount and make the subsequent value changes interpolate smoothly."
},
"VSparkline/auto-draw-duration": {
"type": "string | number\n",
"description": "Amount of time (in ms) to run the trace animation."
},
"VSparkline/auto-draw-easing": {
"type": "string\n",
"description": "The easing function to use for the trace animation."
},
"VSparkline/gradient-direction": {
"type": "'top' | 'bottom' | 'left' | 'right'\n",
"description": "The direction the gradient should run."
},
"VSparkline/label-size": {
"type": "string | number\n",
"description": "The label font size."
},
"VSparkline/line-width": {
"type": "string | number\n",
"description": "The thickness of the line, in px."
},
"VSparkline/marker-size": {
"type": "string | number\n",
"description": "The diameter of marker circles, in px."
},
"VSparkline/marker-stroke": {
"type": "string\n",
"description": "The stroke (border) color applied to marker circles."
},
"VSparkline/show-labels": {
"type": "boolean\n",
"description": "Show labels below each data point."
},
"VSparkline/show-markers": {
"type": "boolean\n",
"description": "Show circle markers at each data point."
},
"VSparkline/smooth-mode": {
"type": "'default' | 'monotone'\n",
"description": "The interpolation algorithm to use. `default` uses corner-rounding which can cause the line to appear away from actual values. `monotone` makes the line stick to exact data points. In `monotone` mode, **smooth** is limited to 8."
},
"VSparkline/interactive": {
"type": "boolean\n",
"description": "Enables hover tracking, keyboard navigation (arrow keys), and focus support. Required for **tooltip** to work."
},
"VSparklineTooltip/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSparklineTooltip/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VSparklineTooltip.json))"
},
"VSparklineTooltip/value": {
"type": "number\n",
"description": "Value of the active data point. Forwarded to **title-format** and the default slot."
},
"VSparklineTooltip/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VSparklineTooltip/target": {
"type": "[number, number]\n",
"description": "The coordinates used to position the tooltip."
},
"VSparklineTooltip/offset": {
"type": "number\n",
"description": "Distance in pixels between the tooltip and the target point."
},
"VSparklineTooltip/index": {
"type": "number\n",
"description": "Index of the active data point. Pass `null` to hide the tooltip content."
},
"VSparklineTooltip/title-format": {
"type": "(item: { index: number; value: number }) => string\n",
"description": "Function used to format the tooltip body when no slot is provided. Receives `{ index, value }`."
},
"VSpeedDial/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSpeedDial/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSpeedDial/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VSpeedDial/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSpeedDial/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VSpeedDial/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSpeedDial/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSpeedDial/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.."
},
"VSpeedDial/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSpeedDial/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSpeedDial/id": {
"type": "string\n",
"description": "The unique identifier of the component."
},
"VSpeedDial/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VSpeedDial/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VSpeedDial/submenu": {
"type": "boolean\n",
"description": "Opens with right arrow and closes on left instead of up/down. Implies `location=\"end\"`. Directions are reversed for RTL."
},
"VSpeedDial/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VSpeedDial/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VSpeedDial/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VSpeedDial/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VSpeedDial/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VSpeedDial/no-click-animation": {
"type": "boolean\n",
"description": "Disables the bounce effect when clicking outside of the content element when using the persistent prop."
},
"VSpeedDial/persistent": {
"type": "boolean\n",
"description": "Clicking outside of the element or pressing esc key will not deactivate it."
},
"VSpeedDial/scrim": {
"type": "string | boolean\n",
"description": "Accepts true/false to enable background, and string to define color."
},
"VSpeedDial/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VSpeedDial/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VSpeedDial/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VSpeedDial/open-on-click": {
"type": "boolean\n",
"description": "Designates whether menu should open on activator click."
},
"VSpeedDial/open-on-hover": {
"type": "boolean\n",
"description": "Opens speed-dial on hover."
},
"VSpeedDial/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VSpeedDial/close-on-content-click": {
"type": "boolean\n",
"description": "Designates if menu should close when its content is clicked."
},
"VSpeedDial/close-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before closing component. Only works with the **open-on-hover** prop."
},
"VSpeedDial/open-delay": {
"type": "string | number\n",
"description": "Milliseconds to wait before opening component. Only works with the **open-on-hover** prop."
},
"VSpeedDial/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VSpeedDial/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VSpeedDial/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VSpeedDial/stick-to-target": {
"type": "boolean\n",
"description": "Enables the overlay content to go off-screen when scrolling."
},
"VSpeedDial/viewport-margin": {
"type": "string | number\n",
"description": "Sets custom viewport margin for the overlay content"
},
"VSpeedDial/scroll-strategy": {
"type": "'close' | 'block' | 'none' | 'reposition' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n",
"description": "Strategy used when the component is activate and user scrolls."
},
"VSpeedDial/retain-focus": {
"type": "boolean\n",
"description": "Captures and keeps focus within the content element when using **Tab** and **Shift**+**Tab**. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard."
},
"VSpeedDial/capture-focus": {
"type": "boolean\n",
"description": "When enabled, focus will be trapped within the component's content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility."
},
"VSpeedDial/disable-initial-focus": {
"type": "boolean\n",
"description": "Deprecated, use `capture-focus` instead. Prevents automatic redirect of first `focusin` event. Intended to use on permanently open menus or VSpeedDial."
},
"VSpeedDial/transition": {
"type": " | string\n | boolean\n | (TransitionProps & { component: Component })\n | {\n component: ComponentPublicInstanceConstructor<\n CreateComponentPublicInstanceWithMixins<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n PublicProps,\n {},\n true,\n {},\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n {},\n any,\n ComponentProvideOptions,\n OptionTypesType<{}, {}, {}, {}, {}, {}>,\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n {},\n {},\n {},\n {}\n >,\n any,\n any,\n any,\n ComputedOptions,\n MethodOptions\n > &\n ComponentOptionsBase<\n {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n string,\n {},\n {},\n string,\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n ComponentProvideOptions\n > &\n VNodeProps &\n AllowedComponentProps &\n ComponentCustomProps & {\n filterProps: (props: T) => Partial<Pick<T, U>>\n }\n }\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VSpeedDial/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VStepper/flat": {
"type": "boolean\n",
"description": "Removes the stepper's elevation."
},
"VStepper/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VStepper/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VStepper/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VStepper/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VStepper/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VStepper/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VStepper/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VStepper/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VStepper/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VStepper/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VStepper/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VStepper/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VStepper/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VStepper/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VStepper/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VStepper/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VStepper/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepper/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VStepper/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VStepper/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VStepper/items": {
"type": "(string | Record<string, any>)[]\n",
"description": "An array of strings or objects used for automatically generating children components."
},
"VStepper/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepper/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepper/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VStepper/item-title": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its title."
},
"VStepper/item-value": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its value."
},
"VStepper/item-props": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VStepper/mobile": {
"type": "boolean\n",
"description": "Forces the stepper into a mobile state, removing labels from stepper items."
},
"VStepper/hide-actions": {
"type": "boolean\n",
"description": "Hide actions bar (prev and next buttons)."
},
"VStepper/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VStepper/alt-labels": {
"type": "boolean\n",
"description": "Places the labels beneath the step."
},
"VStepper/complete-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is marked as completed."
},
"VStepper/edit-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is editable."
},
"VStepper/editable": {
"type": "boolean\n",
"description": "Marks step as editable."
},
"VStepper/error-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step has an error."
},
"VStepper/non-linear": {
"type": "boolean\n",
"description": "Allow user to jump to any step."
},
"VStepper/prev-text": {
"type": "string\n",
"description": "The text used for the Prev button."
},
"VStepper/next-text": {
"type": "string\n",
"description": "The text used for the Next button."
},
"VStepperActions/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperActions/disabled": {
"type": "boolean | 'next' | 'prev'\n",
"description": "Removes the ability to click or target the component."
},
"VStepperActions/prev-text": {
"type": "string\n",
"description": "The text used for the Prev button."
},
"VStepperActions/next-text": {
"type": "string\n",
"description": "The text used for the Next button."
},
"VStepperHeader/tag": {
"type": "string\n",
"description": "Specify a custom tag used on the root element."
},
"VStepperItem/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VStepperItem/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VStepperItem/error": {
"type": "boolean\n",
"description": "Puts the stepper item in a manual error state."
},
"VStepperItem/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VStepperItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VStepperItem/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VStepperItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepperItem/subtitle": {
"type": "string\n",
"description": "Specify a subtitle text for the component."
},
"VStepperItem/rules": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VStepper/VStepperItem.tsx#L43-L43\" target=\"_blank\">ValidationRule</a>[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VStepperItem/complete-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is marked as completed."
},
"VStepperItem/edit-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is editable."
},
"VStepperItem/editable": {
"type": "boolean\n",
"description": "Marks step as editable."
},
"VStepperItem/error-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step has an error."
},
"VStepperItem/complete": {
"type": "boolean\n",
"description": "Marks step as complete."
},
"VStepperVertical/flat": {
"type": "boolean\n",
"description": "Removes the expansion-panel's elevation and borders."
},
"VStepperVertical/model-value": {
"type": "unknown\n",
"description": "Controls expanded panel(s). Defaults to an empty array when using **multiple** prop. It is recommended to set unique `value` prop for the panels inside, otherwise index is used instead."
},
"VStepperVertical/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VStepperVertical/rounded": {
"type": "string | number | boolean | (string | number)[]\n",
"description": "Applies a border radius to the first and last panel. Since v4.1.0 accepts array of two values to customize inner radius."
},
"VStepperVertical/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VStepperVertical/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VStepperVertical/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VStepperVertical/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperVertical/variant": {
"type": "'default' | 'inset' | 'accordion' | 'popout'\n",
"description": "Applies a distinct style to the component."
},
"VStepperVertical/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VStepperVertical/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VStepperVertical/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VStepperVertical/items": {
"type": "(string | Record<string, any>)[]\n",
"description": "An array of strings or objects used for automatically generating children components."
},
"VStepperVertical/readonly": {
"type": "boolean\n",
"description": "Makes the entire expansion panel read only."
},
"VStepperVertical/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VStepperVertical/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepperVertical/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VStepperVertical/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperVertical/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used when the expansion panel is in a expandable state."
},
"VStepperVertical/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used when the expansion panel is in a collapsable state."
},
"VStepperVertical/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VStepperVertical/item-title": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its title."
},
"VStepperVertical/item-value": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its value."
},
"VStepperVertical/item-props": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VStepperVertical/mobile": {
"type": "boolean\n",
"description": "Forces the stepper into a mobile state, removing labels from stepper items."
},
"VStepperVertical/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon in the content title."
},
"VStepperVertical/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile."
},
"VStepperVertical/hover": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))"
},
"VStepperVertical/gap": {
"type": "string | number\n",
"description": "Sets the gap between panels. Hides the divider automatically."
},
"VStepperVertical/alt-labels": {
"type": "boolean\n",
"description": "Places the labels beneath the step."
},
"VStepperVertical/complete-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is marked as completed."
},
"VStepperVertical/edit-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is editable."
},
"VStepperVertical/editable": {
"type": "boolean\n",
"description": "Marks step as editable."
},
"VStepperVertical/error-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step has an error."
},
"VStepperVertical/non-linear": {
"type": "boolean\n",
"description": "Allow user to jump to any step."
},
"VStepperVertical/prev-text": {
"type": "string\n",
"description": "The text used for the Prev button."
},
"VStepperVertical/next-text": {
"type": "string\n",
"description": "The text used for the Next button."
},
"VStepperVertical/no-divider": {
"type": "boolean\n",
"description": "Hides the dividers between adjacent panels."
},
"VStepperVertical/focusable": {
"type": "boolean\n",
"description": "Makes the expansion-panel headers focusable."
},
"VStepperVerticalActions/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperVerticalActions/disabled": {
"type": "boolean | 'next' | 'prev'\n",
"description": "Removes the ability to click or target the component."
},
"VStepperVerticalActions/prev-text": {
"type": "string\n",
"description": "The text used for the Prev button."
},
"VStepperVerticalActions/next-text": {
"type": "string\n",
"description": "The text used for the Next button."
},
"VStepperVerticalItem/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VStepperVerticalItem/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VStepperVerticalItem/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VStepperVerticalItem/error": {
"type": "boolean\n",
"description": "Puts the stepper item in a manual error state."
},
"VStepperVerticalItem/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VStepperVerticalItem/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VStepperVerticalItem/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VStepperVerticalItem/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VStepperVerticalItem/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VStepperVerticalItem/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VStepperVerticalItem/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VStepperVerticalItem/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VStepperVerticalItem/static": {
"type": "boolean\n",
"description": "Remove title size expansion when selected."
},
"VStepperVerticalItem/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VStepperVerticalItem/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VStepperVerticalItem/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VStepperVerticalItem/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperVerticalItem/disabled": {
"type": "boolean\n",
"description": "Disables the expansion-panel content."
},
"VStepperVerticalItem/value": {
"type": "any\n",
"description": "Controls the opened/closed state of content."
},
"VStepperVerticalItem/readonly": {
"type": "boolean\n",
"description": "Makes the expansion panel content read only."
},
"VStepperVerticalItem/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VStepperVerticalItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepperVerticalItem/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VStepperVerticalItem/subtitle": {
"type": "string\n",
"description": "Specify a subtitle text for the component."
},
"VStepperVerticalItem/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VStepperVerticalItem/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used when the expansion panel is in a expandable state."
},
"VStepperVerticalItem/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used when the expansion panel is in a collapsable state."
},
"VStepperVerticalItem/rules": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VStepper/VStepperItem.tsx#L43-L43\" target=\"_blank\">ValidationRule</a>[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VStepperVerticalItem/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon in the content title."
},
"VStepperVerticalItem/hover": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))"
},
"VStepperVerticalItem/complete-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is marked as completed."
},
"VStepperVerticalItem/edit-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step is editable."
},
"VStepperVerticalItem/editable": {
"type": "boolean\n",
"description": "Marks step as editable."
},
"VStepperVerticalItem/error-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when step has an error."
},
"VStepperVerticalItem/complete": {
"type": "boolean\n",
"description": "Marks step as complete."
},
"VStepperVerticalItem/focusable": {
"type": "boolean\n",
"description": "Makes the expansion panel content focusable."
},
"VStepperWindow/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VStepperWindow/reverse": {
"type": "boolean\n",
"description": "Reverse the normal transition direction."
},
"VStepperWindow/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VStepperWindow/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VStepperWindow/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VStepperWindow/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepperWindow/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "The transition direction when changing windows."
},
"VStepperWindow/crossfade": {
"type": "boolean\n",
"description": "Enables crossfade transition."
},
"VStepperWindow/transition-duration": {
"type": "number\n",
"description": "Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`."
},
"VStepperWindow/vertical-arrows": {
"type": "boolean | 'left' | 'right'\n",
"description": "Displays the navigation arrows vertically instead of horizontally."
},
"VStepperWindowItem/disabled": {
"type": "boolean\n",
"description": "Prevents the item from becoming active when using the \"next\" and \"prev\" buttons or the `toggle` method."
},
"VStepperWindowItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VStepperWindowItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VStepperWindowItem/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VStepperWindowItem/transition": {
"type": "string | boolean\n",
"description": "The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VStepperWindowItem/reverse-transition": {
"type": "string | boolean\n",
"description": "Sets the reverse transition."
},
"VSvgIcon/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component."
},
"VSvgIcon/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VSwitch/flat": {
"type": "boolean\n",
"description": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it."
},
"VSwitch/type": {
"type": "string\n",
"description": "Provides the default type for children selection controls."
},
"VSwitch/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VSwitch/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VSwitch/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VSwitch/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VSwitch/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VSwitch/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VSwitch/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSwitch/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSwitch/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VSwitch/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VSwitch/indeterminate": {
"type": "boolean\n",
"description": "Sets an indeterminate state for the switch."
},
"VSwitch/multiple": {
"type": "boolean\n",
"description": "Changes expected model to an array."
},
"VSwitch/size": {
"type": "string | number\n",
"description": "Scales the track and thumb. Accepts the predefined sizes **x-small**, **small**, **default**, **large**, and **x-large**, or a numeric value for a custom scale."
},
"VSwitch/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VSwitch/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VSwitch/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VSwitch/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VSwitch/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VSwitch/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VSwitch/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VSwitch/loading": {
"type": "string | boolean\n",
"description": "Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color."
},
"VSwitch/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VSwitch/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VSwitch/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VSwitch/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VSwitch/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VSwitch/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VSwitch/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VSwitch/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VSwitch/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VSwitch/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "Changes the direction of the input."
},
"VSwitch/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VSwitch/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VSwitch/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VSwitch/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VSwitch/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VSwitch/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VSwitch/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VSwitch/inline": {
"type": "boolean\n",
"description": "Puts children inputs into a row."
},
"VSwitch/inset": {
"type": "boolean | 'tonal' | 'square' | 'material'\n",
"description": "Controls the track and thumb styling\n- **tonal** (or `true`) enlarges the track to encompass the thumb\n- **material** applies the Material Design 3 treatment: an outlined track that fills when on and a thumb that morphs between states\n- **square** is the **material** variant with less round corners.\n\nNon-boolean values were introduced in v4.1.0."
},
"VSwitch/true-value": {
"type": "any\n",
"description": "Sets value for truthy state."
},
"VSwitch/false-value": {
"type": "any\n",
"description": "Sets value for falsy state."
},
"VSwitch/defaults-target": {
"type": "string\n",
"description": "The target component to provide defaults values for."
},
"VSwitch/false-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when inactive."
},
"VSwitch/true-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when active."
},
"VSwitch/indeterminate-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when the control is in the indeterminate state."
},
"VSwitch/thumb-color": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VSwitch.json))"
},
"VSystemBar/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VSystemBar/name": {
"type": "string\n",
"description": "Assign a specific name for layout registration."
},
"VSystemBar/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VSystemBar/absolute": {
"type": "boolean\n",
"description": "Applies **position: absolute** to the component."
},
"VSystemBar/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VSystemBar/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VSystemBar/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VSystemBar/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VSystemBar/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VSystemBar/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VSystemBar/order": {
"type": "string | number\n",
"description": "Adjust the order of the component in relation to its registration order."
},
"VSystemBar/window": {
"type": "boolean\n",
"description": "Increases the system bar height to 32px (24px default)."
},
"VTab/replace": {
"type": "boolean\n",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation."
},
"VTab/fixed": {
"type": "boolean\n",
"description": "Forces component to take up all available space up to their maximum width (300px), and centers it."
},
"VTab/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTab/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTab/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTab/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VTab/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VTab/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTab/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTab/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTab/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VTab/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VTab/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VTab/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VTab/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTab/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTab/text": {
"type": "string | number | boolean\n",
"description": "Specify content text for the component."
},
"VTab/icon": {
"type": " | boolean\n | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_."
},
"VTab/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTab/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTab/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTab/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTab/variant": {
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VTab/stacked": {
"type": "boolean\n",
"description": "Displays the tab as a flex-column."
},
"VTab/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VTab/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VTab/inset": {
"type": "boolean\n",
"description": "Changes the slider to take full height. Automatically propagated from VTabs."
},
"VTab/active-color": {
"type": "string\n",
"description": "The applied color when the component is in an active state."
},
"VTab/href": {
"type": "string\n",
"description": "Designates the component as anchor and applies the **href** attribute."
},
"VTab/to": {
"type": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric\n",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
},
"VTab/exact": {
"type": "boolean\n",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
},
"VTab/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content."
},
"VTab/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VTab/readonly": {
"type": "boolean\n",
"description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard."
},
"VTab/slim": {
"type": "boolean\n",
"description": "Reduces padding to 0 8px."
},
"VTab/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VTab/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VTab/spaced": {
"type": "'start' | 'end' | 'both'\n",
"description": "Extends content to the edges to move main content from prepend and append slots."
},
"VTab/direction": {
"type": "'vertical' | 'horizontal'\n",
"description": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`."
},
"VTab/slider-color": {
"type": "string\n",
"description": "Applies specified color to the slider when active on that component - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTab/slider-transition-duration": {
"type": "string | number\n",
"description": "Applies custom slider transition duration. Default duration depends on transition type (fade: 400, grow: 350, shift: 225)."
},
"VTab/hide-slider": {
"type": "boolean\n",
"description": "Hides the active tab slider component (no exit or enter animation)."
},
"VTab/slider-transition": {
"type": "'shift' | 'grow' | 'fade'\n",
"description": "Changes slider transition to one of the predefined animation presets."
},
"VTable/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTable/height": {
"type": "string | number\n",
"description": "Use the height prop to set the height of the table."
},
"VTable/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTable/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTable/fixed-header": {
"type": "boolean\n",
"description": "Use the fixed-header prop together with the height prop to fix the header to the top of the table."
},
"VTable/gridlines": {
"type": "boolean | 'horizontal' | 'vertical' | 'all'\n",
"description": "Controls cell borders\n- **horizontal** draws lines between rows\n- **vertical** between columns (keeps horizontal lines of header and footer rows)\n- **all** / `true` draws both vertical and horizontal lines\n- `false` removes all lines."
},
"VTable/fixed-footer": {
"type": "boolean\n",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table."
},
"VTable/hover": {
"type": "boolean\n",
"description": "Will add a hover effect to a table's row when the mouse is over it."
},
"VTable/striped": {
"type": "'odd' | 'even'\n",
"description": "Applies a background to either **even** or **odd** rows."
},
"VTabs/symbol": {
"type": "any\n",
"description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/)."
},
"VTabs/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTabs/disabled": {
"type": "boolean\n",
"description": "Puts all children components into a disabled state."
},
"VTabs/height": {
"type": "string | number\n",
"description": "Sets the height of the tabs bar."
},
"VTabs/max": {
"type": "number\n",
"description": "Sets a maximum number of selections that can be made."
},
"VTabs/multiple": {
"type": "boolean\n",
"description": "Allows one to select multiple items."
},
"VTabs/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTabs/color": {
"type": "string\n",
"description": "Applies specified color to the selected tab - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTabs/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTabs/items": {
"type": "unknown[]\n",
"description": "The items to display in the component. This can be an array of strings or objects with a property `text`."
},
"VTabs/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTabs/stacked": {
"type": "boolean\n",
"description": "Apply the stacked prop to all children v-tab components."
},
"VTabs/mobile": {
"type": "boolean\n",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint"
},
"VTabs/mobile-breakpoint": {
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n",
"description": "Sets the designated mobile breakpoint for the component."
},
"VTabs/grow": {
"type": "boolean\n",
"description": "Forces tabs to take up all available space."
},
"VTabs/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VTabs/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VTabs/inset": {
"type": "boolean\n",
"description": "Changes the slider to take full height. Tabs will also get some spacing and customizable rounding."
},
"VTabs/content-class": {
"type": "any\n",
"description": "Adds classes to the slide group item."
},
"VTabs/spaced": {
"type": "'start' | 'end' | 'both'\n",
"description": "Extends content to the edges to move main content from prepend and append slots."
},
"VTabs/direction": {
"type": "'vertical' | 'horizontal'\n",
"description": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`."
},
"VTabs/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Right pagination icon."
},
"VTabs/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Left pagination icon."
},
"VTabs/show-arrows": {
"type": "string | boolean\n",
"description": "Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop."
},
"VTabs/center-active": {
"type": "boolean\n",
"description": "Forces the selected tab to be centered."
},
"VTabs/scroll-to-active": {
"type": "boolean\n",
"description": "Keeps the last active element visible when resizing the scrollable container."
},
"VTabs/slider-color": {
"type": "string\n",
"description": "Changes the background color of an auto-generated `v-tabs-slider`."
},
"VTabs/slider-transition-duration": {
"type": "string | number\n",
"description": "Applies custom slider transition duration. Default duration depends on transition type (fade: 400, grow: 350, shift: 225)."
},
"VTabs/hide-slider": {
"type": "boolean\n",
"description": "Hide's the generated `v-tabs-slider`."
},
"VTabs/slider-transition": {
"type": "'shift' | 'grow' | 'fade'\n",
"description": "Changes slider transition to one of the predefined animation presets."
},
"VTabs/align-tabs": {
"type": "'title' | 'start' | 'end' | 'center'\n",
"description": "Aligns the tabs to the `start`, `center`, or `end` of container. Also accepts `title` to align with the `v-toolbar-title` component."
},
"VTabs/fixed-tabs": {
"type": "boolean\n",
"description": "Tabs will be centered and each tab item will grow up to 300px width."
},
"VTabs/inset-padding": {
"type": "string | number\n",
"description": "Sets custom spacing between tabs for `inset` mode."
},
"VTabs/inset-radius": {
"type": "string | number\n",
"description": "Sets custom border radius for the tabs container `inset` mode. Rounding for individual tabs is calculated by subtracting the padding."
},
"VTabsWindow/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTabsWindow/reverse": {
"type": "boolean\n",
"description": "Reverse the normal transition direction."
},
"VTabsWindow/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTabsWindow/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTabsWindow/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTabsWindow/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VTabsWindow/direction": {
"type": "'horizontal' | 'vertical'\n",
"description": "The transition direction when changing windows."
},
"VTabsWindow/crossfade": {
"type": "boolean\n",
"description": "Enables crossfade transition."
},
"VTabsWindow/transition-duration": {
"type": "number\n",
"description": "Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`."
},
"VTabsWindow/vertical-arrows": {
"type": "boolean | 'left' | 'right'\n",
"description": "Displays the navigation arrows vertically instead of horizontally."
},
"VTabsWindowItem/disabled": {
"type": "boolean\n",
"description": "Prevents the item from becoming active when using the \"next\" and \"prev\" buttons or the `toggle` method."
},
"VTabsWindowItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VTabsWindowItem/transition": {
"type": "string | boolean\n",
"description": "The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VTabsWindowItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VTabsWindowItem/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VTabsWindowItem/reverse-transition": {
"type": "string | boolean\n",
"description": "Sets the reverse transition."
},
"VTextField/flat": {
"type": "boolean\n",
"description": "Removes elevation (shadow) added to element when using the **solo** or **solo-inverted** props."
},
"VTextField/type": {
"type": "string\n",
"description": "Sets input type."
},
"VTextField/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTextField/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VTextField/reverse": {
"type": "boolean\n",
"description": "Reverses the input orientation."
},
"VTextField/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTextField/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTextField/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTextField/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTextField/rounded": {
"type": "string | number | boolean\n",
"description": "Adds a border radius to the input."
},
"VTextField/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTextField/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTextField/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTextField/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'underlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VTextField/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VTextField/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VTextField/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VTextField/placeholder": {
"type": "string\n",
"description": "Sets the input’s placeholder text."
},
"VTextField/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VTextField/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VTextField/role": {
"type": "string\n",
"description": "The role attribute applied to the input."
},
"VTextField/autofocus": {
"type": "boolean\n",
"description": "Enables autofocus."
},
"VTextField/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VTextField/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VTextField/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon to the outside the component's input, uses the same syntax as `v-icon`."
},
"VTextField/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VTextField/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VTextField/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VTextField/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VTextField/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTextField/counter": {
"type": "string | number | boolean\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VTextField/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VTextField/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VTextField/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VTextField/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VTextField/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VTextField/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VTextField/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VTextField/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VTextField/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VTextField/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VTextField/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VTextField/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VTextField/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VTextField/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VTextField/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VTextField/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VTextField/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VTextField/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VTextField/append-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VTextField/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VTextField/clear-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Applied when using **clearable** and the input is dirty."
},
"VTextField/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VTextField/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VTextField/prepend-inner-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Prepends an icon inside the component's input, uses the same syntax as `v-icon`."
},
"VTextField/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VTextField/counter-value": {
"type": "number | ((value: any) => number)\n",
"description": "Function returns the counter display text."
},
"VTextField/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VTextarea/flat": {
"type": "boolean\n",
"description": "Removes box shadow when using a variant with elevation."
},
"VTextarea/reverse": {
"type": "boolean\n",
"description": "Reverses the orientation."
},
"VTextarea/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VTextarea/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VTextarea/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VTextarea/autocomplete": {
"type": "string\n",
"description": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
},
"VTextarea/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the input."
},
"VTextarea/placeholder": {
"type": "string\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTextarea.json))"
},
"VTextarea/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTextarea/id": {
"type": "string\n",
"description": "Sets the DOM id on the component."
},
"VTextarea/prefix": {
"type": "string\n",
"description": "Displays prefix text."
},
"VTextarea/autofocus": {
"type": "boolean\n",
"description": "The element should be focused as soon as the page loads."
},
"VTextarea/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTextarea/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTextarea/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTextarea/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VTextarea/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTextarea/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTextarea/max-height": {
"type": "string | number\n",
"description": "Alternative for **max-rows**. Specifies the maximum height in pixels (including the field padding) for **auto-grow**."
},
"VTextarea/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTextarea/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTextarea/variant": {
"type": " | 'outlined'\n | 'plain'\n | 'filled'\n | 'underlined'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n",
"description": "Applies a distinct style to the component."
},
"VTextarea/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTextarea/base-color": {
"type": "string\n",
"description": "Sets the color of the input when it is not focused."
},
"VTextarea/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VTextarea/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VTextarea/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VTextarea/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VTextarea/loading": {
"type": "string | boolean\n",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color."
},
"VTextarea/messages": {
"type": "string | string[]\n",
"description": "Displays a list of messages or a single message if using a string."
},
"VTextarea/center-affix": {
"type": "boolean\n",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center."
},
"VTextarea/glow": {
"type": "boolean\n",
"description": "Makes prepend/append icons full opacity when the field is focused and apply color."
},
"VTextarea/icon-color": {
"type": "string | boolean\n",
"description": "Sets the color of the prepend/append icons."
},
"VTextarea/hide-spin-buttons": {
"type": "boolean\n",
"description": "Hides spin buttons on the input when type is set to `number`."
},
"VTextarea/hint": {
"type": "string\n",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property."
},
"VTextarea/indent-details": {
"type": "boolean\n",
"description": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls."
},
"VTextarea/persistent-hint": {
"type": "boolean\n",
"description": "Forces [hint](#props-hint) to always be visible."
},
"VTextarea/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VTextarea/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VTextarea/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VTextarea/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VTextarea/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VTextarea/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VTextarea/hide-details": {
"type": "boolean | 'auto'\n",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display."
},
"VTextarea/counter": {
"type": "string | number | true\n",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
},
"VTextarea/persistent-placeholder": {
"type": "boolean\n",
"description": "Forces placeholder to always be visible."
},
"VTextarea/persistent-counter": {
"type": "boolean\n",
"description": "Forces counter to always be visible."
},
"VTextarea/suffix": {
"type": "string\n",
"description": "Displays suffix text."
},
"VTextarea/append-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot."
},
"VTextarea/clearable": {
"type": "boolean\n",
"description": "Allows for the component to be cleared."
},
"VTextarea/clear-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "The icon used when the **clearable** prop is set to true."
},
"VTextarea/dirty": {
"type": "boolean\n",
"description": "Manually apply the dirty state styling."
},
"VTextarea/persistent-clear": {
"type": "boolean\n",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)."
},
"VTextarea/prepend-inner-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot."
},
"VTextarea/single-line": {
"type": "boolean\n",
"description": "Label does not move on focus/dirty."
},
"VTextarea/counter-value": {
"type": "(value: any) => number\n",
"description": "Display the input length but do not provide any validation."
},
"VTextarea/model-modifiers": {
"type": "unknown\n",
"description": "**FOR INTERNAL USE ONLY**"
},
"VTextarea/auto-grow": {
"type": "boolean\n",
"description": "Automatically grow the textarea depending on amount of text."
},
"VTextarea/no-resize": {
"type": "boolean\n",
"description": "Remove resize handle."
},
"VTextarea/rows": {
"type": "string | number\n",
"description": "Default row count."
},
"VTextarea/max-rows": {
"type": "string | number\n",
"description": "Specifies the maximum number of rows for **auto-grow**."
},
"VThemeProvider/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VThemeProvider/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VThemeProvider/with-background": {
"type": "boolean\n",
"description": "Wraps its children in an element and applies the current theme's background color to it."
},
"VTimePicker/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VTimePicker/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VTimePicker/model-value": {
"type": "any\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTimePicker/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTimePicker/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTimePicker/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTimePicker/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTimePicker/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTimePicker/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTimePicker/width": {
"type": "string | number\n",
"description": "Width of the picker."
},
"VTimePicker/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VTimePicker/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VTimePicker/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string."
},
"VTimePicker/position": {
"type": "'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'\n",
"description": "Sets the position for the component."
},
"VTimePicker/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VTimePicker/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTimePicker/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTimePicker/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTimePicker/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTimePicker/variant": {
"type": "'input' | 'dial'\n",
"description": "Applies a distinct style to the component."
},
"VTimePicker/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTimePicker/max": {
"type": "string\n",
"description": "Maximum allowed time."
},
"VTimePicker/min": {
"type": "string\n",
"description": "Minimum allowed time."
},
"VTimePicker/readonly": {
"type": "boolean\n",
"description": "Puts picker in readonly state."
},
"VTimePicker/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTimePicker/divided": {
"type": "boolean\n",
"description": "Adds a divider between the header and controls."
},
"VTimePicker/hide-header": {
"type": "boolean\n",
"description": "Hide the picker header."
},
"VTimePicker/hide-title": {
"type": "boolean\n",
"description": "Hide the picker title."
},
"VTimePicker/scrollable": {
"type": "boolean\n",
"description": "Allows changing hour/minute with mouse scroll."
},
"VTimePicker/view-mode": {
"type": "'hour' | 'minute' | 'second'\n",
"description": "The current view mode of the picker.`"
},
"VTimePicker/format": {
"type": "'ampm' | '24hr'\n",
"description": "Defines the format of a time displayed in picker. Available options are `ampm` and `24hr`."
},
"VTimePicker/period": {
"type": "'am' | 'pm'\n",
"description": "Sets period for 12hr format."
},
"VTimePicker/use-seconds": {
"type": "boolean\n",
"description": "Toggles the use of seconds in picker."
},
"VTimePicker/allowed-hours": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which hours can be selected."
},
"VTimePicker/allowed-minutes": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which minutes can be selected."
},
"VTimePicker/allowed-seconds": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which seconds can be selected."
},
"VTimePickerClock/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTimePickerClock/max": {
"type": "number\n",
"description": "Defines the maximum time value that can be selected."
},
"VTimePickerClock/min": {
"type": "number\n",
"description": "Defines the minimum time value that can be selected."
},
"VTimePickerClock/step": {
"type": "number\n",
"description": "Defines the increments between selectable times, such as a step of 1 for every minute or a larger step for every 5 or 15 minutes."
},
"VTimePickerClock/model-value": {
"type": "number\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTimePickerClock/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTimePickerClock/scrollable": {
"type": "boolean\n",
"description": "Allows the time selection to be scrollable, enhancing user experience for devices with scroll inputs."
},
"VTimePickerClock/readonly": {
"type": "boolean\n",
"description": "When true, the picker is in a read-only state, and users cannot modify the selected time."
},
"VTimePickerClock/ampm": {
"type": "boolean\n",
"description": "Displays time in a 12-hour format."
},
"VTimePickerClock/format": {
"type": "Function\n",
"description": "Specifies the format of the displayed time, either 12-hour or 24-hour, depending on the component's setup."
},
"VTimePickerClock/double": {
"type": "boolean\n",
"description": "If set, this probably indicates a double rotation or a mode where more than one set of values (like hours and minutes) is displayed on the clock at the same time."
},
"VTimePickerClock/rotate": {
"type": "number\n",
"description": "Controls rotation, specifying the degree of rotation for the clock hands."
},
"VTimePickerClock/displayed-value": {
"type": "any\n",
"description": "Used to display a custom value on the clock."
},
"VTimePickerClock/allowed-values": {
"type": "(value: number) => boolean\n",
"description": "Restricts which hours can be selected."
},
"VTimePickerControls/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTimePickerControls/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTimePickerControls/max": {
"type": "string\n",
"description": "Maximum allowed time."
},
"VTimePickerControls/min": {
"type": "string\n",
"description": "Minimum allowed time."
},
"VTimePickerControls/value": {
"type": "number\n",
"description": "The current value of the timepicker."
},
"VTimePickerControls/readonly": {
"type": "boolean\n",
"description": "Makes the timepicker readonly."
},
"VTimePickerControls/view-mode": {
"type": "'hour' | 'minute' | 'second'\n",
"description": "The current view mode of the timepicker. Can be either `hour`, `minute`, or `second`."
},
"VTimePickerControls/ampm": {
"type": "boolean\n",
"description": "Enables AM/PM mode."
},
"VTimePickerControls/hour": {
"type": "string | number\n",
"description": "The current hour value."
},
"VTimePickerControls/minute": {
"type": "string | number\n",
"description": "The current minute value."
},
"VTimePickerControls/second": {
"type": "string | number\n",
"description": "The current second value."
},
"VTimePickerControls/period": {
"type": "'am' | 'pm'\n",
"description": "The current period value. either `am` or `pm`."
},
"VTimePickerControls/use-seconds": {
"type": "boolean\n",
"description": "Enables the display and selection of seconds in the timepicker."
},
"VTimePickerControls/allowed-hours": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which hours can be selected. Can be an array of allowed hours, a function that returns true for allowed hours, or an object with `min` and `max` properties."
},
"VTimePickerControls/allowed-minutes": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which minutes can be selected. Can be an array of allowed minutes, a function that returns true for allowed minutes, or an object with `min` and `max` properties."
},
"VTimePickerControls/allowed-seconds": {
"type": "number[] | ((val: number) => boolean)\n",
"description": "Restricts which seconds can be selected. Can be an array of allowed seconds, a function that returns true for allowed seconds, or an object with `min` and `max` properties."
},
"VTimePickerControls/input-hints": {
"type": "boolean\n",
"description": "Displays labels below the time input controls."
},
"VTimeline/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTimeline/align": {
"type": "'start' | 'center'\n",
"description": "Places the timeline dot at the top or center of the timeline item."
},
"VTimeline/size": {
"type": "string | number\n",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
},
"VTimeline/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTimeline/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTimeline/direction": {
"type": "'vertical' | 'horizontal'\n",
"description": "Display timeline in a **vertical** or **horizontal** direction."
},
"VTimeline/icon-color": {
"type": "string\n",
"description": "Color of the icon."
},
"VTimeline/justify": {
"type": "'center' | 'auto'\n",
"description": "Places timeline line at the center or automatically on the left or right side."
},
"VTimeline/line-thickness": {
"type": "string | number\n",
"description": "Thickness of the timeline line."
},
"VTimeline/line-color": {
"type": "string\n",
"description": "Color of the timeline line."
},
"VTimeline/dot-color": {
"type": "string\n",
"description": "Color of the item dot."
},
"VTimeline/fill-dot": {
"type": "boolean\n",
"description": "Remove outer border of item dot, making the color fill the entire dot."
},
"VTimeline/hide-opposite": {
"type": "boolean\n",
"description": "Hide opposite content if it exists."
},
"VTimeline/line-inset": {
"type": "string | number\n",
"description": "Specifies the distance between the line and the dot of timeline items."
},
"VTimeline/side": {
"type": "'start' | 'end'\n",
"description": "Display all timeline items on one side of the timeline, either **start** or **end**."
},
"VTimeline/truncate-line": {
"type": "'start' | 'end' | 'both'\n",
"description": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends."
},
"VTimelineItem/icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Apply a specific icon to the inside dot using the [v-icon](/components/icons/) component."
},
"VTimelineItem/density": {
"type": "'default' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTimelineItem/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTimelineItem/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTimelineItem/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTimelineItem/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTimelineItem/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTimelineItem/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTimelineItem/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VTimelineItem/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VTimelineItem/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VTimelineItem/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTimelineItem/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTimelineItem/size": {
"type": "string | number\n",
"description": "Size of the item dot"
},
"VTimelineItem/icon-color": {
"type": "string\n",
"description": "Color of the icon."
},
"VTimelineItem/side": {
"type": "'end' | 'start'\n",
"description": "Show the item either **before** or **after** the timeline. This will override the implicit ordering of items, but will in turn be overridden by the `v-timeline` **single-side** prop."
},
"VTimelineItem/dot-color": {
"type": "string\n",
"description": "Color of the item dot."
},
"VTimelineItem/fill-dot": {
"type": "boolean\n",
"description": "Remove outer border of item dot, making the color fill the entire dot."
},
"VTimelineItem/hide-dot": {
"type": "boolean\n",
"description": "Hide the timeline item dot."
},
"VTimelineItem/hide-opposite": {
"type": "boolean\n",
"description": "Hide opposite content if it exists."
},
"VTimelineItem/line-inset": {
"type": "string | number\n",
"description": "Specifies the distance between the line and the dot of the item."
},
"VToolbar/flat": {
"type": "boolean\n",
"description": "Removes the toolbar's box-shadow."
},
"VToolbar/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VToolbar/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VToolbar/height": {
"type": "string | number\n",
"description": "Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. **prominent**, **dense**, **extended**, etc."
},
"VToolbar/image": {
"type": "string\n",
"description": "Specifies a [v-img](/components/images) as the component's background."
},
"VToolbar/collapse": {
"type": "boolean\n",
"description": "Puts the toolbar into a collapsed state reducing its maximum width."
},
"VToolbar/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the component's location. Can combine by using a space separated string. Requires the **absolute** prop."
},
"VToolbar/absolute": {
"type": "boolean\n",
"description": "Applies position: absolute to the component."
},
"VToolbar/collapse-position": {
"type": "'start' | 'end'\n",
"description": "Specifies side to attach the collapsed toolbar."
},
"VToolbar/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VToolbar/density": {
"type": "'default' | 'prominent' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VToolbar/extended": {
"type": "boolean\n",
"description": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop. When false, will not show extension slot even if content is present."
},
"VToolbar/extension-height": {
"type": "string | number\n",
"description": "Specify an explicit height for the `extension` slot."
},
"VToolbar/floating": {
"type": "boolean\n",
"description": "Applies **display: inline-flex** to the component."
},
"VToolbar/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VToolbar/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VToolbar/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VToolbar/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VToolbar/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VToolbar/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VToolbarItems/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VToolbarItems/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VToolbarTitle/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VToolbarTitle/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VTooltip/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTooltip/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTooltip/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTooltip/id": {
"type": "string\n",
"description": "HTML id attribute of the tooltip overlay. If not set, a globally unique id will be used."
},
"VTooltip/model-value": {
"type": "boolean\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VTooltip/location": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.."
},
"VTooltip/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTooltip/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTooltip/text": {
"type": "string\n",
"description": "Specify content text for the component."
},
"VTooltip/transition": {
"type": "string | boolean | (TransitionProps & { component: Component })\n",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VTooltip/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTooltip/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTooltip/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTooltip/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTooltip/activator": {
"type": "Element | (string & {}) | 'parent' | ComponentPublicInstance\n",
"description": "Explicitly sets the overlay's activator."
},
"VTooltip/close-on-back": {
"type": "boolean\n",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing."
},
"VTooltip/contained": {
"type": "boolean\n",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)."
},
"VTooltip/content-class": {
"type": "any\n",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
},
"VTooltip/content-props": {
"type": "any\n",
"description": "Apply custom properties to the content."
},
"VTooltip/opacity": {
"type": "string | number\n",
"description": "Sets the opacity of the scrim element. Only applies if `scrim` is enabled."
},
"VTooltip/no-click-animation": {
"type": "boolean\n",
"description": "Disables the bounce effect when clicking outside of the content element when using the persistent prop."
},
"VTooltip/persistent": {
"type": "boolean\n",
"description": "Clicking outside of the element or pressing esc key will not deactivate it."
},
"VTooltip/scrim": {
"type": "string | boolean\n",
"description": "Accepts true/false to enable background, and string to define color."
},
"VTooltip/z-index": {
"type": "string | number\n",
"description": "The z-index used for the component."
},
"VTooltip/target": {
"type": " | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default."
},
"VTooltip/activator-props": {
"type": "unknown\n",
"description": "Apply custom properties to the activator."
},
"VTooltip/open-on-click": {
"type": "boolean\n",
"description": "Designates whether the tooltip should open on activator click."
},
"VTooltip/open-on-hover": {
"type": "boolean\n",
"description": "Designates whether the tooltip should open on activator hover."
},
"VTooltip/open-on-focus": {
"type": "boolean\n",
"description": "Activate the component when the activator is focused."
},
"VTooltip/close-on-content-click": {
"type": "boolean\n",
"description": "Closes component when you click on its content."
},
"VTooltip/close-delay": {
"type": "string | number\n",
"description": "Delay (in ms) after which menu closes (when open-on-hover prop is set to true)."
},
"VTooltip/open-delay": {
"type": "string | number\n",
"description": "Delay (in ms) after which tooltip opens (when `open-on-hover` prop is set to **true**)."
},
"VTooltip/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VTooltip/location-strategy": {
"type": "'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n",
"description": "Sets how the overlay content is positioned. Defaults to `static`, which centers content in its container. Use `connected` to attach to an activator element, or `viewport` to position relative to the browser viewport."
},
"VTooltip/origin": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n",
"description": "Sets the anchor point on the overlay content that aligns to the `location` anchor on the target. `auto` uses the opposing side of `location`; `overlap` uses the same anchor, causing the overlay to cover the target. Also sets the CSS `transform-origin` for enter/leave transitions."
},
"VTooltip/offset": {
"type": "string | number | number[]\n",
"description": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target."
},
"VTooltip/stick-to-target": {
"type": "boolean\n",
"description": "Enables the overlay content to go off-screen when scrolling."
},
"VTooltip/viewport-margin": {
"type": "string | number\n",
"description": "Sets custom viewport margin for the overlay content"
},
"VTooltip/scroll-strategy": {
"type": "'close' | 'none' | 'block' | 'reposition' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n",
"description": "Strategy used when the component is activate and user scrolls."
},
"VTooltip/attach": {
"type": "string | boolean | Element\n",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default."
},
"VTooltip/interactive": {
"type": "boolean\n",
"description": "When true, the tooltip will respond to pointer events, allowing you to copy text from it."
},
"VTreeview/search": {
"type": "string\n",
"description": "The search model for filtering results."
},
"VTreeview/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VTreeview/model-value": {
"type": "unknown\n",
"description": "Allows one to control which nodes are selected. The array contains the values of currently selected items. It is equivalent to the `v-model:selected`"
},
"VTreeview/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTreeview/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTreeview/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTreeview/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTreeview/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTreeview/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTreeview/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTreeview/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VTreeview/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VTreeview/rounded": {
"type": "string | number | boolean\n",
"description": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `shaped` prop."
},
"VTreeview/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTreeview/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTreeview/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTreeview/color": {
"type": "string\n",
"description": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTreeview/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VTreeview/activated": {
"type": "unknown\n",
"description": "Array of ids of activated nodes."
},
"VTreeview/disabled": {
"type": "boolean\n",
"description": "Disables selection for all nodes."
},
"VTreeview/items": {
"type": "unknown[]\n",
"description": "An array of items used to build the treeview."
},
"VTreeview/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VTreeview/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VTreeview/slim": {
"type": "boolean\n",
"description": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation."
},
"VTreeview/filter-mode": {
"type": "'every' | 'some' | 'union' | 'intersection'\n",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters."
},
"VTreeview/no-filter": {
"type": "boolean\n",
"description": "Disables all item filtering."
},
"VTreeview/custom-filter": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.tsx#L22-L22\" target=\"_blank\">FilterFunction</a>\n",
"description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted."
},
"VTreeview/custom-key-filter": {
"type": "unknown\n",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified."
},
"VTreeview/filter-keys": {
"type": "string | string[]\n",
"description": "Array of specific keys to filter on the item."
},
"VTreeview/hide-no-data": {
"type": "boolean\n",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open."
},
"VTreeview/active-class": {
"type": "string\n",
"description": "The class applied to the component when it is in an active state."
},
"VTreeview/bg-color": {
"type": "string\n",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTreeview/filterable": {
"type": "boolean\n",
"description": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox."
},
"VTreeview/expand-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used to indicate that a node can be expanded."
},
"VTreeview/collapse-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon to display when the list item is expanded."
},
"VTreeview/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers."
},
"VTreeview/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children."
},
"VTreeview/indent": {
"type": "string | number\n",
"description": "Overrides the indent size for nested groups."
},
"VTreeview/navigation-strategy": {
"type": "'focus' | 'track'\n",
"description": "Determines keyboard navigation behavior. **focus** (default) moves DOM focus to items, suitable for traditional lists. **track** provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex=\"-1\"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling."
},
"VTreeview/navigation-index": {
"type": "number\n",
"description": "Specifies the currently selected navigation index when using `navigationStrategy=\"track\"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items."
},
"VTreeview/activatable": {
"type": "boolean\n",
"description": "Allows user to mark a node as active by clicking on it."
},
"VTreeview/selectable": {
"type": "boolean\n",
"description": "Will render a checkbox next to each node allowing them to be selected. Additionally, the **[openOnClick](/api/v-treeview/#props-open-on-click)** property will be applied internally."
},
"VTreeview/opened": {
"type": "unknown\n",
"description": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`."
},
"VTreeview/selected": {
"type": "unknown\n",
"description": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`."
},
"VTreeview/mandatory": {
"type": "boolean\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VTreeview/items-registration": {
"type": "'props' | 'render'\n",
"description": "When set to 'props', skips rendering collapsed items/nodes (for significant performance gains)."
},
"VTreeview/active-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/activeStrategies.ts#L27-L31\" target=\"_blank\">ActiveStrategy</a>\n | ((mandatory: boolean) => <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/activeStrategies.ts#L27-L31\" target=\"_blank\">ActiveStrategy</a>)\n",
"description": "Affects how items with children behave when activated. If not specified, the **single-independent** strategy will be used.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **single-leaf:** Similar as **leaf**, but only a single item can be activated at a time.\n- **independent:** All nodes can be activated whether they have children or not.\n- **single-independent:** Similar as **independent**, but only a single item can be activated at a time."
},
"VTreeview/select-strategy": {
"type": " | 'single-leaf'\n | 'leaf'\n | 'independent'\n | 'single-independent'\n | 'classic'\n | 'trunk'\n | 'branch'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L28-L32\" target=\"_blank\">SelectStrategy</a>\n | ((mandatory: boolean) => <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L28-L32\" target=\"_blank\">SelectStrategy</a>)\n",
"description": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model.\n- **branch**: Same as classic but if any of a node's children are selected then that node will also be added to the model."
},
"VTreeview/item-title": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its title."
},
"VTreeview/item-value": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its value."
},
"VTreeview/item-children": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Property on supplied `items` that contains its children."
},
"VTreeview/item-props": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component."
},
"VTreeview/item-type": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Designates the key on the supplied items that is used for determining the nodes type."
},
"VTreeview/return-object": {
"type": "boolean\n",
"description": "When `true` will make `v-model`, `v-model:selected, `v-model:activated` and `v-model:opened` return the complete object instead of just the key."
},
"VTreeview/value-comparator": {
"type": "(a: any, b: any) => boolean\n",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop."
},
"VTreeview/open-on-click": {
"type": "boolean\n",
"description": "When `true` will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with `activatable` you will be unable to mark nodes with children as active."
},
"VTreeview/no-data-text": {
"type": "string\n",
"description": "Text shown when no items are provided to the component."
},
"VTreeview/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon and loading indicator next to each item title."
},
"VTreeview/fluid": {
"type": "boolean\n",
"description": "Removes indentation from nested items."
},
"VTreeview/open-all": {
"type": "boolean\n",
"description": "When `true` will cause all branch nodes to be opened when component is mounted."
},
"VTreeview/false-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when inactive."
},
"VTreeview/true-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "The icon used when active."
},
"VTreeview/indeterminate-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Icon used when node is in an indeterminate state. Only visible when `selectable` is `true`."
},
"VTreeview/indent-lines-color": {
"type": "string\n",
"description": "Sets color of indent lines"
},
"VTreeview/indent-lines-opacity": {
"type": "string | number\n",
"description": "Sets opacity of indent lines"
},
"VTreeview/loading-icon": {
"type": "string\n",
"description": "Icon used when node is in a loading state."
},
"VTreeview/selected-color": {
"type": "string\n",
"description": "The color of the selection checkbox."
},
"VTreeview/separate-roots": {
"type": "boolean\n",
"description": "Applies to `default` variant of `indent-lines`. Prevents showing lines between root-level nodes."
},
"VTreeview/indent-lines": {
"type": "boolean | 'default' | 'simple'\n",
"description": "Controls visibility and variant of the indent lines."
},
"VTreeview/load-children": {
"type": "(item: unknown) => Promise<void>\n",
"description": "A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a `item-children` property that is an empty array. Supports returning a Promise."
},
"VTreeviewGroup/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTreeviewGroup/title": {
"type": "string\n",
"description": "Specify a title text for the component."
},
"VTreeviewGroup/disabled": {
"type": "boolean\n",
"description": "Puts all children inputs into a disabled state."
},
"VTreeviewGroup/value": {
"type": "any\n",
"description": "Expands / Collapse the list-group."
},
"VTreeviewGroup/color": {
"type": "string\n",
"description": "Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)."
},
"VTreeviewGroup/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VTreeviewGroup/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VTreeviewGroup/prepend-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`."
},
"VTreeviewGroup/append-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VTreeviewGroup/expand-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon to display when the list item is collapsed."
},
"VTreeviewGroup/collapse-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon to display when the list item is expanded."
},
"VTreeviewGroup/raw-id": {
"type": "string | number\n",
"description": "Defines the root element's id attribute in the component. If it is provided, the id attribute will be dynamically generated in the format: \"v-list-group--id-[rawId]\"."
},
"VTreeviewGroup/fluid": {
"type": "boolean\n",
"description": "Removes indentation from nested items."
},
"VTreeviewItem/title": {
"type": "string | number | boolean\n",
"description": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead."
},
"VTreeviewItem/replace": {
"type": "boolean\n",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation."
},
"VTreeviewItem/link": {
"type": "boolean\n",
"description": "Designates that the component is a link. This is automatic when using the href or to prop."
},
"VTreeviewItem/border": {
"type": "string | number | boolean\n",
"description": "Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border=\"sm\"`). Find a list of the built-in border classes on the [borders page](/styles/borders)."
},
"VTreeviewItem/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VTreeviewItem/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VTreeviewItem/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VTreeviewItem/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VTreeviewItem/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VTreeviewItem/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VTreeviewItem/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VTreeviewItem/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VTreeviewItem/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VTreeviewItem/rounded": {
"type": "string | number | boolean\n",
"description": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)."
},
"VTreeviewItem/tile": {
"type": "boolean\n",
"description": "Removes any applied **border-radius** from the component."
},
"VTreeviewItem/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VTreeviewItem/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VTreeviewItem/color": {
"type": "string\n",
"description": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),"
},
"VTreeviewItem/variant": {
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n",
"description": "Applies a distinct style to the component."
},
"VTreeviewItem/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VTreeviewItem/value": {
"type": "any\n",
"description": "The value used for selection. Obtained from [`v-list`](/api/v-list)'s `v-model:selected` when the item is selected."
},
"VTreeviewItem/active": {
"type": "boolean\n",
"description": "Controls the **active** state of the item. This is typically used to highlight the component."
},
"VTreeviewItem/active-color": {
"type": "string\n",
"description": "Deprecated, use `color` instead."
},
"VTreeviewItem/base-color": {
"type": "string\n",
"description": "Sets the color of component when not focused."
},
"VTreeviewItem/prepend-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content."
},
"VTreeviewItem/append-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot."
},
"VTreeviewItem/slim": {
"type": "boolean\n",
"description": "Reduces the vertical padding or height of the v-treeview-item, making it more compact."
},
"VTreeviewItem/ripple": {
"type": "boolean | { class: string; keys: string[] }\n",
"description": "Applies the [v-ripple](/directives/ripple) directive."
},
"VTreeviewItem/loading": {
"type": "boolean\n",
"description": "Places the v-treeview-item into a loading state."
},
"VTreeviewItem/href": {
"type": "string\n",
"description": "Designates the component as anchor and applies the **href** attribute."
},
"VTreeviewItem/exact": {
"type": "boolean\n",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
},
"VTreeviewItem/to": {
"type": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric\n",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
},
"VTreeviewItem/subtitle": {
"type": "string | number | boolean\n",
"description": "Specify a subtitle text for the component."
},
"VTreeviewItem/active-class": {
"type": "string\n",
"description": "The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation."
},
"VTreeviewItem/lines": {
"type": "false | 'one' | 'two' | 'three'\n",
"description": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop."
},
"VTreeviewItem/prepend-gap": {
"type": "string | number\n",
"description": "Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children."
},
"VTreeviewItem/nav": {
"type": "boolean\n",
"description": "Reduces the width of v-list-item takes and adds a border radius."
},
"VTreeviewItem/hide-actions": {
"type": "boolean\n",
"description": "Hide the expand icon and loading indicator next to each item title."
},
"VTreeviewItem/index": {
"type": "number\n",
"description": "The index of the item within the treeview list."
},
"VTreeviewItem/prepend-avatar": {
"type": "string\n",
"description": "Prepends a [v-avatar](/components/avatars/) component in the **prepend** slot before default content."
},
"VTreeviewItem/append-avatar": {
"type": "string\n",
"description": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot."
},
"VTreeviewItem/tabindex": {
"type": "string | number\n",
"description": "Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy=\"track\"` to prevent Tab key navigation into items."
},
"VTreeviewItem/has-custom-prepend": {
"type": "boolean\n",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTreeviewItem.json))"
},
"VTreeviewItem/toggle-icon": {
"type": " | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent\n",
"description": "Allows customization of the icon used to toggle the expansion and collapse of treeview branches."
},
"VTreeviewItem/indent-lines": {
"type": "('leaf' | 'none' | 'line' | 'last-leaf' | 'leaf-link')[]\n",
"description": "Array of indent lines to render next to the item."
},
"VValidation/name": {
"type": "string\n",
"description": "Sets the component's name attribute."
},
"VValidation/error": {
"type": "boolean\n",
"description": "Puts the input in a manual error state."
},
"VValidation/label": {
"type": "string\n",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component."
},
"VValidation/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VValidation/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VValidation/readonly": {
"type": "boolean\n",
"description": "Puts input in readonly state."
},
"VValidation/error-messages": {
"type": "string | string[]\n",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation."
},
"VValidation/max-errors": {
"type": "string | number\n",
"description": "Control the maximum number of shown errors from validation."
},
"VValidation/rules": {
"type": "(\n | string\n | boolean\n | PromiseLike<ValidationResult>\n | ((value: any) => string | false | true)\n | ((value: any) => PromiseLike<ValidationResult>)\n | [string, any, string]\n)[]\n",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`."
},
"VValidation/validate-on": {
"type": " | 'eager'\n | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n",
"description": "Change what type of event triggers validation to run."
},
"VValidation/validation-value": {
"type": "any\n",
"description": "The value used when applying validation rules."
},
"VValidation/focused": {
"type": "boolean\n",
"description": "Forces a focused state styling on the component."
},
"VVideo/type": {
"type": "string\n",
"description": "Media file type (optional)"
},
"VVideo/error": {
"type": "boolean | MediaError\n",
"description": "Puts the component in the manual error state."
},
"VVideo/playing": {
"type": "boolean\n",
"description": "Applies correct icon of the default play button."
},
"VVideo/progress": {
"type": "number\n",
"description": "Controls main slider value (0 ~ 100)"
},
"VVideo/height": {
"type": "string | number\n",
"description": "Sets the height for the component."
},
"VVideo/src": {
"type": "string\n",
"description": "Media file URL"
},
"VVideo/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VVideo/image": {
"type": "string\n",
"description": "Apply a specific image as cover before the video is loaded."
},
"VVideo/color": {
"type": "string\n",
"description": "General color applied to icons and sliders."
},
"VVideo/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VVideo/floating": {
"type": "boolean\n",
"description": "Introduces visual spacing from the video boundaries."
},
"VVideo/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VVideo/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VVideo/rounded": {
"type": "string | number | boolean | (string | number | false | true)[]\n",
"description": "Applies a border radius to the video container and the controls. Accepts array of two values to customize elements separately."
},
"VVideo/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VVideo/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VVideo/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VVideo/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VVideo/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VVideo/variant": {
"type": "'background' | 'player'\n",
"description": "Applies a distinct style to the component."
},
"VVideo/eager": {
"type": "boolean\n",
"description": "Silently loades the media file without waiting for user to click."
},
"VVideo/aspect-ratio": {
"type": "string | number\n",
"description": "Sets the aspect ratio for the playback, calculated as width/height."
},
"VVideo/autoplay": {
"type": "boolean\n",
"description": "Starts loading the media file without waiting for user to click. Playback begins once enough data is loaded."
},
"VVideo/muted": {
"type": "boolean\n",
"description": "Hides volume control and disables the playback sound."
},
"VVideo/hide-overlay": {
"type": "boolean\n",
"description": "Hide center play icon."
},
"VVideo/no-fullscreen": {
"type": "boolean\n",
"description": "Disable fullscreen and hide the default fullscreen button."
},
"VVideo/start-at": {
"type": "string | number\n",
"description": "Moves progress to the specified time (in seconds) once the media file is loaded."
},
"VVideo/controls-transition": {
"type": "string | boolean | (TransitionProps & { component: any })\n",
"description": "The reveal transition applied to the VVideoControls component once the media file is loaded."
},
"VVideo/controls-variant": {
"type": "'default' | 'hidden' | 'tube' | 'mini'\n",
"description": "Variant passed to the VVideoControls component."
},
"VVideo/controls-props": {
"type": "unknown\n",
"description": "Pass props through to the `v-video-controls` component. Accepts an object with anything from [v-video-controls](/api/v-video-controls/#props) props, camelCase keys are recommended."
},
"VVideo/background-color": {
"type": "string\n",
"description": "Container background color."
},
"VVideo/track-color": {
"type": "string\n",
"description": "Passed to the main slider `color` prop."
},
"VVideo/hide-play": {
"type": "boolean\n",
"description": "Hides default play button."
},
"VVideo/hide-volume": {
"type": "boolean\n",
"description": "Hides default volume control."
},
"VVideo/hide-fullscreen": {
"type": "boolean\n",
"description": "Hides default fullscreen button."
},
"VVideo/hide-progress-bar": {
"type": "boolean\n",
"description": "Hides default progress bar."
},
"VVideo/split-time": {
"type": "boolean\n",
"description": "Splits time into elapsed and remaining on each side of the main slider."
},
"VVideo/pills": {
"type": "boolean\n",
"description": "Makes the container transparent and shows inner actions in separated boxes."
},
"VVideo/detached": {
"type": "boolean\n",
"description": "Moves the container below so it won't obstruct the video."
},
"VVideo/duration": {
"type": "number\n",
"description": "Total duration of the video used to calculate displayed time."
},
"VVideo/volume": {
"type": "string | number\n",
"description": "Volume value passed to the underlying control and slots."
},
"VVideo/volume-props": {
"type": "{\n inline: boolean\n direction: 'vertical' | 'horizontal'\n menuProps: {\n style: StyleValue\n disabled: boolean\n modelValue: boolean\n location: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n transition:\n | string\n | boolean\n | (TransitionProps & { component: Component })\n | {\n component: ComponentPublicInstanceConstructor<\n CreateComponentPublicInstanceWithMixins<\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n PublicProps,\n {},\n true,\n {},\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n {},\n any,\n ComponentProvideOptions,\n OptionTypesType<{}, {}, {}, {}, {}, {}>,\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n {},\n {},\n {},\n {}\n >,\n any,\n any,\n any,\n ComputedOptions,\n MethodOptions\n > &\n ComponentOptionsBase<\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n string,\n {},\n {},\n string,\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n ComponentProvideOptions\n > &\n VNodeProps &\n AllowedComponentProps &\n ComponentCustomProps & {\n filterProps: (props: T) => Partial<Pick<T, U>>\n }\n }\n closeOnBack: boolean\n contained: boolean\n noClickAnimation: boolean\n persistent: boolean\n scrim: string | boolean\n zIndex: string | number\n activatorProps: Record<string, any>\n openOnClick: boolean\n openOnHover: boolean\n openOnFocus: boolean\n closeOnContentClick: boolean\n closeDelay: string | number\n openDelay: string | number\n eager: boolean\n locationStrategy: 'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n origin: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n stickToTarget: boolean\n viewportMargin: string | number\n scrollStrategy:\n | 'close'\n | 'none'\n | 'block'\n | 'reposition'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n retainFocus: boolean\n captureFocus: boolean\n disableInitialFocus: boolean\n submenu: boolean\n } & {\n class: any\n $children:\n | VNodeChild\n | { $stable: boolean }\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n | {\n default: (arg: { isActive: Ref<boolean, boolean> }) => VNodeChild\n activator: (arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild\n }\n 'v-slots': {\n default:\n | false\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n activator:\n | false\n | ((arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild)\n }\n 'v-slot:default':\n | false\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n key: PropertyKey\n ref: VNodeRef\n ref_for: boolean\n ref_key: string\n onVnodeBeforeMount: VNodeMountHook | VNodeMountHook[]\n onVnodeMounted: VNodeMountHook | VNodeMountHook[]\n onVnodeBeforeUpdate: VNodeUpdateHook | VNodeUpdateHook[]\n onVnodeUpdated: VNodeUpdateHook | VNodeUpdateHook[]\n onVnodeBeforeUnmount: VNodeMountHook | VNodeMountHook[]\n onVnodeUnmounted: VNodeMountHook | VNodeMountHook[]\n height: string | number\n width: string | number\n id: string\n theme: string\n 'onUpdate:modelValue': (args: [boolean]) => any\n maxHeight: string | number\n maxWidth: string | number\n minHeight: string | number\n minWidth: string | number\n activator: Element | (string & {}) | 'parent' | ComponentPublicInstance\n contentClass: any\n contentProps: any\n opacity: string | number\n target:\n | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n offset: string | number | number[]\n attach: string | boolean | Element\n 'v-slot:activator':\n | false\n | ((arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild)\n }\n sliderProps: {\n disabled: boolean\n width: string | number\n color: string\n maxWidth: string | number\n trackColor: string\n thumbSize: string | number\n }\n}\n",
"description": "Props passed down to the VVideoVolume component."
},
"VVideo/src-object": {
"type": "Blob | MediaStream | MediaSource\n",
"description": "Sets the source of the video to a MediaStream, MediaSource, or Blob object. Useful for WebRTC streaming."
},
"VVideoControls/density": {
"type": "'default' | 'comfortable' | 'compact'\n",
"description": "Adjusts the vertical height used by the component."
},
"VVideoControls/elevation": {
"type": "string | number\n",
"description": "Designates an elevation applied to the component between 0 and 5. You can find more information on the [elevation page](/styles/elevation)."
},
"VVideoControls/hover-elevation": {
"type": "string | number\n",
"description": "Elevation level applied to the component upon hover (adds class with CSS `:hover` selector)"
},
"VVideoControls/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VVideoControls/color": {
"type": "string\n",
"description": "General color applied to icons and sliders."
},
"VVideoControls/variant": {
"type": "'default' | 'hidden' | 'tube' | 'mini'\n",
"description": "Applies a distinct style to the component."
},
"VVideoControls/playing": {
"type": "boolean\n",
"description": "Applies correct icon of the default play button."
},
"VVideoControls/progress": {
"type": "number\n",
"description": "Controls main slider value (0 ~ 100)"
},
"VVideoControls/floating": {
"type": "boolean\n",
"description": "Introduces visual spacing from the video boundaries."
},
"VVideoControls/fullscreen": {
"type": "boolean\n",
"description": "Applies correct icon on the default fullscreen button."
},
"VVideoControls/track-color": {
"type": "string\n",
"description": "Passed to the main slider `color` prop."
},
"VVideoControls/background-color": {
"type": "string\n",
"description": "Container background color."
},
"VVideoControls/hide-play": {
"type": "boolean\n",
"description": "Hides default play button."
},
"VVideoControls/hide-volume": {
"type": "boolean\n",
"description": "Hides default volume control."
},
"VVideoControls/hide-fullscreen": {
"type": "boolean\n",
"description": "Hides default fullscreen button."
},
"VVideoControls/hide-progress-bar": {
"type": "boolean\n",
"description": "Hides default progress bar."
},
"VVideoControls/split-time": {
"type": "boolean\n",
"description": "Splits time into elapsed and remaining on each side of the main slider."
},
"VVideoControls/pills": {
"type": "boolean\n",
"description": "Makes the container transparent and shows inner actions in separated boxes."
},
"VVideoControls/detached": {
"type": "boolean\n",
"description": "Moves the container below so it won't obstruct the video."
},
"VVideoControls/duration": {
"type": "number\n",
"description": "Total duration of the video used to calculate displayed time."
},
"VVideoControls/volume": {
"type": "string | number\n",
"description": "Volume value passed to the underlying control and slots."
},
"VVideoControls/volume-props": {
"type": "{\n menuProps: {\n modelValue: boolean\n style: StyleValue\n location: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n disabled: boolean\n eager: boolean\n submenu: boolean\n closeOnBack: boolean\n contained: boolean\n noClickAnimation: boolean\n persistent: boolean\n scrim: string | boolean\n zIndex: string | number\n activatorProps: Record<string, any>\n openOnClick: boolean\n openOnHover: boolean\n openOnFocus: boolean\n closeOnContentClick: boolean\n closeDelay: string | number\n openDelay: string | number\n locationStrategy: 'static' | 'connected' | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L38-L42\" target=\"_blank\">LocationStrategyFunction</a>\n origin: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a> | 'auto' | 'overlap'\n stickToTarget: boolean\n viewportMargin: string | number\n scrollStrategy:\n | 'close'\n | 'block'\n | 'none'\n | 'reposition'\n | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L18-L18\" target=\"_blank\">ScrollStrategyFunction</a>\n retainFocus: boolean\n captureFocus: boolean\n disableInitialFocus: boolean\n transition:\n | string\n | boolean\n | (TransitionProps & { component: Component })\n | {\n component: ComponentPublicInstanceConstructor<\n CreateComponentPublicInstanceWithMixins<\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n PublicProps,\n {},\n true,\n {},\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n {},\n any,\n ComponentProvideOptions,\n OptionTypesType<{}, {}, {}, {}, {}, {}>,\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n {},\n {},\n {},\n {}\n >,\n any,\n any,\n any,\n ComputedOptions,\n MethodOptions\n > &\n ComponentOptionsBase<\n {} & {\n target?: HTMLElement | [x: number, y: number] | undefined\n } & {\n $children?:\n | VNodeChild\n | { $stable?: boolean | undefined }\n | (() => VNodeChild)\n | { default?: (() => VNodeChild) | undefined }\n 'v-slots'?:\n | { default?: false | (() => VNodeChild) | undefined }\n | undefined\n } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },\n () => JSX.Element,\n unknown,\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n Record<string, any>,\n string,\n {},\n {},\n string,\n SlotsType<Partial<MakeSlots<{ default: never }>>>,\n GlobalComponents,\n GlobalDirectives,\n string,\n ComponentProvideOptions\n > &\n VNodeProps &\n AllowedComponentProps &\n ComponentCustomProps & {\n filterProps: (props: T) => Partial<Pick<T, U>>\n }\n }\n } & {\n class: any\n height: string | number\n maxHeight: string | number\n maxWidth: string | number\n minHeight: string | number\n minWidth: string | number\n width: string | number\n theme: string\n 'onUpdate:modelValue': (args: [boolean]) => any\n $children:\n | VNodeChild\n | { $stable: boolean }\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n | {\n default: (arg: { isActive: Ref<boolean, boolean> }) => VNodeChild\n activator: (arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild\n }\n 'v-slots': {\n default:\n | false\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n activator:\n | false\n | ((arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild)\n }\n 'v-slot:default':\n | false\n | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)\n key: PropertyKey\n ref: VNodeRef\n ref_for: boolean\n ref_key: string\n onVnodeBeforeMount: VNodeMountHook | VNodeMountHook[]\n onVnodeMounted: VNodeMountHook | VNodeMountHook[]\n onVnodeBeforeUpdate: VNodeUpdateHook | VNodeUpdateHook[]\n onVnodeUpdated: VNodeUpdateHook | VNodeUpdateHook[]\n onVnodeBeforeUnmount: VNodeMountHook | VNodeMountHook[]\n onVnodeUnmounted: VNodeMountHook | VNodeMountHook[]\n id: string\n activator: Element | (string & {}) | 'parent' | ComponentPublicInstance\n contentClass: any\n contentProps: any\n opacity: string | number\n target:\n | Element\n | (string & {})\n | 'parent'\n | 'cursor'\n | ComponentPublicInstance\n | [number, number]\n offset: string | number | number[]\n attach: string | boolean | Element\n 'v-slot:activator':\n | false\n | ((arg: {\n isActive: boolean\n props: Record<string, any>\n targetRef: <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L761-L765\" target=\"_blank\">TemplateRef</a>\n }) => VNodeChild)\n }\n direction: 'horizontal' | 'vertical'\n inline: boolean\n sliderProps: {\n maxWidth: string | number\n width: string | number\n color: string\n disabled: boolean\n thumbSize: string | number\n trackColor: string\n }\n}\n",
"description": "Props passed down to the VVideoVolume component."
},
"VVideoVolume/label": {
"type": "string\n",
"description": "Text to display in tooltip and passed to `aria-label`."
},
"VVideoVolume/model-value": {
"type": "number\n",
"description": "Volume value (0 ~ 100)"
},
"VVideoVolume/inline": {
"type": "boolean\n",
"description": "Display slider next to the icon. VMenu won't be displayed on click. Recomended to pair with **sliderProps** to configure slider width."
},
"VVideoVolume/direction": {
"type": "'vertical' | 'horizontal'\n",
"description": "Switch between horizontal and vertical slider."
},
"VVideoVolume/menu-props": {
"type": "unknown\n",
"description": "Props passed to VMenu containing volume slider. Useful to adjust **location** and control menu alignment"
},
"VVideoVolume/slider-props": {
"type": "{\n disabled: boolean\n width: string | number\n color: string\n maxWidth: string | number\n trackColor: string\n thumbSize: string | number\n}\n",
"description": "Selected props to customize volume slider."
},
"VVirtualScroll/height": {
"type": "string | number\n",
"description": "Height of the component as a css value/"
},
"VVirtualScroll/max-height": {
"type": "string | number\n",
"description": "Sets the maximum height for the component."
},
"VVirtualScroll/max-width": {
"type": "string | number\n",
"description": "Sets the maximum width for the component."
},
"VVirtualScroll/min-height": {
"type": "string | number\n",
"description": "Sets the minimum height for the component."
},
"VVirtualScroll/min-width": {
"type": "string | number\n",
"description": "Sets the minimum width for the component."
},
"VVirtualScroll/width": {
"type": "string | number\n",
"description": "Sets the width for the component."
},
"VVirtualScroll/items": {
"type": "unknown[]\n",
"description": "The array of items to display."
},
"VVirtualScroll/item-height": {
"type": "string | number\n",
"description": "Height in pixels of each item to display."
},
"VVirtualScroll/item-key": {
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L61-L65\" target=\"_blank\">SelectItemKey</a>\n",
"description": "Should point to a property with a unique value for each item, if not set then item index will be used as a key which may result in unnecessary re-renders."
},
"VVirtualScroll/renderless": {
"type": "boolean\n",
"description": "Disables default component rendering functionality. The parent node must be [a positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning), e.g. using `position: relative;`"
},
"VWindow/tag": {
"type": "string | (new () => any) | FunctionalComponent\n",
"description": "Specify a custom tag used on the root element."
},
"VWindow/reverse": {
"type": "boolean\n",
"description": "Reverse the normal transition direction."
},
"VWindow/disabled": {
"type": "boolean\n",
"description": "Removes the ability to click or target the component."
},
"VWindow/model-value": {
"type": "unknown\n",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array."
},
"VWindow/theme": {
"type": "string\n",
"description": "Specify a theme for this component and all of its children."
},
"VWindow/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VWindow/mandatory": {
"type": "boolean | 'force'\n",
"description": "Forces at least one item to always be selected (if available)."
},
"VWindow/direction": {
"type": "'vertical' | 'horizontal'\n",
"description": "The transition direction when changing windows."
},
"VWindow/continuous": {
"type": "boolean\n",
"description": "If `true`, window will \"wrap around\" from the last item to the first, and from the first item to the last."
},
"VWindow/next-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the \"next\" button if `show-arrows` is `true`."
},
"VWindow/prev-icon": {
"type": " | string\n | (new () => any)\n | FunctionalComponent\n | (string | [string, number])[]\n",
"description": "Icon used for the \"prev\" button if `show-arrows` is `true`."
},
"VWindow/show-arrows": {
"type": "string | boolean\n",
"description": "Display the \"next\" and \"prev\" buttons."
},
"VWindow/touch": {
"type": "boolean | <a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/touch/index.ts#L9-L17\" target=\"_blank\">TouchHandlers</a>\n",
"description": "Provide a custom **left** and **right** function when swiped left or right."
},
"VWindow/crossfade": {
"type": "boolean\n",
"description": "Enables crossfade transition."
},
"VWindow/transition-duration": {
"type": "number\n",
"description": "Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`."
},
"VWindow/vertical-arrows": {
"type": "boolean | 'left' | 'right'\n",
"description": "Displays the navigation arrows vertically instead of horizontally."
},
"VWindowItem/disabled": {
"type": "boolean\n",
"description": "Prevents the item from becoming active when using the \"next\" and \"prev\" buttons or the `toggle` method."
},
"VWindowItem/value": {
"type": "any\n",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used."
},
"VWindowItem/selected-class": {
"type": "string\n",
"description": "Configure the active CSS class applied when an item is selected."
},
"VWindowItem/eager": {
"type": "boolean\n",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
},
"VWindowItem/transition": {
"type": "string | boolean\n",
"description": "The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition."
},
"VWindowItem/reverse-transition": {
"type": "string | boolean\n",
"description": "Sets the reverse transition."
}
} | | | |