Textarea | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/textarea

pnpm dlx shadcn@latest add @cortexcn/textarea

Usage

import { Textarea } from "@/components/textarea";

Examples

Basic

import { Textarea } from "@/components/textarea"

export function TextareaBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Textarea placeholder="Type your message here." />
    </div>
  )
}

import { Textarea } from "@/components/textarea"export function TextareaBasic() {  return (    <div className="flex flex-col gap-6">      <Textarea placeholder="Type your message here." />    </div>  )}

Invalid

import { Textarea } from "@/components/textarea"

export function TextareaInvalid() {
  return (
    <div className="flex flex-col gap-6">
      <Textarea placeholder="Type your message here." aria-invalid="true" />
    </div>
  )
}

import { Textarea } from "@/components/textarea"export function TextareaInvalid() {  return (    <div className="flex flex-col gap-6">      <Textarea placeholder="Type your message here." aria-invalid="true" />    </div>  )}

With label

import { Field, FieldLabel } from "@/components/field"
import { Textarea } from "@/components/textarea"

export function TextareaWithLabel() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>
        <Textarea
          id="textarea-demo-message"
          placeholder="Type your message here."
          rows={6}
        />
      </Field>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Textarea } from "@/components/textarea"export function TextareaWithLabel() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>        <Textarea          id="textarea-demo-message"          placeholder="Type your message here."          rows={6}        />      </Field>    </div>  )}

With description

import { Field, FieldDescription, FieldLabel } from "@/components/field"
import { Textarea } from "@/components/textarea"

export function TextareaWithDescription() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="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>
    </div>
  )
}

import { Field, FieldDescription, FieldLabel } from "@/components/field"import { Textarea } from "@/components/textarea"export function TextareaWithDescription() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="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>    </div>  )}

Disabled

import { Field, FieldLabel } from "@/components/field"
import { Textarea } from "@/components/textarea"

export function TextareaDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>
        <Textarea
          id="textarea-demo-disabled"
          placeholder="Type your message here."
          disabled
        />
      </Field>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Textarea } from "@/components/textarea"export function TextareaDisabled() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>        <Textarea          id="textarea-demo-disabled"          placeholder="Type your message here."          disabled        />      </Field>    </div>  )}

Adapted from the shadcn/ui Textarea (MIT).