Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

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.

Installation

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

qwik-ui add textarea
import { component$, PropsOf } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
type TextareaProps = PropsOf<'textarea'> & {
  error?: string;
};
 
export const Textarea = component$<TextareaProps>(({ name, error, ...props }) => {
  return (
    <>
      <textarea
        {...props}
        class={cn(
          'border-input placeholder:text-muted-foreground focus-visible:ring-ring [&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
          props.class,
        )}
      />
      {error && <div id={`${name}-error`}>{error}</div>}
    </>
  );
});

Usage

import { Textarea } from '@/components/ui/textarea';
<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

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

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 '@qwik-ui/styled';

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 will be copied to the support team.

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

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>
  );
});