Textarea

A multi-line text input component, ready for CMS integration.

CMSPayload CMS Integration

Textarea fields can be configured through CMS, allowing content editors to customize labels, placeholders, and validation requirements without code changes.

CMS Demo

See how content editors configure textarea fields in a CMS:

Message *Maximum 500 characters

CMS FieldsEN

Label

Placeholder

Help Text

Rows

Required

Disabled

This simulates how a content editor configures textareas in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS textarea fields with localization

Payload Form Example

// In your Payload CMS form config
export const FeedbackForm = {
  slug: "feedback-form",
  fields: [
    {
      name: "messageField",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "placeholder", type: "text", localized: true },
        { name: "helpText", type: "text", localized: true },
        { name: "rows", type: "number", defaultValue: 4 },
        { name: "required", type: "checkbox" },
      ],
    },
  ],
}

Rendering the Form

import { Textarea } from "@mordecai-design-system/ui"

export function FeedbackForm({ data }) {
  const field = data.messageField
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">
        {field.label}
        {field.required && <span className="text-destructive ml-1">*</span>}
      </label>
      <Textarea
        placeholder={field.placeholder}
        rows={field.rows}
        required={field.required}
      />
      {field.helpText && (
        <p className="text-xs text-muted-foreground">{field.helpText}</p>
      )}
    </div>
  )
}

Basic Usage

TextareaA default textarea

Installation

pnpm add @corew500/ui

Usage

import { Textarea } from "@mordecai-design-system/ui"

<Textarea placeholder="Type your message here..." />

Examples

With Label

import { Textarea } from "@mordecai-design-system/ui"
import { Label } from "@mordecai-design-system/ui"

<div className="grid gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea id="message" placeholder="Type your message..." />
</div>

Disabled

<Textarea disabled placeholder="This textarea is disabled" />

With Default Value

<Textarea defaultValue="Lorem ipsum dolor sit amet..." />

Props

Prop	Type	Default	Description
`size`	enum	`"default"`	Size variant affecting minimum height.