components

Input Textarea

Textarea allows users to enter and edit multi-line text. Use textareas for longer-form content such as descriptions, notes, comments, and feedback. It supports labels, validation states, character limits, and required or optional indicators.

Import

import { InputTextarea } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Collect multi-line text like descriptions, notes, or comments.
+When the expected input is longer than a single line.

When not to use

−For single-line input — use InputText.
−For rich text editing — textarea is plain text only.

Examples

Code Samples

Default with Placeholder

A basic textarea with a label and placeholder text.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function DefaultTextarea() {
  return (
    <InputTextarea
      name="description"
      label="Description"
      placeholder="Enter a description..."
    />
  );
}

With Value

A textarea pre-filled with text content.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function TextareaWithValue() {
  return (
    <InputTextarea
      name="notes"
      label="Notes"
      value="These are some pre-filled notes for the record. You can edit this text as needed."
    />
  );
}

With Max Length

A textarea with a character limit. A character count indicator is displayed to the user.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function TextareaWithMaxLength() {
  return (
    <InputTextarea
      name="bio"
      label="Short Bio"
      placeholder="Tell us about yourself (max 200 characters)"
      maxlength={200}
    />
  );
}

Required

A textarea marked as required, showing a required indicator on the label.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function RequiredTextarea() {
  return (
    <InputTextarea
      name="feedback"
      label="Feedback"
      placeholder="Please provide your feedback"
      required
    />
  );
}

Optional

A textarea marked as optional, showing an optional indicator on the label.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function OptionalTextarea() {
  return (
    <InputTextarea
      name="comments"
      label="Additional Comments"
      placeholder="Any additional comments..."
      optional
    />
  );
}

Disabled

A disabled textarea that cannot be edited.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function DisabledTextarea() {
  return (
    <InputTextarea
      name="disabled-textarea"
      label="Disabled Textarea"
      value="This content cannot be edited."
      disabled
    />
  );
}

Invalid with Error

A textarea showing a validation error. Both invalid and error props are used together.

import { InputTextarea } from "@skedulo/breeze-ui-react";

export default function ErrorTextarea() {
  return (
    <InputTextarea
      name="message"
      label="Message"
      value="Hi"
      invalid
      error="Message must be at least 10 characters long"
    />
  );
}

Guidelines

Do

✓Set an appropriate initial rows count.
✓Use placeholder for format hints.
✓Use maxLength to limit input when appropriate.

Don't

✗Don't use textarea for short single-value inputs.
✗Don't hide the label — always provide one.

API Reference

Prop	Type	Default	Description
name*	string	—	The name attribute for the textarea element, used for form submission and accessibility.
label	string	—	A visible label displayed above the textarea.
placeholder	string	—	Hint text displayed when the textarea is empty.
value	string	—	The current text value of the textarea.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
invalid	boolean	false	Marks the textarea as invalid, applying an error visual style. Use together with the error prop to display a message.
error	string	—	An error message displayed below the textarea. Should be used together with the invalid prop.
required	boolean	false	Marks the field as required, displaying a required indicator alongside the label.
optional	boolean	false	Marks the field as optional, displaying an optional indicator alongside the label.
maxlength	number	—	The maximum number of characters allowed. When set, a character count indicator is displayed.
onChange	(value: string) => void	—	Callback fired when the textarea value changes.

Related Components

Input Text LabeledInput