Plus UI ↗️ Be Our Sponsor ↗️

Textarea

Text Entry, Redefined - Discover the Art of Expression with Our Textarea

Our textarea component is designed for expressive and effortless text input, offering a refined and user-friendly interface that empowers users to convey their thoughts with ease and style.

Anatomy

Featuring a resizable rectangular field, our textarea component allows users to input and edit multi-line text. Clear labels and an expansive input area contribute to an intuitive and visually pleasing design, ensuring a comfortable text entry experience.

Properties

Boasting essential properties such as "value" to manage the content, "rows" and "cols" for defining dimensions, and "placeholder" for providing hints, our textarea component offers a comprehensive set of features. Additionally, properties like "disabled" and "readonly" provide control over user interaction and content modification.

StatusStateSizeDisabledReadonly

Default

Default

Small

True

True

Error

Hover

Medium

False

False

Fill

Large

Fill-hover

Press

Status

The "status" denotes the visual status of the textarea, providing options such as default, error, and others, facilitating a dynamic and responsive user interface.

  • Default textarea signifies the standard appearance of the textarea when not interacting, establishing a baseline visual state.

  • Error textarea indicates the visual state of the textarea when an error condition is present, accompanied by relevant feedback, ensuring clear communication with users.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Default Textarea
const DefaultTextarea = () => (
  <PlusTextarea
    label="Label"
    caption="Enter your text here"
    placeholder="Placeholder"
  />  {/* Default textarea */}
);

// Error Textarea
const ErrorTextarea = () => (
  <PlusTextarea
    error
    label="Label"
    caption="This field has an error"
    placeholder="Placeholder"
  />  {/* Textarea with error */}
);

export default {
  DefaultTextarea,
  ErrorTextarea,
};

States

The "state" represents the visual and interactive state of the textarea, including default, hover, fill, fill-hover, and press states, contributing to an engaging user experience.

  • Default state textarea defines the standard appearance of the textarea when not actively engaged, ensuring a visually consistent interface.

  • Hover state textarea signifies the visual changes that occur when the user hovers over the textarea, providing responsive and interactive feedback.

  • Fill state textarea represents the appearance of the textarea when filled with content, offering a clear visual cue for user input.

  • Fill-hover state textarea combines the visual states of being filled with content and the user hovering over it, creating a dynamic and responsive interface.

  • Press state textarea denotes the visual changes that occur when the user clicks or taps on the textarea, providing immediate feedback during user interaction.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Empty Textarea
const EmptyTextarea = () => (
  <PlusTextarea
    label="Your Comments"
    caption="Please share your thoughts"
    placeholder="Type here..."
  />  {/* Empty textarea */}
);

// Filled Textarea
const FilledTextarea = () => (
  <PlusTextarea
    label="Your Comments"
    caption="Please share your thoughts"
    placeholder="Type here..."
    value="I love using Plus UI!"  {/* Textarea with pre-filled text */}
  />
);

export default {
  EmptyTextarea,
  FilledTextarea,
};

Size

The size property offers options for small, medium, and large textareas, accommodating various design preferences and layout requirements.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Small Textarea
const SmallTextarea = () => (
  <PlusTextarea
    label="Small Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="sm"
  />  {/* Small size textarea */}
);

// Medium Textarea
const MediumTextarea = () => (
  <PlusTextarea
    label="Medium Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="md"
  />  {/* Medium size textarea */}
);

// Large Textarea
const LargeTextarea = () => (
  <PlusTextarea
    label="Large Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="lg"
  />  {/* Large size textarea */}
);

export default {
  SmallTextarea,
  MediumTextarea,
  LargeTextarea,
};

Disabled

Disabled textarea restricts user interaction, preventing input and ensuring controlled behavior when needed.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Disabled Textarea
const DisabledTextarea = () => (
  <PlusTextarea
    label="Disabled Textarea"
    caption="This field is disabled"
    placeholder="Cannot enter text"
    disabled  {/* Disabled state */}
  />
);

export default DisabledTextarea;

Readonly

Read textarea makes the textarea non-editable, allowing users to view the content without the ability to modify it.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Readonly Textarea
const ReadonlyTextarea = () => (
  <PlusTextarea
    label="Readonly Textarea"
    caption="You can only read this field"
    placeholder="Read-only content"
    defaultValue="This field is readonly."
    readOnly  {/* Readonly state */}
  />
);

export default ReadonlyTextarea;

Required

The Required Text Area component in our UI library ensures that essential information is captured through a customizable text area, marked as required for form submissions. This component extends the standard text area functionality by adding a "required" attribute, indicating that users must input information before submitting the form.

import React from 'react';
import { PlusTextarea } from '@plusui/react';

// Required Textarea
const RequiredTextarea = () => (
  <PlusTextarea
    label="Comments"
    caption="This field is required"
    placeholder="Enter your comments..."
    required  {/* Required state */}
  />
);

export default RequiredTextarea;

Layout & Spacing

Prioritizing thoughtful layout and spacing, our textarea component contributes to an organized and visually cohesive form. Consistent alignment and spacing ensure an aesthetically pleasing design, enhancing the overall user experience during text input.

Light & Dark Mode

Seamlessly adapting to both light and dark modes, our textarea component ensures optimal visibility and readability in diverse environments. Careful consideration of color choices and contrast adjustments guarantees a comfortable and stylish text input experience, regardless of the interface theme.

Accessibility

Built with accessibility in mind, our textarea component incorporates features such as proper labeling, logical tab order, keyboard navigation, and ARIA roles. This commitment ensures that the textarea is usable by all, including those with disabilities, promoting inclusivity in the digital space.

CriteriaDescriptionStatus

ID Attribute Value

Ensures every id attribute value is unique

Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds.

AA ~ AAA

Design System

API

PropertyDescriptionTypeAccepted ValuesDefault

size

Sets the size of the textarea

String

sm, md, lg

md

disabled

Disables the textarea

Boolean

true, false

false

readonly

Makes the textarea read-only

Boolean

true, false

false

required

Makes the textarea a required field

Boolean

true, false

false

value

Current value of the textarea

String

Any valid string

null

name

Name attribute for form submission

String

Any valid string

null

placeholder

Placeholder text for the textarea

String

Any valid string

null

label

Label text for the textarea

String

Any valid string

null

caption

Caption text for additional information

String

Any valid string

null

error

Indicates if the textarea has an error

Boolean

true, false

false

clearable

Allows clearing the textarea

Boolean

true, false

false

rows

Sets the number of rows for the textarea

Number

Any positive number

2

spellcheck

Enables or disables spellcheck

Boolean

true, false

true

minlength

Minimum length for the textarea content

Number

Any positive number

null

maxlength

Maximum length for the textarea content

Number

Any positive number

null

full-width

Makes the textarea take full width

Boolean

true, false

false

EventDescriptionTrigger Condition

plus-blur

Fired when the textarea loses focus

When the textarea loses focus

plus-focus

Fired when the textarea gains focus

When the textarea gains focus

plus-change

Fired when the content of the textarea changes

When the content changes

plus-clear

Fired when the textarea is cleared

When the content is cleared

plus-textarea

A native-like event for the textarea

For various native-like actions

PreviousTabNextToast

Last updated