# Textarea

Multi-line text input control

# Most common usage scenario

<template>
  <div style="padding-top: 20px;">
    <SfTextarea
      v-model="value"
      :cols="cols"
      :rows="rows"
      :minlength="minlength"
      :maxlength="maxlength"
      :label="label"
      :name="name"
      :wrap="wrap"
      :valid="valid"
      :error-message="errorMessage"
      :required="required"
      :disabled="disabled"
      :placeholder="placeholder"
    />
  </div>
</template>
<script>
import { SfTextarea } from "@storefront-ui/vue";
export default {
  components: {
    SfTextarea,
  },
  data() {
    return {
      value: "",
      label: "First name",
      name: "first-name",
      cols: "40",
      rows: "10",
      minlength: "",
      maxlength: "",
      wrap: "soft",
      errorMessage: "Required.",
      valid: true,
      required: true,
      disabled: false,
      placeholder: "",
    };
  },
};
</script>

# Props

  • value

    • Current textarea value (v-model).
    • type: string|number
    • defaultValue: ""
  • label

    • Textarea label.
    • type: string
    • defaultValue: ""
  • name

    • Textarea name.
    • type: string
    • defaultValue: ""
  • cols

    • The visible width of the text control. It must be a positive integer. If it is not specified, the default value is 20.
    • type: string|number
    • defaultValue: "20"
  • rows

    • The number of visible text lines for the control.
    • type: string|number
    • defaultValue: ""
  • maxlength

    • The maximum number of characters that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
    • type: string|number
    • defaultValue: ""
  • minlength

    • The minimum number of characters required that the user should enter.
    • type: string|number
    • defaultValue: ""
  • wrap

    • Indicates how the control wraps text. Possible values are soft, hard, off. Default value is soft.
    • type: string
    • defaultValue: "soft"
  • readonly

    • With default false value the textarea is editable.
    • type: boolean
    • defaultValue: false
  • valid

    • Validate value of textarea.
    • type: boolean
    • defaultValue: true
  • errorMessage

    • Error message for textarea. It will be appeared if valid is true.
    • type: string
    • defaultValue: ""
  • required

    • Native textarea required attribute.
    • type: boolean
    • defaultValue: false
  • placeholder

    • Placeholder for textarea.
    • type: string
    • defaultValue: ""
  • disabled

    • Native textarea disabled attribute.
    • type: boolean
    • defaultValue: false

# Slots

  • label

    • Custom input label
    • bindings: label
  • error-message

    • Custom error message
    • bindings: errorMessage

# Events

  • input

# CSS modifiers

  • .sf-textarea--has-text
  • .sf-textarea--invalid

# CSS custom properties (variables)

  • --textarea-position
  • --textarea-resize
  • --textarea-color
  • --textarea-font
  • --textarea-font-weight
  • --textarea-font-size
  • --textarea-font-line-height
  • --textarea-font-family
  • --textarea-height
  • --textarea-width
  • --textarea-padding
  • --textarea-border
  • --textarea-border-width
  • --textarea-label-font
  • --textarea-label-font-weight
  • --textarea-label-font-size
  • --textarea-label-font-line-height
  • --textarea-label-font-family
  • --textarea-label-position
  • --textarea-label-padding
  • --textarea-label-top
  • --textarea-label-bottom
  • --textarea-label-left
  • --textarea-label-right
  • --textarea-label-transform
  • --textarea-label-color
  • --textarea-label-transition
  • --textarea-label-required
  • --textarea-error-message-color
  • --textarea-error-message-font
  • --textarea-error-message-font-weight
  • --textarea-error-message-font-size
  • --textarea-error-message-font-line-height
  • --textarea-error-message-font-family

# Overridden other components CSS variables

  • --textarea-border-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.