Required Checkboxes

[voidus]

Heya,

I'm building a signup page right now and need a checkbox that must be checked in order to submit the page.
I have not been able to find a way to do this that doesn't either involve a different experience from the other validations or requires a lot of code to make it look like the other validations. (I have tried to find the quasar code that does this but I'm struggling to navigate the codebase tbh)

Is this actually missing? Is it easy to add? If yes, any support would be greatly appreciated.

This feels like a very common requirement, so I'm surprised it isn't mentioned anywhere.

[stefanvanherwijnen]

You can wrap a QCheckbox in a QField:
https://codepen.io/stefanvh/pen/bGJqyJj?editors=101

[voidus]

Thank you, this is a great help. I didn't think of this approach.

That said, I don't think the result meets the usual quasar standards. I'd expect the checkbox to change color, but instead everything else does. Besides, it also adds the line below the field, which looks out of place under a checkbox imo.

[stefanvanherwijnen]

You can link the color to QField hasError prop and hide the bottom line with borderless:
https://codepen.io/stefanvh/pen/bGJqyJj?editors=101

[rmplbv]

Sorry for jumping in. When using QField for validating the inner QCheckbox, the label color of the checkbox is set to primary. Is there a way to reset this to the normal text color?

[stefanvanherwijnen]

Yes, add class="text-red" to QCheckbox (or a different color).

[rmplbv]

already did, but it doesn't feel satisfying to explicitly set it to the default text color. especially if the default text color is the preset one from the browser. i guess there is no way around? is there a reason why text color is set to primary or anything at all for controls inside QField?

[stefanvanherwijnen]

I guess QField has a text-primary class which propagates to QCheckbox.

[rmplbv]

hm, but why?

[stefanvanherwijnen]

Because QField has text color primary?