Custom attributes for standard HTML components

[janschiefer]

Hello,

how do I use custom HTML attributes for components (in this example for the Flowbite web UI framework)?

Example:
<input id="datepicker-autohide" datepicker datepicker-autohide type="text" class="(...)" placeholder="Select date">

Thank you!

[gbj]

To the best of my knowledge, that's invalid HTML, which is why the view macro rejects it. Custom attribute names need to contain a hyphen, which is what the view macro looks for, i.e., either data-datepicker or flowbite-datepicker or whatever. This is really important for forward-compatibility for the Web.

If Flowbite doesn't allow for valid versions of its attributes, you can use it without the view macro, adding the non-standard attribute name with .attr()

use leptos::html::input;

input()
    .id("datepicker-autohide")
    .attr("datepicker", true)
    .attr("datepicker-autohide", true)
    .r#type("text")
    .class("...")
    .placeholder("Select date")

[janschiefer]

Thank you, this works for me.