---
title: Textarea
desc: Form element that allows users to input and edit text or data into a website page.
ico: mdi:form-textarea
keywords:
  - input
  - longform
  - paragraph

props:
  - class: .prs-textarea
    type: component
    desc: For <textarea>

alert:
  ico: mdi:warning
  body: |
    **Note:**  
    This is a modifier of **.prs-input**. Please use [input](../input/) properties and then stack **.prs-textarea** on top just for **textarea** tags.

controls:
  - name: value
    type: text
    label: Value
    desc: Value text.
    default: ''

  - name: placeholder
    type: text
    label: Placeholder
    desc: Placeholder text.
    default: Textarea

  - name: variant
    type: radio
    label: Variant
    desc: Ghost is a border-less & background-less alternate display for extreme cases.
    default: default
    options:
      - default
      - ghost

  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup.
    default: default
    options:
      - default
      - focus
      - disabled

preview: |
  <div class="prs-form-control w-screen max-w-xs">
    <textarea
      id="preview-textarea"
      x-model="value"
      class="prs-input prs-textarea"
      :class="{
        'prs-input-ghost': variant === 'ghost',
        'prs-input_focus': state === 'focus',
      }"
      :placeholder="placeholder"
      :disabled="state === 'disabled'"
    ></textarea>
  </div>

code:
  html: |
    <textarea id="UNIQUE_ID" class="prs-input prs-textarea{ghost}{focus}" placeholder="{placeholder}"{disabled}>{value}</textarea>
  logic:
    value: "this.value"
    placeholder: "this.placeholder"
    ghost: "this.variant === 'ghost' ? ' prs-input-ghost' : ''"
    focus: "this.state === 'focus' ? ' prs-input_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"

---