Qwik 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.

To use the range component, you need to import it from flowbite-qwik :

import { Textarea } from "flowbite-qwik"

Default Textarea

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

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Textarea } from 'flowbite-qwik'

export default component$(() => {
  const textareaValue = useSignal('')

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <p class="mb-4 border-b border-gray-200 pb-4 text-sm dark:border-gray-800">Textarea value: {textareaValue}</p>

      <Textarea bind:value={textareaValue} label="Your message" placeholder="Type something here..." class="w-full" />
    </div>
  )
})

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.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Textarea, Button } from 'flowbite-qwik'
import { IconFileImportOutline, IconImageOutline, IconMapLocationOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  const textareaValue = useSignal('')

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Textarea
        bind:value={textareaValue}
        placeholder="Write a ccomment"
        class="w-full"
        footer={
          <div class="flex justify-between">
            <Button>Post comment</Button>
            <div class="flex space-x-1 ps-0 sm:ps-2 rtl:space-x-reverse">
              <button
                type="button"
                class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
              >
                <IconFileImportOutline class="h-4 w-4" />
              </button>
              <button
                type="button"
                class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
              >
                <IconMapLocationOutline class="h-4 w-4" />
              </button>
              <button
                type="button"
                class="inline-flex cursor-pointer items-center justify-center rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
              >
                <IconImageOutline class="h-4 w-4" />
              </button>
            </div>
          </div>
        }
      />
    </div>
  )
})

Disabled Textarea

Use the `disabled` prop to make the textarea component non-editable and non-interactive.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Textarea } from 'flowbite-qwik'

export default component$(() => {
  const textareaValue = useSignal('')

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Textarea bind:value={textareaValue} disabled label="Your message" placeholder="Type something here..." class="w-full" />
    </div>
  )
})

Required Textarea

Use the `required` prop to make the textarea component a required field inside a form.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Textarea } from 'flowbite-qwik'

export default component$(() => {
  const textareaValue = useSignal('')

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Textarea bind:value={textareaValue} required label="Your message" placeholder="Type something here..." class="w-full" />
    </div>
  )
})

Readonly Textarea

Use the `readonly` prop to make the textarea component non-editable but interactive.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Textarea } from 'flowbite-qwik'

export default component$(() => {
  const textareaValue = useSignal('Flowbite is awesome!')

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Textarea bind:value={textareaValue} readOnly label="Your message" placeholder="Type something here..." class="w-full" />
    </div>
  )
})