quasar

{ "mixins": [ "composables/private.use-field/use-field", "components/virtual-scroll/use-virtual-scroll", "composables/use-form/private.use-form" ], "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/select" }, "props": { "model-value": { "extends": "model-value", "type": "Any", "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive", "examples": [ "# v-model=\"myModel\"" ] }, "multiple": { "type": "Boolean", "desc": "Allow multiple selection; Model must be Array", "category": "model|selection" }, "display-value": { "type": [ "Number", "String" ], "desc": "Override default selection string, if not using 'selected' slot/scoped slot and if not using 'use-chips' prop", "examples": [ "'Options: x, y, z'" ], "category": "selection" }, "display-value-html": { "extends": "html", "desc": "Force render the selected option(s) as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'selected' or 'selected-item' slots!", "category": "selection" }, "options": { "type": "Array", "desc": "Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with 'label' (String), 'value' (Any) and optional 'disable' (Boolean) props (can be customized with options-value/option-label/option-disable props).", "default": "[]", "examples": [ "[ 'Tesla', 'iPhone' ]", "[ { label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' } ]" ], "category": "options" }, "option-value": { "type": [ "Function", "String" ], "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline", "default": "'value'", "__runtimeDefault": true, "params": { "option": { "type": [ "String", "Object" ], "desc": "The current option being processed", "examples": [ "'Tesla'", "'iPhone'", "{ label: 'Tesla', value: 'car', cannotSelect: true }" ] } }, "returns": { "type": "Any", "desc": "Value of the current option", "examples": [ "'car'", "34" ] }, "examples": [ "'modelNumber'", "item => (item === null ? null : item.modelNumber)" ], "category": "options" }, "option-label": { "type": [ "Function", "String" ], "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline", "default": "'label'", "__runtimeDefault": true, "params": { "option": { "type": [ "String", "Object" ], "desc": "The current option being processed", "examples": [ "'Tesla'", "'iPhone'", "{ label: 'Tesla', value: 'car', cannotSelect: true }" ] } }, "returns": { "type": "String", "desc": "Label of the current option", "examples": [ "'Tesla'", "'iPhone'" ] }, "examples": [ "'itemName'", "item => (item === null ? 'Null value' : item.itemName)" ], "category": "options" }, "option-disable": { "type": [ "Function", "String" ], "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline", "default": "'disable'", "__runtimeDefault": true, "params": { "option": { "type": [ "String", "Object" ], "desc": "The current option being processed", "examples": [ "'Tesla'", "'iPhone'", "{ label: 'Tesla', value: 'car', cannotSelect: true }" ] } }, "returns": { "type": "Boolean", "desc": "If true, the current option will be disabled" }, "examples": [ "item => (item === null ? true : item.cannotSelect)", "# option-disable=\"cannotSelect\"" ], "category": "options" }, "hide-selected": { "type": "Boolean", "desc": "Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non 'multiple' Selects", "category": "selection" }, "hide-dropdown-icon": { "type": "Boolean", "desc": "Hides dropdown icon", "category": "content|behavior" }, "dropdown-icon": { "extends": "icon" }, "max-values": { "type": [ "Number", "String" ], "desc": "Allow a maximum number of selections that the user can do", "category": "selection" }, "options-dense": { "extends": "dense", "desc": "Dense mode for options list; occupies less space", "category": "options" }, "options-dark": { "type": [ "Boolean", "null" ], "default": "null", "desc": "Options menu will be colored with a dark color", "category": "options" }, "options-selected-class": { "type": "String", "desc": "CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the 'color' prop value)", "examples": [ "'text-orange'" ], "category": "options" }, "options-html": { "extends": "html", "desc": "Force render the options as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'option' slot!", "category": "options" }, "options-cover": { "type": "Boolean", "desc": "Expanded menu will cover the component (will not work along with 'use-input' prop for obvious reasons)", "category": "options" }, "menu-shrink": { "type": "Boolean", "desc": "Allow the options list to be narrower than the field (only in menu mode)", "category": "options" }, "menu-anchor": { "type": "String", "desc": "Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)", "values": [ "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'", "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'", "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'" ], "category": "position" }, "menu-self": { "type": "String", "desc": "Two values setting the options list's own position relative to its target (only in menu mode)", "values": [ "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'", "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'", "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'" ], "category": "position" }, "menu-offset": { "type": "Array", "desc": "An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)", "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ], "category": "position" }, "popup-content-class": { "type": "String", "desc": "Class definitions to be attributed to the popup content", "examples": [ "'my-special-class'" ], "category": "style" }, "popup-content-style": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the popup content", "examples": [ "'background-color: #ff0000'", "{ backgroundColor: '#ff0000' }" ], "category": "style" }, "popup-no-route-dismiss": { "type": "Boolean", "desc": "Changing route app won't dismiss the popup (menu or dialog)", "category": "behavior", "addedIn": "v2.15" }, "use-chips": { "type": "Boolean", "desc": "Use QChip to show what is currently selected", "category": "selection" }, "use-input": { "type": "Boolean", "desc": "Use an input tag where users can type", "category": "content" }, "maxlength": { "type": [ "String", "Number" ], "desc": "Specify a max length for the inner input tag (if 'use-input' is enabled)", "category": "content" }, "fill-input": { "type": "Boolean", "desc": "Fills the input with current value; Useful along with 'hide-selected'; Does NOT work along with 'multiple' selection", "category": "behavior" }, "new-value-mode": { "type": "String", "desc": "Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by 'new-value-mode')", "values": [ "'add'", "'add-unique'", "'toggle'" ], "category": "behavior" }, "map-options": { "type": "Boolean", "desc": "Try to map labels of model from 'options' Array; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value; Refer to the 'Affecting model' section above", "category": "options" }, "disable-tab-selection": { "type": "Boolean", "desc": "Prevents the tab key from confirming the currently hovered option", "category": "options", "addedIn": "v2.17" }, "emit-value": { "type": "Boolean", "desc": "Update model with the value of the selected option instead of the whole option", "category": "model" }, "input-debounce": { "type": [ "Number", "String" ], "desc": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)", "default": "500", "category": "content" }, "input-class": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the underlying input tag", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ], "category": "style" }, "input-style": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the underlying input tag", "examples": [ "'background-color: #ff0000'", "{ backgroundColor: '#ff0000' }" ], "category": "style" }, "tabindex": { "extends": "tabindex", "default": "0" }, "autocomplete": { "type": "String", "desc": "Autocomplete attribute for field", "examples": [ "'country'" ], "category": "behavior" }, "transition-show": { "extends": "transition", "desc": "Transition when showing the menu/dialog; One of Quasar's embedded transitions", "default": "'fade'", "passthrough": "child", "category": "behavior" }, "transition-hide": { "extends": "transition", "desc": "Transition when hiding the menu/dialog; One of Quasar's embedded transitions", "default": "'fade'", "passthrough": "child", "category": "behavior" }, "transition-duration": { "type": [ "String", "Number" ], "desc": "Transition duration when hiding the menu/dialog (in milliseconds, without unit)", "default": "300", "passthrough": "child", "category": "behavior" }, "behavior": { "type": "String", "desc": "Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles", "values": [ "'default'", "'menu'", "'dialog'" ], "default": "'default'", "category": "behavior" }, "name": { "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists" }, "virtual-scroll-item-size": { "__runtimeDefault": true } }, "slots": { "selected": { "desc": "Override default selection slot; Suggestion: QChip" }, "loading": { "desc": "Override default spinner when component is in loading mode; Suggestion: spinners" }, "before-options": { "desc": "Template slot for the elements that should be rendered before the list of options" }, "after-options": { "desc": "Template slot for the elements that should be rendered after the list of options" }, "no-option": { "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>", "scope": { "inputValue": { "type": "String", "desc": "Input textfield value, if any (not QSelect model)", "examples": [ "'typed something'" ] } } }, "selected-item": { "desc": "Override default selection slot; Suggestion: QChip", "scope": { "index": { "type": "Number", "desc": "Selection index" }, "opt": { "type": "Any", "desc": "Selected option -- its value is taken from model" }, "selected": { "type": "Boolean", "desc": "Always true -- passed down as prop to QItem (when using QItem)" }, "html": { "type": "Boolean", "desc": "Is the content HTML?" }, "removeAtIndex": { "type": "Function", "desc": "Remove selected option located at specific index", "params": { "index": { "type": "Number", "required": true, "desc": "Index at which to remove selection" } }, "returns": null }, "toggleOption": { "type": "Function", "desc": "Add/remove option from model", "params": { "opt": { "type": "Any", "required": true, "desc": "Option to add to model" } }, "returns": null }, "tabindex": { "type": "Number", "desc": "Tabindex HTML attribute value associated with respective option", "values": [ "0", "-1" ] } } }, "option": { "desc": "Customize how options are rendered; Suggestion: QItem", "scope": { "index": { "type": "Number", "desc": "Option index" }, "opt": { "type": "Any", "desc": "Option -- its value is taken from 'options' prop" }, "html": { "type": "Boolean", "desc": "Is the content HTML?" }, "label": { "type": "String", "desc": "Label of the option" }, "selected": { "type": "Boolean", "desc": "Is option selected?" }, "focused": { "type": "Boolean", "desc": "Is option focused?" }, "toggleOption": { "type": "Function", "desc": "Add/remove option from model", "params": { "opt": { "type": "Any", "required": true, "desc": "Option to add to model" } }, "returns": null }, "setOptionIndex": { "type": "Function", "desc": "Sets option from menu as 'focused'", "params": { "index": { "type": "Number", "required": true, "desc": "Index of option from menu" } }, "returns": null }, "itemProps": { "type": "Object", "desc": "Computed properties passed down to QItem" } } } }, "events": { "input-value": { "desc": "Emitted when the value in the text input changes", "params": { "value": { "type": "String", "desc": "New text value" } } }, "remove": { "desc": "Emitted when an option is removed from selection", "params": { "details": { "type": "Object", "desc": "Removal details", "definition": { "index": { "type": "Number", "required": true, "desc": "Model index at which removal took place" }, "value": { "type": "Any", "required": true, "desc": "The actual value that was removed" } } } } }, "add": { "desc": "Emitted when an option is added to the selection", "params": { "details": { "type": "Object", "desc": "Addition details", "definition": { "index": { "type": "Number", "required": true, "desc": "Model index at which addition took place" }, "value": { "type": "Any", "required": true, "desc": "The actual value that was added" } } } } }, "new-value": { "desc": "Enables creation of new values; Emitted when a new value has been created; You can override 'new-value-mode' property with it", "params": { "inputValue": { "type": "String", "desc": "What the user typed", "examples": [ "'phone'" ] }, "doneFn": { "type": "Function", "desc": "Adds (optional) value to the model; Do not forget to call it after you validate the newly created value; Call it with no parameters if nothing should be added", "params": { "item": { "type": "Any", "required": false, "desc": "Item to add" }, "mode": { "type": "String", "required": false, "desc": "Override 'new-value-mode' (prop) behavior should you wish to", "values": [ "'add'", "'add-unique'", "'toggle'" ], "default": "'add'" } }, "returns": null } } }, "filter": { "desc": "Emitted when user wants to filter a value", "params": { "inputValue": { "type": "String", "desc": "What the user typed", "examples": [ "'phone'" ] }, "doneFn": { "type": "Function", "desc": "Supply a function which makes the necessary updates", "params": { "callbackFn": { "type": "Function", "required": true, "desc": "Callback to call to make the actual updates", "params": null, "returns": null }, "afterFn": { "type": "Function", "required": false, "desc": "Callback to call at the end after the update has been fully processed by QSelect", "params": { "ref": { "type": "Component", "tsType": "QSelect", "required": true, "desc": "Vue reference to the QSelect which triggered the filtering" } }, "returns": null } }, "returns": null }, "abortFn": { "type": "Function", "desc": "Call this function if something went wrong", "params": null, "returns": null } } }, "filter-abort": { "desc": "Emitted when a filtering was aborted; Probably a new one was requested?" }, "popup-show": { "desc": "Emitted when the select options menu or dialog is shown.", "params": { "evt": { "extends": "evt" } } }, "popup-hide": { "desc": "Emitted when the select options menu or dialog is hidden.", "params": { "evt": { "extends": "evt" } } }, "virtual-scroll": { "params": { "details": { "definition": { "ref": { "type": "Component", "tsType": "QSelect", "desc": "Vue reference to the QSelect" } } } } }, "keyup": { "internal": true }, "keydown": { "internal": true }, "keypress": { "internal": true } }, "methods": { "showPopup": { "desc": "Focus and open popup", "params": null, "returns": null }, "hidePopup": { "desc": "Hide popup", "params": null, "returns": null }, "removeAtIndex": { "desc": "Remove selected option located at specific index", "params": { "index": { "type": "Number", "required": true, "desc": "Index at which to remove selection" } }, "returns": null }, "add": { "desc": "Adds option to model", "params": { "opt": { "type": "Any", "required": true, "desc": "Option to add to model" }, "unique": { "type": "Boolean", "desc": "Option must be unique" } }, "returns": null }, "toggleOption": { "desc": "Add/remove option from model", "params": { "opt": { "type": "Any", "required": true, "desc": "Option to add to model" }, "keepOpen": { "type": "Boolean", "desc": "Don't close the menu and do not clear the filter" } }, "returns": null }, "getOptionIndex": { "desc": "Gets current focused option index from menu; It's -1 if no option is focused", "params": null, "returns": { "type": "Number", "desc": "Index of option from menu; It's -1 if no option is focused" }, "addedIn": "v2.5.4" }, "setOptionIndex": { "desc": "Sets option from menu as 'focused'; -1 to focus none", "params": { "index": { "type": "Number", "required": true, "desc": "Index of option from menu; -1 to focus none" } }, "returns": null }, "moveOptionSelection": { "desc": "Move selected option from menu by index offset", "params": { "offset": { "type": "Number", "desc": "Number of options to move up or down", "default": "1" }, "skipInputValue": { "type": "Boolean", "desc": "Don't set input-value on navigation" } }, "returns": null }, "filter": { "desc": "Filter options", "params": { "value": { "type": "String", "required": true, "desc": "String to filter with", "examples": [ "'car'" ] } }, "returns": null }, "updateMenuPosition": { "desc": "Recomputes menu position", "params": null, "returns": null }, "updateInputValue": { "desc": "If 'use-input' is specified, this updates the value that it holds", "params": { "value": { "type": "String", "required": true, "desc": "String to set the input value to", "examples": [ "'hotel'" ] }, "noFilter": { "type": "Boolean", "desc": "Set to true if you don't want the filter (if any) to be also triggered" } }, "returns": null }, "isOptionSelected": { "desc": "Tells if an option is selected", "params": { "opt": { "type": "Any", "required": true, "desc": "Option entry" } }, "returns": { "type": "Boolean", "desc": "Option is selected or not" } }, "getEmittingOptionValue": { "desc": "Get the model value that would be emitted by QSelect when selecting a said option; Also takes into consideration if 'emit-value' is set", "params": { "opt": { "type": "Any", "required": true, "desc": "Option entry" } }, "returns": { "type": "Any", "desc": "Emitting model value of said option" } }, "getOptionValue": { "desc": "Get the model value of an option; Takes into consideration 'option-value' (if used), but does not looks for 'emit-value', like getEmittingOptionValue() does", "params": { "opt": { "type": "Any", "required": true, "desc": "Option entry" } }, "returns": { "type": "Any", "desc": "Model value of said option" } }, "getOptionLabel": { "desc": "Get the label of an option; Takes into consideration the 'option-label' prop (if used)", "params": { "opt": { "type": "Any", "required": true, "desc": "Option entry" } }, "returns": { "type": "Any", "desc": "Label of said option" } }, "isOptionDisabled": { "desc": "Tells if an option is disabled; Takes into consideration 'option-disable' prop (if used)", "params": { "opt": { "type": "Any", "required": true, "desc": "Option entry" } }, "returns": { "type": "Boolean", "desc": "Option is disabled or not" } } } }