WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

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: test@test.com

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

export default component$(() => {
  const valueSig = useSignal('test@test.com');
  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>
  );
});