Textarea

Usage

textarea.tsx

import { Textarea } from "@uj-vilag/dap-components";

export default function TextareaExample() {
  return (
    <div>
      <Textarea
        placeholder="Enter text here"
        rootClassName="max-h-72 min-h-40"
      />
    </div>
  );
}

Props

This component renders a <textarea> element wrapped in a <div>, so all native textarea props are supported.

Prop

Type

Examples

Sizes

textarea-sizes.tsx

import { Textarea } from "@uj-vilag/dap-components";

export default function TextareaSizesExample() {
  return (
    <div className="flex flex-col gap-8">
      <Textarea
        size="large"
        placeholder="Large size"
        rootClassName="max-h-72"
      />
      <Textarea
        size="small"
        placeholder="Small size"
        rootClassName="max-h-72"
      />
    </div>
  );
}

Error

textarea-error.tsx

import { Textarea } from "@uj-vilag/dap-components";

export default function TextareaErrorExample() {
  return (
    <div className="p-28 py-32">
      <Textarea error placeholder="Error state" rootClassName="max-h-50" />
    </div>
  );
}

Disabled & Readonly

textarea-disabled-readonly.tsx

import { Textarea } from "@uj-vilag/dap-components";

export default function TextareaDisabledReadonlyExample() {
  return (
    <div className="flex flex-col gap-8">
      <Textarea
        disabled
        placeholder="Disabled state"
        rootClassName="max-h-50"
      />
      <Textarea
        readOnly
        placeholder="Readonly state"
        rootClassName="max-h-50"
      />
    </div>
  );
}

With Label & Feedback

Description

Provide a detailed description of the issue.

Description must be at least 50 characters long.

textarea-with-label-feedback.tsx

import { Textarea, Label, Feedback } from "@uj-vilag/dap-components";

export default function TextareaWithLabelFeedbackExample() {
  return (
    <div className="p-28 flex flex-col gap-8">
      <Label
        labelText="Description"
        requirement="required"
        htmlFor="description-input"
        helperText="Provide a detailed description of the issue."
      >
        <Textarea
          id="description-input"
          placeholder="Describe the issue you're experiencing..."
          rootClassName="max-h-50"
          aria-describedby="description-feedback description-input-helperText"
          error
        />
        <Feedback
          message="Description must be at least 50 characters long."
          id="description-feedback"
        />
      </Label>
    </div>
  );
}