{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/select"},"props":{"name":{"type":"String","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","examples":["'car_id'"],"category":"behavior"},"virtual-scroll-horizontal":{"type":"Boolean","desc":"Make virtual list work in horizontal mode","category":"behavior"},"virtual-scroll-slice-size":{"type":["Number","String","null"],"desc":"Minimum number of items to render in the virtual list","default":"10","examples":["60","'60'"],"category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-before":{"type":["Number","String"],"desc":"Ratio of number of items in visible zone to render before it","default":"1","category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-after":{"type":["Number","String"],"desc":"Ratio of number of items in visible zone to render after it","default":"1","category":"virtual-scroll","required":false},"virtual-scroll-item-size":{"type":["Number","String"],"desc":"Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item","default":"24","category":"virtual-scroll","required":false},"virtual-scroll-sticky-size-start":{"type":["Number","String"],"desc":"Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision","default":"0","category":"virtual-scroll","required":false},"virtual-scroll-sticky-size-end":{"type":["Number","String"],"desc":"Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision","default":"0","category":"virtual-scroll","required":false},"table-colspan":{"type":["Number","String"],"desc":"The number of columns in the table (you need this if you use table-layout: fixed)","category":"virtual-scroll|content"},"model-value":{"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","required":true,"syncable":true,"category":"model","type":"Any","examples":["# v-model=\"myModel\""]},"error":{"type":["Boolean","null"],"default":"null","desc":"Does field have validation errors?","category":"validation","required":false},"error-message":{"type":"String","desc":"Validation error message (gets displayed only if 'error' is set to 'true')","examples":["'Username must have at least 5 characters'"],"category":"validation"},"no-error-icon":{"type":"Boolean","desc":"Hide error icon when there is an error","category":"validation"},"rules":{"type":"Array","tsType":"ValidationRule","desc":"Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules","examples":["[ val => val.length <= 3 || 'Please use maximum 3 characters' ]","[ 'fulltime' ]","[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]"],"category":"validation"},"reactive-rules":{"type":"Boolean","desc":"By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it","category":"validation"},"lazy-rules":{"type":["Boolean","String"],"desc":"If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself","default":"false","values":["true","false","'ondemand'"],"category":"validation","required":false},"label":{"type":"String","desc":"A text label that will “float” up above the input field, once the field gets focus","examples":["'Username'"],"category":"content"},"stack-label":{"type":"Boolean","desc":"Label will be always shown above the field regardless of field content (if any)","category":"content"},"hint":{"type":"String","desc":"Helper (hint) text which gets placed below your wrapped form component","examples":["'Fill in between 3 and 12 characters'"],"category":"content"},"hide-hint":{"type":"Boolean","desc":"Hide the helper (hint) text when field doesn't have focus","category":"content"},"prefix":{"type":"String","desc":"Prefix","examples":["'$'"],"category":"content"},"suffix":{"type":"String","desc":"Suffix","examples":["'@gmail.com'"],"category":"content"},"label-color":{"type":"String","tsType":"NamedColor","desc":"Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"bg-color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"loading":{"type":"Boolean","desc":"Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.","category":"behavior|content"},"clearable":{"type":"Boolean","desc":"Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null","category":"behavior|content"},"clear-icon":{"type":"String","desc":"Custom icon to use for the clear button when using along with 'clearable' prop","examples":["'close'"],"category":"content"},"filled":{"type":"Boolean","desc":"Use 'filled' design for the field","category":"style"},"outlined":{"type":"Boolean","desc":"Use 'outlined' design for the field","category":"style"},"borderless":{"type":"Boolean","desc":"Use 'borderless' design for the field","category":"style"},"standout":{"type":["Boolean","String"],"desc":"Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)","examples":["true","'bg-primary text-white'"],"category":"style"},"label-slot":{"type":"Boolean","desc":"Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set","category":"content"},"bottom-slots":{"type":"Boolean","desc":"Enables bottom slots ('error', 'hint', 'counter')","category":"content"},"hide-bottom-space":{"type":"Boolean","desc":"Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content","category":"style"},"counter":{"type":"Boolean","desc":"Show an automatic counter on bottom right","category":"content"},"rounded":{"type":"Boolean","desc":"Applies a small standard border-radius for a squared shape of the component","category":"style"},"square":{"type":"Boolean","desc":"Remove border-radius so borders are squared; Overrides 'rounded' prop","category":"style"},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"},"item-aligned":{"type":"Boolean","desc":"Match inner content alignment to that of QItem","category":"style"},"disable":{"type":"Boolean","desc":"Put component in disabled mode","category":"state"},"readonly":{"type":"Boolean","desc":"Put component in readonly mode","category":"state"},"autofocus":{"type":"Boolean","desc":"Focus field on initial component render","category":"behavior"},"for":{"type":"String","desc":"Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well","examples":["'myFieldsId'"],"category":"behavior"},"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":{"type":"Boolean","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","required":false},"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'","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","required":false},"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'","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","required":false},"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'","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","required":false},"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":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"max-values":{"type":["Number","String"],"desc":"Allow a maximum number of selections that the user can do","category":"selection"},"options-dense":{"type":"Boolean","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","required":false},"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":{"type":"Boolean","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","required":false},"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":{"type":["Number","String"],"desc":"Tabindex HTML attribute value","examples":["100","'0'"],"category":"general","default":"0","required":false},"autocomplete":{"type":"String","desc":"Autocomplete attribute for field","examples":["'country'"],"category":"behavior"},"transition-show":{"type":"String","desc":"Transition when showing the menu/dialog; One of Quasar's embedded transitions","examples":["'fade'","'slide-down'"],"category":"behavior","default":"'fade'","required":false},"transition-hide":{"type":"String","desc":"Transition when hiding the menu/dialog; One of Quasar's embedded transitions","examples":["'fade'","'slide-down'"],"category":"behavior","default":"'fade'","required":false},"transition-duration":{"type":["String","Number"],"desc":"Transition duration when hiding the menu/dialog (in milliseconds, without unit)","default":"300","category":"behavior","required":false},"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","required":false}},"slots":{"default":{"desc":"Field main content"},"prepend":{"desc":"Prepend inner field; Suggestions: QIcon, QBtn"},"append":{"desc":"Append to inner field; Suggestions: QIcon, QBtn"},"before":{"desc":"Prepend outer field; Suggestions: QIcon, QBtn"},"after":{"desc":"Append outer field; Suggestions: QIcon, QBtn"},"label":{"desc":"Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored"},"error":{"desc":"Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: