Skip to main content

Textarea

A basic widget for getting the user text or messages.

import { Textarea } from 'rizzui/textarea';

Default​

The default style of Textarea component.

import { Textarea } from 'rizzui/textarea';

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

Variants​

You can change the style of Textarea using variant property.

import { Textarea } from 'rizzui/textarea';

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.

import { Textarea } from 'rizzui/textarea';

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" />
    </>
  );
}

With Custom Rows & Cols​

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

import { Textarea } from 'rizzui/textarea';

export default function App() {
  return (
    <Textarea
      rows={6}
      cols={50}
      label="Message"
      placeholder="Enter your message"
      textareaClassName="overflow-y-auto w-full md:w-auto"
      defaultValue="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?"
    />
  );
}

With Character Count​

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

'use client';

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.

'use client';

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 disabled state of Textarea using disabled property.

'use client';

import { Textarea } from 'rizzui/textarea';

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.

This is helper text.
import { Textarea } from 'rizzui/textarea';

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.

import { Textarea } from 'rizzui/textarea';

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.

PropsTypeDescriptionDefault
labelReactNodeSet field label__
labelWeightLabelWeightSet label font weight"medium"
variantTextareaVariantsThe variants of the component are:"outline"
sizeTextareaSizesThe size of the component. "sm" is equivalent to the dense input styling."md"
childrenReactNodeDefault value in textarea__
colsnumberSet custom cols__
rowsnumberSet custom rows5
placeholderstring__
disabledbooleanWhether the textarea is disabled__
errorstringShow error message using this prop__
helperTextReactNodeAdd helper text. Can be a string or a React component__
clearablebooleanAdd clearable option__
onClearTextareaOnClearCallback function called when the clear button is clicked__
renderCharacterCountTextareaRenderCharacterCountUse this prop to show character count limit__
labelClassNamestringUse labelClassName prop to do some additional style for the label__
textareaClassNamestringAdd custom classes for the input field extra style__
helperClassNamestringThis prop allows you to customize the helper message style__
errorClassNamestringThis prop allows you to customize the error message style__
classNamestringAdd custom classes to the root of the component__
refRef<HTMLTextAreaElement>__
...TextareaHTMLAttributesnative 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';

Textarea onClear​

type TextareaOnClear = (event) => void;

Textarea Render Character Count​

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