Dependencies
This layout uses the following framework items as "atoms" to create the full UI.
Uses: Components: JS:Character Count
A 100 character limit input with feedback paragraph of characters remaining.
This layout uses the following framework items as "atoms" to create the full UI.
Uses: Components: JS:A 100 character limit input with feedback paragraph of characters remaining.
<div class="u-w-20"
x-data="{
content: '',
limit: $el.dataset.limit,
get remaining() {
return this.limit - this.content.length
}
}" data-limit="100"
>
<label class="c-label | u-w-100%">
<span class="c-label__text">
<span class="o-split">
<span class="o-split__title">Label</span>
<span class="u-muted:50%" x-text="remaining"></span>
</span>
</span>
<span class="c-label__input">
<textarea class="c-input c-input--textarea" rows="4" x-model="content"></textarea>
</span>
</label>
</div>