Textarea

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

The textarea component is a multi-line text field input that can be used to receive longer chuncks of text from the user in the form of a comment box, description field, and more.

Setup

<script>
  import { Textarea } from 'flowbite-svelte'
</script>

Textarea examples

<script>
...
let textareaprops = {
  id: 'message',
  name: 'message',
  label: 'Your message',
  rows: 4,
  placeholder: 'Leave a comment...',
};
</script>

<Textarea {...textareaprops} />

Props

The component has the following props, type, and default values. See types page for type information.

Name Type Default
value string ''
id string generateId()
name string 'message'
label string 'Your message'
rows number 4
placeholder string 'Leave a comment...'
labelClass string 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400'
textareaClass string 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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'
helper string ''
helperClass string 'mt-2 text-sm text-gray-500 dark:text-gray-400'

Forwarded Events

on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste

References