Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: HTML label in MDBCheckbox

okaeri pro asked 3 years ago


Currently, the label prop from MDBCheckbox escapes the text. I did not find any mention of ability to change this behavior in the docs. It seems this critical functionality is missing.


Mikołaj Smoleński staff commented 3 years ago

Hello @okaeri,

Can you explain what HTML elements exactly you want to add as a label? It's the first time I read about adding anything else than a string as a label.

Keep coding,  Mikołaj from MDB


okaeri pro commented 3 years ago

I have noticed this issue while trying to implement user-defined checkout page checkboxes. It is common for e-commerce websites to provide links in checkboxes. It would be problematic at best to prevent end-users from doing this.

While I understand accessibility concerns (e.g. described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) I don't think it is wise to limit the use of an included component in this manner.

I have seen countless examples of the label links on the login or registration pages. It also seems this use case is the one that MDM advocates against - but at the end, this is the choice of the developer.

There are many use cases like icons as additional visual aid/guide directing to the other interface elements, context emphasis, idiomatic text and similar.


Mikołaj Smoleński staff commented 3 years ago

Thanks for the detailed background. I'm adding the new task for this issue and we will implement this feature in one of the next releases.

Keep coding,  Mikołaj from MDB



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.4.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: No