GrTextarea

The set matches GrInput, so that wrappers over the controls are written the same way. The native events are re-emitted by the component: a declared emit leaves $attrs, and without that the consumer’s @change would stop working.

clearable repeats the anatomy of GrInput: a cross in the upper right corner when the value is non-empty, hidden with disabled/readonly, configured through GrConfigProvider. The field keeps room for the cross on the right while it can appear — the first line does not slide under the ”×”.

The wrapper around the textarea is always there, while the button, the state mark and the counters (showCount, showLineCount) are its conditional siblings. The wrapper used to appear together with them, and the <textarea> was re-created: as soon as state became success on the fly, focus went to <body>, and the following keystrokes were lost. class and style land on the wrapper, the other attributes on the <textarea> itself (as with GrInput, see form-controls.md). The field inside is a block: its height is the same with the siblings and without them.

size, readonly, maxlength + showCount work the same way as in the input field: a textarea in one form next to a GrInput must differ neither in type size nor in the set of possibilities.

The counter is linked to the field through aria-describedby — otherwise “12 / 60” is seen with the eyes but not heard, while the limit on the length is its whole point.

state="success" and "warning" get an icon and a hidden label in aria-describedby by the same device: the colour of the border as the only carrier of meaning is WCAG 1.4.1, and these two states have no ARIA equivalent of aria-invalid. danger gets no icon — its meaning is already carried by aria-invalid and the error text from GrFormField — and the mark goes out as soon as the field is declared invalid.

The mark appears in the same wrapper as the clear button: the field is not re-created in the process, and focus and the caret stay in place.

The line counter

showLineCount prints a second label in the same row: the lines on the left, the characters on the right. The lines are counted logically — by line breaks — so with autosize the number does not depend on the width of the field: a visual wrap does not count as a line.

The label is localised and inflected (gr.textarea.lines), and maxLines changes it to the 3 / 10 format. It deliberately has no limit on the input: the component has no right to truncate typed text on the user’s behalf — the counter shows the excess (12 / 10), and the decision stays with the form.

Both counters are switched on independently and both are linked to the field through aria-describedby.

A wording of your own

12 / 60 is not the only way to speak about the length, and the line counter does not replace a second wording: it is simply a second ready counter, just as fixed in form. The #count slot hands the text over to the consumer:

<GrTextarea v-model="text" :maxlength="280">
  <template #count="{ remaining }">
    {{ remaining < 0 ? `${-remaining} over` : `${remaining} left` }}
  </template>
</GrTextarea>

The slot receives length, maxlength and remaining; without maxlength the last two arrive as undefined — a limit is not invented. remaining is not clamped to zero: maxlength holds input from the keyboard, but a value that came into v-model from code steps over the limit, and “-3” there is more honest than zero.

A separate show-count is not needed for that — a slot that has been given is in itself a request to show the counter. The place in the row, the link to the field through aria-describedby and the styling stay the same: the slot changes the text rather than the mechanism.

<GrTextarea v-model="text" autosize :rows="2" />

autosize switches on the v-autosize directive, which was already in the package and simply had not been connected to the component. rows sets the starting height.

resize (vertical by default, none, both) governs manual stretching: together with autosize it is usually switched off.

GrTextareaProps is a declared interface rather than a typeof props. The previous export gave away the type of the resolved props: after withDefaults all of the fields with defaults became required and readonly, and an attempt to write const p: GrTextareaProps = { modelValue: '' } failed out of the blue.

It is dimmed with the --gr-muted background and --gr-muted-fg text rather than with opacity: transparency dilutes tokens tuned to AA.