ITextarea ​

A multi-line field, with the same sizes and states as IInput.

<ITextarea v-model="notes" placeholder="Notes for this invoice" />

The model is a string, and rows sets the starting height when you are not using autosize.

Autosize ​

autosize grows the field with its content instead of scrolling it.

<ITextarea v-model="notes" autosize />

Pass an object to bound the growth. min and max are counted in rows.

<ITextarea v-model="notes" :autosize="{ min: 2, max: 6 }" placeholder="Between two and six rows" />

Character count ​

showCount adds a count under the field. With maxlength it reads against the limit and turns red in the last tenth. Screen readers only hear it then, so they aren't told the count on every keystroke.

<ITextarea v-model="bio" show-count :maxlength="160" placeholder="A short bio" />

The announcement is English by default. Pass countLabel to translate it:

<ITextarea v-model="bio" show-count :maxlength="160" :count-label="n => `quedan ${n}`" />

Sizes ​

<ITextarea v-model="notes" size="sm" placeholder="Small" />
<ITextarea v-model="notes" size="md" placeholder="Medium" />
<ITextarea v-model="notes" size="lg" placeholder="Large" />

States ​

<ITextarea v-model="notes" invalid placeholder="Something is wrong here" />
<ITextarea model-value="You cannot edit this." disabled />

Inside an IFormField, invalid is set for you from the validation state.

Props ​

For a single line use IInput; for a number, INumberInput.