import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as m,d as x,o as E,c as y,k as p,t as _,n as b,l,a0 as A,a5 as k,L as D,r as T,e as V,h as g,H as o,w as c,a as i,X as h,Q as q}from"./chunks/framework.3f630664.js";import{s as S}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as u}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as P}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as z}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";const I="block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600",M="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",W="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="block py-2 px-3 border-gray-200 dark:border-gray-600";function $(t){const a=m(()=>S(M,t?"bg-white dark:bg-gray-800 border-none":"border")),e=m(()=>W),n=m(()=>t?I:""),s=m(()=>j);return{textareaClasses:a,labelClasses:e,wrapperClasses:n,footerClasses:s}}const Y=["rows","placeholder"],F=x({inheritAttrs:!1,__name:"FwbTextarea",props:{modelValue:{default:""},label:{default:"Your message"},rows:{default:4},custom:{type:Boolean,default:!1},placeholder:{default:"Write your message here..."}},emits:["update:modelValue"],setup(t,{emit:a}){const e=t,n=a,s=m({get(){return e.modelValue},set(r){n("update:modelValue",r)}}),{textareaClasses:d,labelClasses:f,wrapperClasses:v,footerClasses:w}=$(e.custom);return(r,C)=>(E(),y("label",null,[p("span",{class:b(l(f))},_(r.label),3),p("span",{class:b(l(v))},[A(p("textarea",D({"onUpdate:modelValue":C[0]||(C[0]=B=>s.value=B)},r.$attrs,{class:l(d),rows:r.rows,placeholder:r.placeholder}),null,16,Y),[[k,s.value]]),r.$slots.footer?(E(),y("span",{key:0,class:b(l(w))},[T(r.$slots,"footer")],2)):V("",!0)],2)]))}}),N={class:"vp-raw"},R={__name:"FwbTextareaExample",setup(t){const a=g("");return(e,n)=>(E(),y("div",N,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:4,label:"Your message",placeholder:"Write your message..."},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={class:"flex items-center justify-between"},O={class:"flex"},G=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13","stroke-linecap":"round","stroke-linejoin":"round"})],-1),H=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M15 10.5a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"}),p("path",{d:"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),J=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Q={class:"ml-auto text-xs text-gray-500 dark:text-gray-400"},X={__name:"FwbTextareaExampleComment",setup(t){const a=g("");return(e,n)=>(E(),y("div",U,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:3,custom:"",label:"Your message",placeholder:"Write your message..."},{footer:c(()=>[p("div",L,[o(l(u),{type:"submit"},{default:c(()=>[i(" Post comment ")]),_:1}),p("div",O,[o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[G]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[H]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[J]),_:1})])])]),_:1},8,["modelValue"]),p("p",Q,[i(" Remember, contributions to this topic should follow our "),o(l(P),{class:"underline",href:"#"},{default:c(()=>[i(" Community Guidelines ")]),_:1}),i(". ")])]))}},K={__name:"FwbTextareaExampleDisabled",setup(t){const a=g("Edit me!");return(e,n)=>(E(),y("form",{class:"vp-raw",onSubmit:n[3]||(n[3]=h(()=>{},["prevent"]))},[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),label:"Textarea with minlength 10 and maxlength 20",minlength:"10",maxlength:"20",required:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[1]||(n[1]=s=>a.value=s),label:"Disabled textarea",placeholder:"Cannot be edited",disabled:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[2]||(n[2]=s=>a.value=s),label:"Readonly textarea",placeholder:"Cannot be edited",readonly:""},null,8,["modelValue"]),o(l(u),{type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32))}},Z={class:"flex flex-col gap-y-4"},ss={__name:"FwbTextareaExampleFormId",setup(t){const a=g(""),e=g("");return(n,s)=>(E(),y("div",Z,[p("form",{id:"fwb-textarea-example-form-id",class:"vp-raw",onSubmit:s[1]||(s[1]=h(()=>{},["prevent"]))},[o(l(z),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=d=>a.value=d),label:"Input inside the form",placeholder:"Write your message..."},null,8,["modelValue"]),o(l(u),{class:"mt-2",type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32),o(l(F),{modelValue:e.value,"onUpdate:modelValue":s[2]||(s[2]=d=>e.value=d),label:"Textarea outside the form",form:"fwb-textarea-example-form-id",minlength:"20",required:""},null,8,["modelValue"])]))}},as=q('

Vue Textarea - Flowbite ​

Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants ​

TIP

Original reference: https://flowbite.com/docs/forms/textarea/

Textarea example ​

Get started with the default example of a textarea component below.

',6),ns=q(`
vue
<template>
  <fwb-textarea
    v-model="message"
    :rows="4"
    label="Your message"
    placeholder="Write your message..."
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbTextarea } from 'flowbite-vue'

const message = ref('')
</script>
<template>
  <fwb-textarea
    v-model="message"
    :rows="4"
    label="Your message"
    placeholder="Write your message..."
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbTextarea } from 'flowbite-vue'

const message = ref('')
</script>

Comment box ​

Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

`,3),ls=q(`
vue
<template>
  <div>
    <form>
      <fwb-textarea
        v-model="message"
        :rows="3"
        custom
        label="Your message"
        placeholder="Write your message..."
      >
        <template #footer>
          <div class="flex items-center justify-between">
            <fwb-button type="submit">
              Post comment
            </fwb-button>
            <div class="flex">
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
            </div>
          </div>
        </template>
      </Textarea>
    </form>
    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
      Remember, contributions to this topic should follow our
      <fwb-a href="#">Community Guidelines</fwb-a>.
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'

const message = ref('')
</script>
<template>
  <div>
    <form>
      <fwb-textarea
        v-model="message"
        :rows="3"
        custom
        label="Your message"
        placeholder="Write your message..."
      >
        <template #footer>
          <div class="flex items-center justify-between">
            <fwb-button type="submit">
              Post comment
            </fwb-button>
            <div class="flex">
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </fwb-button>
            </div>
          </div>
        </template>
      </Textarea>
    </form>
    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
      Remember, contributions to this topic should follow our
      <fwb-a href="#">Community Guidelines</fwb-a>.
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'

const message = ref('')
</script>

Disabled / Readonly Textarea ​

`,2),os=q(`
vue
<template>
  <div>
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      disabled
    />
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      readonly
    />
  </div>
</template>
<template>
  <div>
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      disabled
    />
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      readonly
    />
  </div>
</template>

Textarea with form ID ​

`,2),ps=q(`
vue
<template>
  <div>
    <form id="my-form" @submit.prevent="handleSubmit">
      <!-- Inside the form -->
      <fwb-textarea
        v-model="message"
        label="Your message"
        placeholder="Write your message..."
      />
      <fwb-button type="submit">
        Submit
      </fwb-button>
    </form>

    <!-- Outside the form -->
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      form="my-form"
      required
    />
  </div>
</template>
<template>
  <div>
    <form id="my-form" @submit.prevent="handleSubmit">
      <!-- Inside the form -->
      <fwb-textarea
        v-model="message"
        label="Your message"
        placeholder="Write your message..."
      />
      <fwb-button type="submit">
        Submit
      </fwb-button>
    </form>

    <!-- Outside the form -->
    <fwb-textarea
      v-model="message"
      label="Your message"
      placeholder="Write your message..."
      form="my-form"
      required
    />
  </div>
</template>
`,1),gs=JSON.parse('{"title":"Vue Textarea - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/textarea.md","filePath":"components/textarea.md"}'),es={name:"components/textarea.md"},qs=Object.assign(es,{setup(t){return(a,e)=>(E(),y("div",null,[as,o(R),ns,o(X),ls,o(K),os,o(ss),ps]))}});export{gs as __pageData,qs as default};