quasar/dist/api/QField.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/field"},"props":{"model-value":{"type":"Any","desc":"Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive","category":"model"},"error":{"type":["Boolean","null"],"default":"null","desc":"Does field have validation errors?","category":"behavior","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":"content"},"no-error-icon":{"type":"Boolean","desc":"Hide error icon when there is an error","category":"content"},"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":"behavior"},"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":"behavior"},"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":"behavior","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"},"maxlength":{"type":["String","Number"],"desc":"Specify a max length of model","category":"model"},"tag":{"type":"String","desc":"HTML tag to use","category":"content","default":"'label'","examples":["'div'","'label'"],"addedIn":"v2.13.1","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: <div>"},"hint":{"desc":"Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"},"counter":{"desc":"Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"},"loading":{"desc":"Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop"},"control":{"desc":"Slot for controls; Suggestion QSlider, QRange, QKnob, ...","scope":{"id":{"type":"String","desc":"Element id used in the 'for' attribute of the field label. Can be used to link the control to the label","examples":["'qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa'"]},"field":{"type":"Element","desc":"DOM element of the field"},"editable":{"type":"Boolean","desc":"Field is editable"},"focused":{"type":"Boolean","desc":"Field has focus"},"floatingLabel":{"type":"Boolean","desc":"Field's label is floating"},"modelValue":{"type":"Any","desc":"Field's value","examples":["0.241","'Text'"]},"emitValue":{"type":"Function","desc":"Function that emits an @input event in the context of the field","params":{"value":{"type":"Any","required":true,"desc":"Value to be emitted","examples":["0","'Changed text'"]}},"returns":null}}}},"events":{"update:model-value":{"desc":"Emitted when the model changes, only when used with 'clearable' or the 'control' scoped slot.","params":{"value":{"type":"Any","desc":"New model value","required":true}}},"focus":{"desc":"Emitted when component gets focused","params":{"evt":{"type":"Event","desc":"JS event object"}}},"blur":{"desc":"Emitted when component loses focus","params":{"evt":{"type":"Event","desc":"JS event object"}}},"clear":{"desc":"When using the 'clearable' property, this event is emitted when the clear icon is clicked","params":{"value":{"type":"Any","desc":"The previous value before clearing it"}}}},"methods":{"resetValidation":{"desc":"Reset validation status","params":null,"returns":null},"validate":{"desc":"Trigger a validation","params":{"value":{"type":"Any","desc":"Optional value to validate against"}},"returns":{"type":["Boolean","Promise<boolean>"],"desc":"True/false if no async rules, otherwise a Promise with the outcome (true -> validation was a success, false -> invalid models detected)","examples":["true","validate().then(outcome => { ... })"]}},"focus":{"desc":"Focus component","params":null,"returns":null},"blur":{"desc":"Blur component (lose focus)","params":null,"returns":null}},"computedProps":{"hasError":{"type":"Boolean","desc":"Whether the component is in error state"}}}