Svelte 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

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

Setup #

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

Textarea example #

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

  • Svelte
<script>
  import { Textarea, Label } from 'flowbite-svelte';
</script>

<Label for="textarea-id" class="mb-2">Your message</Label>
<Textarea id="textarea-id" placeholder="Your message" rows="4" name="message" />

WYSIWYG Editor #

If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.

  • Svelte
<script>
  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
  import { PaperClipOutline, MapPinAltSolid, ImageOutline, CodeOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
</script>

<form>
  <label for="editor" class="sr-only">Publish post</label>
  <Textarea id="editor" rows="8" class="mb-4" placeholder="Write a comment">
    <Toolbar slot="header" embedded>
      <ToolbarGroup>
        <ToolbarButton name="Attach file"><PaperClipOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
        <ToolbarButton name="Embed map"><MapPinAltSolid class="w-5 h-5" /></ToolbarButton>
        <ToolbarButton name="Upload image"><ImageOutline class="w-5 h-5" /></ToolbarButton>
      </ToolbarGroup>
      <ToolbarGroup>
        <ToolbarButton name="Format code"><CodeOutline class="w-5 h-5" /></ToolbarButton>
        <ToolbarButton name="Add emoji"><FaceGrinOutline class="w-5 h-5" /></ToolbarButton>
      </ToolbarGroup>
      <ToolbarButton name="send" slot="end"><PapperPlaneOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
    </Toolbar>
  </Textarea>
  <Button>Publish post</Button>
</form>

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.

Remember, contributions to this topic should follow our Community Guidelines .

  • Svelte
<script>
  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
  import { PaperClipOutline, MapPinAltSolid, ImageOutline } from 'flowbite-svelte-icons';
</script>

<form>
  <Textarea class="mb-4" placeholder="Write a comment">
    <div slot="footer" class="flex items-center justify-between">
      <Button type="submit">Post comment</Button>
      <Toolbar embedded>
        <ToolbarButton name="Attach file"><PaperClipOutline class="w-6 h-6" /></ToolbarButton>
        <ToolbarButton name="Set location"><MapPinAltSolid class="w-6 h-6" /></ToolbarButton>
        <ToolbarButton name="Upload image"><ImageOutline class="w-6 h-6" /></ToolbarButton>
      </Toolbar>
    </div>
  </Textarea>
</form>
<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
  Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline"> Community Guidelines </a>
  .
</p>

Chatroom input #

If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.

  • Svelte
<script>
  import { Textarea, Alert, ToolbarButton } from 'flowbite-svelte';
  import { ImageOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
</script>

<form>
  <label for="chat" class="sr-only">Your message</label>
  <Alert color="dark" class="px-3 py-2">
    <svelte:fragment slot="icon">
      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
        <ImageOutline class="w-5 h-5" />
        <span class="sr-only">Upload image</span>
      </ToolbarButton>
      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
        <FaceGrinOutline class="w-5 h-5" />
        <span class="sr-only">Add emoji</span>
      </ToolbarButton>
      <Textarea id="chat" class="mx-4" rows="1" placeholder="Your message..." />
      <ToolbarButton type="submit" color="blue" class="rounded-full text-primary-600 dark:text-primary-500">
        <PapperPlaneOutline class="w-5 h-5 rotate-45" />
        <span class="sr-only">Send message</span>
      </ToolbarButton>
    </svelte:fragment>
  </Alert>
</form>

Props #

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

Use the class prop to overwrite the textarea tag.

Name Type Default
value any undefined
wrappedClass string 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0'
unWrappedClass string 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500'
innerWrappedClass string 'py-2 px-4 bg-white dark:bg-gray-800'

Forwarded Events #

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

References #

Select Toggle