Textarea

A text area refers to a multi-line text input field within a graphical user interface or a web form.

Sizes

  • Textarea supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function Sizes() {
  return (
    <div className="flex flex-row gap-4">
      <Textarea placeholder="Large size" size="lg" />
      <Textarea placeholder="Medium size" size="md" />
      <Textarea placeholder="Small size" size="sm" />
    </div>
  );
}
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function ResponsiveSize() {
  return <Textarea placeholder="Responsive size" size="responsive" />;
}

Full width

  • Full width can be enabled by setting fullWidth prop to true.

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function Fullwidth() {
  return <Textarea fullWidth placeholder="Full width" />;
}

Disabled

  • Disabled state can be enabled by setting disabled prop to true.
Helper Text
Helper Text

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function Disabled() {
  return (
    <div className="flex flex-col gap-y-4">
      <div className="flex gap-x-4 w-full">
        <div className="flex items-start">
          <Textarea
            id="labelDisabled"
            placeholder="With labelText"
            disabled
            label={<span>Label</span>}
  • Readonly can be enabled by setting readOnly prop to true.

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function Readonly() {
  return <Textarea readOnly value="Readonly" />;
}

State

  • Currently, Textarea supports 3 state is error, warning and success and can be changed by passing the state prop.
Helper Text
Helper Text0/500
Helper Text
Helper Text0/500
Helper Text
Helper Text0/500

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function States() {
  return (
    <div className="flex flex-col gap-y-4 w-full">
      <div className="flex gap-x-4 w-full">
        <div className="flex items-start">
          <Textarea
            id="labelError"
            placeholder="With labelText"
            state="error"
            label={<span>Label</span>}

Resizable

  • The resizable prop controls how the textarea can be resized by the user.
  • Supported values:
    • false (default): Textarea cannot be resized
    • true or 'both': Textarea can be resized both vertically and horizontally
    • 'vertical': Textarea can only be resized vertically
    • 'horizontal': Textarea can only be resized horizontally
  • The resizable will be disabled when disabled or readOnly props are set to true.

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function Resizable() {
  return (
    <div className="flex flex-col gap-y-4">
      <Textarea label="Resizable (both)" resizable />
      <Textarea label="Resizable 'vertical'" resizable="vertical" />
      <Textarea label="Resizable 'horizontal'" resizable="horizontal" />
      <Textarea label="Not resizable" />
    </div>
  );
}

With Label

  • Textarea supports adding Label and HelperText slots.
  • Label text can be added via the label prop of Textarea component.
  • Helper text can be added via the helperText prop of Textarea component.
Helper Text0/500
Helper Text0/500

Source Code

import { Textarea } from '@ocean-network-express/magenta-ui/react';

export function WithLabel() {
  return (
    <div className="flex gap-x-4 w-full">
      <div className="flex items-start ">
        <Textarea id="label" label={<span>Label</span>} placeholder="With labelText" />
      </div>
      <div className="flex items-end ">
        <Textarea
          helperText={<span>Helper Text</span>}
          label={<span>Label</span>}
  • Textarea component allows to include additional content with the main label.
    • You can use the labelPrefix prop to place content before the main label text, such as an icon (e.g., a search 🔍 icon) or a short word.
    • For content that should appear after the main label, like units (e.g., (MB)), an info icon (ⓘ), or other helpful details, use the labelSuffix prop.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Textarea,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@ocean-network-express/magenta-ui/react';

export function LabelWithTooltip() {
  return (
    <div className="flex gap-x-4">
      <Textarea

Helper Text

  • Helper text can be changed by passing the helperText prop.
  • The helper text can be displayed in 2 ways: inline and tooltip and can be changed by passing the renderHelperType prop.

Inline

Error message goes here
Warning message goes here
Success message goes here

Tooltip

Source Code

import { Text, Textarea } from '@ocean-network-express/magenta-ui/react';

export function HelperText() {
  return (
    <div className="flex flex-col gap-12">
      <div>
        <Text size="lg" level="h5">
          Inline
        </Text>
        <div className="flex gap-x-4 w-full">
          <div className="flex items-start ">
            <Textarea

Max Length

  • Max length can be set by passing the maxLength prop.
  • Setting the maxLength prop will show a counter below the textarea.
0/500

Source Code

import { Button, Textarea } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function MaxLength() {
  const [value, setValue] = useState('');

  // Simple random text generator for demo (replace with faker if available)
  function getRandomText() {
    const samples = [
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',

Character Counting Rule

  • Basic Latin characters: Each common letter, number, symbol or punctuation will count as 1 character.
  • Space (’ ’): A space between words is counted as 1 character.
  • Newlines (\n): A newline character is counted as 1 character.

Was this page helpful?