Customise colour for error-label in q-field

Jezzta667

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?

zeidanbm

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 .

Jezzta667

@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'))
    }
}

metalsadman

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

Jezzta667

@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.

zeidanbm

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

No More Posting New Topics!

Customise colour for error-label in q-field