Textarea

Bundle size

A Textarea Component in UI refers to a user interface element that allows users to input and display multiline text. It is commonly used in forms, comments sections, or any scenario where users need to provide or edit text content that spans multiple lines. Unlike a single-line input field, a textarea provides a larger area for users to enter and edit text, making it suitable for longer messages or paragraphs.

Uncontrolled

Description

This is a hint text to help user.

"use client";

import * as TextArea from "@lora-ui/textarea";

export default function Uncontrolled() {
  function onValueChange(value) {
    console.log(value);
  }
  return (
    <div className="mx-auto flex flex-col">
      <label
        htmlFor="uncontrolled-textarea-1"
        className="mb-[6px] text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
      >
        Description
      </label>
      <TextArea.Root
        id="uncontrolled-textarea-1"
        defaultValue=""
        onValueChange={onValueChange}
        className="box-border flex h-[130px] w-full items-center rounded-xl border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-3 text-base font-normal text-[#101828] placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c]"
        placeholder="Enter a description..."
      />
      <p className="mt-[6px] text-sm font-normal text-[#475467] dark:text-[#94969c]">
        This is a hint text to help user.
      </p>
    </div>
  );
}

Controlled

Description

This is a hint text to help user.

"use client";

import React from "react";
import * as TextArea from "@lora-ui/textarea";

export default function Controlled() {
  const [value, setValue] = React.useState("");
  function onValueChange(value) {
    console.log(value);
    setValue(value);
  }
  return (
    <div className="mx-auto flex flex-col">
      <label
        htmlFor="controlled-textarea-1"
        className="mb-[6px] text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
      >
        Description
      </label>
      <TextArea.Root
        id="controlled-textarea-1"
        value={value}
        onValueChange={onValueChange}
        className="box-border flex h-[130px] w-full items-center rounded-xl border border-[#d0d5dd] bg-[#ffffff] px-[14px] py-3 text-base font-normal text-[#101828] placeholder:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c]"
        placeholder="Enter a description..."
      />
      <p className="mt-[6px] text-sm font-normal text-[#475467] dark:text-[#94969c]">
        This is a hint text to help user.
      </p>
    </div>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/textarea

API Reference

Root

Prop	Type	Default	Explanation
isDisabled	Boolean	false
isRequired	Boolean	false

Keyboard

Command	Description
Tab	Move focus to the next focusable element
Shift+Tab	Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.