An extension to make Shoelace elements work even more seamlessly with htmx.
- Include
sl-ratingvalues. These are ignored by htmx as Shoelace doesn't implement thenameattribute forsl-rating- and a name is needed for the formData key. - Includes an
sl-radio-groupvalue only if it has a value set - Prevents form submission if the form is not valid (e.g. a required field has no value)
- Import htmx and the extension
<script src="htmx.js"></script>
<script src="htmx.ext.shoelace.js"></script>
- Add "shoelace" to the
hx-extparameter on aformorbodytag. Adding it to the body tag will make all forms in the page include the values of Shoelace elements within them.
<body hx-ext="shoelace">
- Don't forget to add a
nameattribute to your Shoelace elements 🤦