Customise colour for error-label in q-field



  • Hi Quasar gang.

    I am building a form and experimenting with the error-label for invalid input.

    The q-field is capable of the following:

    error state - utilises $negative stylus variable
    warning state - utilises $warning stylus variable

    Is there a way to change the error colour at the level of the q-field?



  • You can use the color utils that come with quasar. Check the documents for more info.
    Wrap all components that you want to change and give them a specific class then use setBrand and change them. This will ensure only those fields are affected by the change.
    For example I will have this component which i set a custom id for

    <q-field
        id="my-custom-class"
        icon="wifi"
        :count="10"
        helper="Some helper"
        error="true"
        error-label="I'm a warning label"
    >
        <q-input v-model="text" float-label="Input float label" />
    </q-field>
    

    Then on component mount I will change the color

    mounted() {
       // don't forget to import setBrand from colors
        setBrand('negative',  '#000',  document.getElementById('my-custom-class'));
    }
    

    P.S: You definetly don’t wanna use same id for all components, so either make it dynamic or use a class and loop through on the parent component, or even better you can wrap all components under effect with a div(having an id) or even the form tag .



  • @zeidanbm thanks a lot! That’s very helpful.

    I have used your suggestion in the following manner:

    <script>
    import { colors } from 'quasar'
    
    const { getBrand, setBrand } = colors
    const infoColor = getBrand('info')
    
    export default {
        mounted () {
            setBrand('negative', infoColor , document.getElementById('signUpForm'))
        }
    }


  • there is a warning and a warning-label props for q-field https://quasar-framework.org/components/field.html.



  • @metalsadman Oh dear, I can only assume that I got mixed up between the ‘Field’ and ‘Input (Textfield)’ pages whilst searching for ‘warning-label’, silly me. I don’t know how I missed that, to be honest (I’ll blame the Mandela Effect).

    @zeidanbm You can disregard my correction, warning-label DOES exist.

    I will edit my question to prevent confusing anyone, but thank you for your input.



  • That’s what i thought and read on docs. Haven’t used or tested the warning props but yeah good to know they are working and also checked back on the quasar releases page and they got added on v0.15.11