fundamental
fundamental copied to clipboard
[Docs] Show example of textarea with char message
- The maximum length of the content shall be defined in characters. If defined, the number of remaining / exceeding characters are shown
- We don't show any error states for text area (same as input states)
- Full specs
We don't need an explicit design for this. It can be shown as a part of the new Textarea section defined in #822. We can use existing helpers to demonstrate how to accomplish this character count field.
<div class="fd-form__item">
<label class="fd-form__label" for="j7QPr100">
Field Label:
</label>
<textarea class="fd-textarea fd-form__control is-invalid" id="j7QPr100">Pellentesque metus lacus commodo eget justo ut rutrum varius nunc. Sed non rhoncus risus. Morbi sodales gravida pulvinar. Duis malesuada odio volutpat elementum vulputate massa magna scelerisque ante et accumsan tellus nunc in sem.</textarea>
<span class="fd-form__message fd-has-color-status-3 fd-has-text-align-right">
4 characters exceeded</span>
</div>
in the above, the is-invalid
class would be toggled on the control and the fd-has-color-status-3
classes on the message field.
Some refactoring would be needed to accomplish this solely with the existing message container. For example, the error icon is included as an
:after
and cannot easily move to the right, and the message container uses a modifier which should change to a state class so that it can be toggled. The Nunjucks template does not make these mods very easily so that would need to be rebuilt.
we are waiting for specs from @jeannewalters