Textarea

A basic widget for getting the user text or messages.

import { Textarea } from "rizzui";

Default

The default style of Textarea component.

Message

import { Textarea } from "rizzui";

export default function App() {
  return <Textarea label="Message" placeholder="Write you message..." />;
}

Variants

You can change the style of Textarea using variant property.

Outline

Flat

Text

import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea label="Outline" placeholder="Enter your message" />
      <Textarea label="Flat" variant="flat" placeholder="Enter your message" />
      <Textarea label="Text" variant="text" placeholder="Enter your message" />
    </>
  );
}

Sizes

You can change the style of Textarea using size property.

Small

Default

Large

Extra Large

import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea label="Small" placeholder="Enter your message" size="sm" />
      <Textarea label="Default" placeholder="Enter your message" />
      <Textarea label="Large" placeholder="Enter your message" size="lg" />
      <Textarea
        label="Extra Large"
        placeholder="Enter your message"
        size="xl"
      />
    </>
  );
}

Rounded

You can change the style of Textarea using rounded property.

Rounded Small

Rounded Default

Rounded Large

Rounded Extra Large

Rounded None

import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea
        label="Rounded Small"
        placeholder="Enter your message"
        rounded="sm"
      />
      <Textarea label="Rounded Default" placeholder="Enter your message" />
      <Textarea
        label="Rounded Large"
        placeholder="Enter your message"
        rounded="lg"
      />
      <Textarea
        label="Rounded Extra Large"
        placeholder="Enter your message"
        rounded="xl"
      />
      <Textarea
        label="Rounded None"
        placeholder="Enter your message"
        rounded="none"
      />
    </>
  );
}

With Custom Rows & Cols

You can change rows and cols of Textarea using rows & cols property.

MessageLorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius soluta! Quibusdam debitis natus optio quasi assumenda provident dolores animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius soluta! Quibusdam debitis natus optio quasi assumenda provident dolores animi?

import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      rows={4}
      cols={50}
      label="Message"
      placeholder="Enter your message"
    >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
      architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius
      soluta! Quibusdam debitis natus optio quasi assumenda provident dolores
      animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
      architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius
      soluta! Quibusdam debitis natus optio quasi assumenda provident dolores
      animi?
    </Textarea>
  );
}

With Character Count

You can set character limit and show character counter of Textarea using maxLength & renderCharacterCount property.

MessageDo not lose hope, nor be sad.

29/100

import { useState } from "react";
import { Textarea } from "aegon-ui";

export default function App() {
  const [state, setState] = useState("Do not lose hope, nor be sad.");

  return (
    <Textarea
      label="Message"
      value={state}
      maxLength={100}
      onChange={(e) => setState(e.target.value)}
      renderCharacterCount={({ characterCount, maxLength }) => (
        <div className="text-right text-sm opacity-70 rtl:text-left">
          {characterCount}/{maxLength}
        </div>
      )}
    />
  );
}

With Clearable Button

You can add a clear button of Textarea using clearable property.

MessageIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

import { useState } from "react";
import { Textarea } from "aegon-ui";

export default function App() {
  const [state, setState] = useState(
    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
  );

  return (
    <Textarea
      label="Message"
      clearable
      value={state}
      onClear={() => setState("")}
      onChange={(e) => setState(e.target.value)}
    />
  );
}

Disabled

You can change disable state of Textarea using disabled property.

Message

import { Textarea } from "rizzui";

export default function App() {
  return <Textarea disabled label="Message" placeholder="Enter your message" />;
}

With Helper Text

You can add helper text to Textarea using helperText property.

Message

This is helper text.

import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      placeholder="Enter your message"
      helperText="This is helper text."
    />
  );
}

With Error Message

You can show the validation error message using error property.

Message

This field is required

import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      error="This field is required"
      placeholder="Enter your message"
    />
  );
}

API Reference

---

Textarea Props

Here is the API documentation of the Textarea component. And the rest of the props are the same as the original html textarea field.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
variant	TextareaVariants	The variants of the component are:	"outline"
size	TextareaSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	TextareaRounded	The rounded variants are:	"md"
children	ReactNode	Default value in textarea	__
cols	number	Set custom cols	__
rows	number	Set custom rows	5
placeholder	string		__
disabled	boolean	Whether the textarea is disabled	__
error	string	Show error message using this prop	__
helperText	ReactNode	Add helper text. It could be string or a React component	__
clearable	boolean	add clearable option	__
onClear	TextareaOnclear	clear event	__
renderCharacterCount	TextareaRenderCharacterCount	Use this prop to show character count limit	__
labelClassName	string	Use labelClassName prop to do some addition style for the label	__
textareaClassName	string	Add custom classes for the input filed extra style	__
helperClassName	string	This prop allows you to customize the helper message style	__
errorClassName	string	This prop allows you to customize the error message style	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLTextAreaElement>		__
...	TextareaHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Textarea Variants

type TextareaVariants = "outline" | "flat" | "text";

Label Weight

type LabelWeight = "normal" | "medium" | "semibold" | "bold";

Textarea Sizes

type TextareaSizes = "sm" | "md" | "lg" | "xl";

Textarea Rounded

type TextareaRounded = "sm" | "md" | "lg" | "xl" | "none";

Textarea onClear

type TextareaOnclear = (event) => void;

Textarea Render Character Count

type TextareaRenderCharacterCount =
  | (({
      characterCount,
      maxLength,
    }: {
      characterCount?: number;
      maxLength?: number;
    }) => ReactNode)
  | undefined;