Textarea 10.16.0

ARIA
RTL

A form control for editing multi-line text.

Default

"use client";

import { Textarea } from "@heathmont/moon-core-tw";

const Default = () => <Textarea />;

export default Default;

    Different states

    The Textarea component has three states: error, disabled, and readOnly. You can use these three boolean props to set the state of the Textarea. If you need to add a Hint component, you will need to add proper states for it also.

    "use client";

import { Hint, Textarea } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const States = () => (
  <div className="flex flex-wrap xl:flex-nowrap items-center justify-around gap-2 w-full">
    <div className="w-full">
      <Textarea disabled placeholder="Disabled" />
      <Hint disabled>Informative message holder</Hint>
    </div>
    <div className="w-full">
      <Textarea error placeholder="Error" />
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </div>
    <div className="w-full">
      <Textarea readOnly placeholder="Read only" />
      <Hint>Informative message holder</Hint>
    </div>
  </div>
);

export default States;

      With button

      You can employ the provided HTML template to incorporate a Button into the Textarea component. This is a straightforward HTML structure with some added styling. Feel free to customize it to suit your specific needs.

      "use client";

import { Button, Textarea } from "@heathmont/moon-core-tw";

const WithButton = () => (
  <div className="w-full relative">
    <Textarea
      placeholder="Text area with button"
      className="pb-0 border-b-[4.5rem] border-b-goku border-solid"
      rows={3}
    />
    <Button className="absolute start-4 bottom-4">Default</Button>
  </div>
);

export default WithButton;

        Customization

        The className property can be used to assign any CSS classes to the Textarea component, including resize.

        "use client";

import { Textarea } from "@heathmont/moon-core-tw";

const Customization = () => (
  <>
    <Textarea
      placeholder="Custom colors"
      className="outline-chichi hover:outline-piccolo focus:outline-krillin bg-roshi-10 text-krillin placeholder:text-whis"
    />
    <Textarea placeholder="Vertical and horizontal resize" className="resize" />
  </>
);

export default Customization;

          Textarea

          These are props specific to the Textarea component:

          Name
          Type
          Default
          className
          		string-
          error
          		boolean-