Textarea

Basics

Basics — see the example below.

tsx

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

export default component$(() => (
  <Textarea placeholder="Write a message…" rows={4} />
));

With a label

With a label — see the example below.

Message

tsx

import { Textarea } from "~/components/ui/base/textarea";
import { Label } from "~/components/ui/base/label";

<div class="flex max-w-md flex-col gap-2">
  <Label for="msg">Message</Label>
  <Textarea id="msg" name="message" placeholder="Content…" rows={5} />
</div>

Disabled resizing (disableResize)

The disableResize prop disables the native corner drag — useful for a fixed height or a flex layout.

Message (fixed height)

tsx

import { Textarea } from "~/components/ui/base/textarea";
import { Label } from "~/components/ui/base/label";

<div class="flex max-w-md flex-col gap-2">
  <Label for="fixed">Message (fixed height)</Label>
  <Textarea id="fixed" placeholder="Cannot be enlarged…" rows={4} disableResize />
</div>

States

disabled and readOnly — handle error states via class or a wrapper.

Read only

tsx

import { Textarea } from "~/components/ui/base/textarea";

<div class="flex max-w-md flex-col gap-3">
  <Textarea placeholder="Regular state" rows={3} />
  <Textarea disabled placeholder="Disabled" rows={3} />
  <Textarea readOnly value="Read only" rows={3} />
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/textarea/meta.generated.json not found or path not allowed.