Textarea

Displays a form textarea field or a component that looks like a textarea.

import { component$ } from '@builder.io/qwik';
import { Textarea } from '~/components/ui';

export default component$(() => {
  return <Textarea placeholder="Type your message here." />;
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add textarea

import { $, component$, type PropsOf } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
type TextareaProps = PropsOf<'textarea'> & {
  error?: string;
};
 
export const Textarea = component$<TextareaProps>(
  ({ id, name, error, ['bind:value']: valueSig, value, onInput$, ...props }) => {
    const textareaId = id || name;
    return (
      <>
        <textarea
          {...props}
          // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
          value={valueSig ? valueSig.value : value}
          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
          class={cn(
            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
            props.class,
          )}
          id={textareaId}
        />
        {error && <div id={`${textareaId}-error`}>{error}</div>}
      </>
    );
  },
);

Usage

import { Textarea } from '~/components/ui';

<Textarea />

Examples

Disabled

import { component$ } from '@builder.io/qwik';
import { Textarea } from '@qwik-ui/styled';

export default component$(() => {
  return <Textarea placeholder="Type your message here." disabled />;
});

With Label

Your message

import { component$ } from '@builder.io/qwik';
import { Label, Textarea } from '~/components/ui';

export default component$(() => {
  return (
    <div class="grid w-full gap-1.5">
      <Label for="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  );
});

With button

import { component$ } from '@builder.io/qwik';
import { Button, Textarea } from '~/components/ui';

export default component$(() => {
  return (
    <div class="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button class="ml-auto w-40">Send message</Button>
    </div>
  );
});

With text

Your Message

Your message will be copied to the support team.

import { component$ } from '@builder.io/qwik';
import { Label, Textarea } from '~/components/ui';

export default component$(() => {
  return (
    <div class="grid w-full gap-1.5">
      <Label for="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p class="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  );
});

Data binding

Your email is: [email protected]

import { component$, useSignal } from '@builder.io/qwik';
import { Textarea, Label } from '~/components/ui';

export default component$(() => {
  const valueSig = useSignal('[email protected]');
  return (
    <div class="grid w-full max-w-sm items-center gap-1.5">
      <Label for="email-2">Email</Label>
      <Textarea id="email-2" placeholder="Email" bind:value={valueSig} />
      <p class="text-sm text-muted-foreground">Your email is: {valueSig.value}</p>
    </div>
  );
});