Textarea

Form components used for inputting data directly from the keyboard, on multiple lines.

Example

Basic Textarea

<i-textarea v-model="value" placeholder="Type something.." />

export default {
  data () {
    return {
      value: ''
    };
  }
}

Disabled State

Disabled Textarea

<i-textarea v-model="value" placeholder="Type something.." disabled />

export default {
  data () {
    return {
      value: ''
    };
  }
}

Clearable Textarea

Clearable Textarea

<i-textarea v-model="value" placeholder="Type something.." clearable />

export default {
  data () {
    return {
      value: ''
    };
  }
}

Prefix and Suffix

Inkline allows you to easily add a prefix or suffix to your Textareas. Using prefixes and suffixes you can, indicate your Textarea type using an icon or text.

Textarea Prefix and Suffix

<i-textarea v-model="value" placeholder="Type something..">
    <i slot="prefix" class="form-input-icon">@</i>
</i-textarea>

<i-textarea v-model="value" placeholder="Type something..">
    <i slot="suffix" class="form-input-icon">@</i>
</i-textarea>

<i-textarea v-model="value" placeholder="Type something..">
    <i slot="prefix" class="form-input-icon">@</i>
    <i slot="suffix" class="form-input-icon">@</i>
</i-textarea>

export default {
  data () {
    return {
      value: 'Lorem ipsum dolor sit amet, consectetur adipiscing..'
    };
  }
}

Prepend and Append

You can add additional content such as select fields, buttons or plain text, to either side of the Textarea by using the prepend and append slots.

Textarea Prepend and Append

http://

.com

<i-textarea v-model="value" placeholder="Type something..">
    <span slot="prepend" class="form-input-prepend">http://</span>
</i-textarea>

<i-textarea v-model="value" placeholder="Type something..">
    <span slot="append" class="form-input-append">.com</span>
</i-textarea>

<i-textarea v-model="value" placeholder="Type something..">
    <span slot="prepend" class="form-input-prepend">http://</span>
    <span slot="append" class="form-input-append">.com</span>
</i-textarea>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Sizes

You're able to use the size modifier to control the size of your textareas, using one of the available sizes: sm, md, and lg. The default size is set to md.

Textarea Sizes

<i-textarea size="sm" v-model="value" placeholder="Type something small.." />

<i-textarea size="md" v-model="value" placeholder="Type something medium.." />

<i-textarea size="lg" v-model="value" placeholder="Type something large.." />

export default {
  data () {
    return {
      value: ''
    };
  }
}

Component API

Here you can find a list of the various customization options you can use for the textarea component as props, as well as available slots and events.

Textarea API

Property clearable

Type Boolean

Accepted true, false

Default false

Description Sets the textarea as clearable. Clearable textareas have a clear icon when value a is provided.

Property disabled

Type Boolean

Accepted true, false

Default false

Description Sets the state of the textarea form component as disabled.

Property placeholder

Type String

Description Sets the placeholder of the textarea form component.

Property readonly

Type Boolean

Accepted true, false

Default false

Description Sets the state of the textarea form component as readonly.

Property schema

Type Object

Description Provides a schema binding to the textarea form component. See the Form Validation documentation.

Property size

Type String

Accepted sm, md, lg

Default md

Description Sets the size of the textarea form component.

Property value

Type String

Description Sets the value of the textarea form component. To be provided using the v-model directive.

Slot prepend

Description Slot for textarea prepend content. Prepended content appears before the textarea inside a button-like container.

Slot append

Description Slot for textarea append content. Appended content appears after the textarea inside a button-like container.

Slot prefix

Description Slot for textarea prefix content. The prefix content appears inside the textarea field, on the left side.

Slot suffix

Description Slot for textarea suffix content. The suffix content appears inside the textarea field, on the right side.

Event click

Type (event: Event) => {}

Description Emitted when textarea form component is clicked.

Event focus

Type (event: Event) => {}

Description Emitted when textarea form component is focused.

Event blur

Type (event: Event) => {}

Description Emitted when textarea form component is blurred.

Event change

Type (value: String) => {}

Description Emitted when textarea form component value changes.

Event input

Type (value: String) => {}

Description Emitted when textarea form component value changes.

Event mouseenter

Type (value: String) => {}

Description Emitted when textarea form component is hovered.

Event mouseleave

Type (value: String) => {}

Description Emitted when textarea form component is not hovered anymore.

Sass Variables

Modifying the Input Component Sass Variables will also change the Number Input component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.