Form Textarea

The <d-form-textarea> component allows you to create multi-line text inputs that adjusts its height (text rows) automatically to fit the content. You can also limit the number of rows displayed using the max-rows prop. If you'd like to force the textarea element to a fixed height, you can use both rows and max-rows props simultaneously.

Alias

The <d-form-textarea> component is also available as <d-textarea>.

Basic Example

<template>
    <div>
        <d-form-textarea v-model="text"
                        placeholder="Enter something"
                        :rows="3"
                        :max-rows="6">
        </d-form-textarea>
        <span v-if="text" class="d-block my-2">🤔 So you're saying: {{ text }}</span>
    </div>
</template>

<script>
export default {
    data () {
        return {
            text: ''
        }
    }
}
</script>

<!-- textarea-1.vue -->

Validation

Using the state prop on the <d-form-textarea> component you can control the textarea's validation state.

The following textarea states are available:

invalid when the textarea is invalid.
valid when the use textarea is valid.
null when the textarea should display no validation state (neutral).

<template>
    <div>
        <d-form-textarea state="valid"
                        v-model="text"
                        placeholder="You can start your novel right here..."
                        :rows="3"
                        :max-rows="6">
        </d-form-textarea>
        <span v-if="text" class="d-block my-2">🤔 So you're saying: {{ text }}</span>
    </div>
</template>

<script>
export default {
    data () {
        return {
            text: ''
        }
    }
}
</script>

<!-- textarea-2.vue -->

Props

Prop	Description	Type	Default	Required
:name	The element name.	`String`	null	False
:id	The element ID.	`String`	null	False
:disabled	The disabled state.	`Boolean`		False
:required	The required state.	`Boolean`		False
:state	The validity state.	`Boolean \| String`	null	False
:size	The element's size.	`String`	null	False
:placeholder	The placeholder value.	`String`	null	False
:autocomplete	The autocomplete status.	`String`	null	False
:readonly	Whether the textarea should be read-only, or not.	`Boolean`	false	False
:plaintext	Whether the textarea should be plain-text, or not.	`Boolean`	false	False
:rows	The number of text rows.	`Number \| String`	null	False
:wrap	The textarea wrap style.	`String`	"soft"	False
:no-resize	Whether resizing should be disabled, or not.	`Boolean`	false	False