Overview & How It Works
ln-slug is applied to an <input name="slug" data-ln-slug-from="sourceName"> within a <form>. It queries the source field by name and listens for its native input events: while the slug input remains pristine, it computes the slugified string and sets slug.value in real-time. If the user types directly into the slug field, it marks it as dirty and halts mirroring until cleared.
| Attribute | On element | Description |
|---|---|---|
data-ln-slug-from="name" | <input> | Activates slug mirroring from the named source field in the same form |
Example — Live mirroring (empty slug = pristine)
Type in the Name field. The Slug updates automatically. Type directly into Slug to stop mirroring; clear it to resume.
Example — Pre-filled slug is NOT overwritten
When the slug field already has a value at page load (e.g. from a server-rendered edit form), it starts NON-pristine. Typing in the name field does NOT overwrite the existing slug.
Pristine rules
| Situation | Result |
|---|---|
| Slug field empty at init | Pristine — mirroring active |
| Slug field non-empty at init (server-rendered) | Not pristine — never overwrite |
| User types non-empty into slug | Not pristine — mirroring stops |
| User clears slug to empty | Pristine — mirroring resumes |
| lnForm.fill sets non-empty slug | Not pristine — loaded slug preserved |
| Form reset clears slug to empty | Pristine — mirroring resumes |
Limitations (v1)
- ASCII-only: Cyrillic, Macedonian, accented characters, and other non-ASCII input are stripped entirely (become
-). No transliteration in v1. - Source read at init: The source field is resolved once at construction. Dynamically added source fields require re-initialization.
- Single source field: If multiple fields share the same name (RadioNodeList), the component warns and bails. One text input → one slug.