Vuersatile Components

Appearance

On this page

InputTextarea ​

Not so plain and not so simple input textarea.

Has the same API than InputText.

html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputTextarea
                    name="comments"
                    label="CV summary"
                    placeholder="Write here the summary of your employment history"
                    :autoResize="false"
                    :validations="['not-empty']"
                />
            </div>
        </div>
    </Form>
</Card>

Props ​

  • autoResize (default true): if auto-resize input when writing.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputTextarea
                    name="comments"
                    label="CV summary"
                    placeholder="Write here the summary of your employment history"
                    :validations="['not-empty']"
                />
            </div>
        </div>
    </Form>
</Card>
  • allowResize (default false): if allow to manually resize the input (vertically only). Needs :autoResize="false" to work.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputTextarea
                    name="comments"
                    label="CV summary"
                    placeholder="Write here the summary of your employment history"
                    allowResize
                    :autoResize="false"
                    :validations="['not-empty']"
                />
            </div>
        </div>
    </Form>
</Card>
  • rows (default 2): rows by default.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputTextarea
                    name="comments"
                    label="CV summary"
                    placeholder="Write here the summary of your employment history"
                    :rows="4"
                    :validations="['not-empty']"
                />
            </div>
        </div>
    </Form>
</Card>

Emits ​

  • @input. Native event emit.
  • @inputField. Custom event emit.
  • @change. Native change emit.
  • @changeField. Custom change emit.