Zaidan

Command Palette

Search for a command to run...

GitHub43

Textarea

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

Installation

CLI

Manual

Copy and paste the following code into your project.

import { type ComponentProps, splitProps } from "solid-js";


import { cn } from "~/lib/utils";


type TextareaProps = ComponentProps<"textarea">;


const Textarea = (props: TextareaProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <textarea
      data-slot="textarea"
      class={cn(
        "field-sizing-content z-textarea flex min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        local.class,
      )}
      {...others}
    />
  );
};


export { Textarea, type TextareaProps };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Textarea } from "~/components/ui/textarea";
function TextareaBasic() {
  return (
    <Example title="Basic">
      <Textarea placeholder="Type your message here." />
    </Example>
  );
}

Invalid

import { Textarea } from "~/components/ui/textarea";
function TextareaInvalid() {
  return (
    <Example title="Invalid">
      <Textarea placeholder="Type your message here." aria-invalid="true" />
    </Example>
  );
}

With Label

import { Field, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";
function TextareaWithLabel() {
  return (
    <Example title="With Label">
      <Field>
        <FieldLabel for="textarea-demo-message">Message</FieldLabel>
        <Textarea id="textarea-demo-message" placeholder="Type your message here." rows={6} />
      </Field>
    </Example>
  );
}

With Description

import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";
function TextareaWithDescription() {
  return (
    <Example title="With Description">
      <Field>
        <FieldLabel for="textarea-demo-message-2">Message</FieldLabel>
        <Textarea id="textarea-demo-message-2" placeholder="Type your message here." rows={6} />
        <FieldDescription>Type your message and press enter to send.</FieldDescription>
      </Field>
    </Example>
  );
}

Disabled

import { Field, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";
function TextareaDisabled() {
  return (
    <Example title="Disabled">
      <Field>
        <FieldLabel for="textarea-demo-disabled">Message</FieldLabel>
        <Textarea id="textarea-demo-disabled" placeholder="Type your message here." disabled />
      </Field>
    </Example>
  );
}
PreviewDocs