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.

anatomy of textarea component

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.

Status	State	Size	Disabled	Readonly
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.

React

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,
};

Angular

<!-- Default Textarea -->
<plus-textarea
  label="Label"
  caption="Enter your text here"
  placeholder="Placeholder"
></plus-textarea>  <!-- Default textarea -->

<!-- Error Textarea -->
<plus-textarea
  error
  label="Label"
  caption="This field has an error"
  placeholder="Placeholder"
></plus-textarea>  <!-- Textarea with error -->

Vue

<template>
  <!-- Default Textarea -->
  <plus-textarea
    label="Label"
    caption="Enter your text here"
    placeholder="Placeholder"
  />  <!-- Default textarea -->

  <!-- Error Textarea -->
  <plus-textarea
    error
    label="Label"
    caption="This field has an error"
    placeholder="Placeholder"
  />  <!-- Textarea with error -->
</template>

Javascript

<!-- Default Textarea -->
<plus-textarea
  label="Label"
  caption="Enter your text here"
  placeholder="Placeholder"
></plus-textarea>  <!-- Default textarea -->

<!-- Error Textarea -->
<plus-textarea
  error
  label="Label"
  caption="This field has an error"
  placeholder="Placeholder"
></plus-textarea>  <!-- Textarea with error -->

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.

React

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,
};

Angular

<!-- Empty Textarea -->
<plus-textarea
  label="Your Comments"
  caption="Please share your thoughts"
  placeholder="Type here..."
></plus-textarea>  <!-- Empty textarea -->

<!-- Filled Textarea -->
<plus-textarea
  label="Your Comments"
  caption="Please share your thoughts"
  placeholder="Type here..."
  value="I love using Plus UI!"
></plus-textarea>  <!-- Textarea with pre-filled text -->

Vue

<template>
  <!-- Empty Textarea -->
  <plus-textarea
    label="Your Comments"
    caption="Please share your thoughts"
    placeholder="Type here..."
  />  <!-- Empty textarea -->

  <!-- Filled Textarea -->
  <plus-textarea
    label="Your Comments"
    caption="Please share your thoughts"
    placeholder="Type here..."
    value="I love using Plus UI!"
  />  <!-- Textarea with pre-filled text -->
</template>

Javascript

<!-- Empty Textarea -->
<plus-textarea
  label="Your Comments"
  caption="Please share your thoughts"
  placeholder="Type here..."
></plus-textarea>  <!-- Empty textarea -->

<!-- Filled Textarea -->
<plus-textarea
  label="Your Comments"
  caption="Please share your thoughts"
  placeholder="Type here..."
  default-value="I love using Plus UI!"
></plus-textarea>  <!-- Textarea with pre-filled text -->

Size

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

React

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,
};

Angular

<!-- Small Textarea -->
<plus-textarea
  label="Small Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="sm"
></plus-textarea>  <!-- Small size textarea -->

<!-- Medium Textarea -->
<plus-textarea
  label="Medium Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="md"
></plus-textarea>  <!-- Medium size textarea -->

<!-- Large Textarea -->
<plus-textarea
  label="Large Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="lg"
></plus-textarea>  <!-- Large size textarea -->

Vue

<template>
  <!-- Small Textarea -->
  <plus-textarea
    label="Small Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="sm"
  />  <!-- Small size textarea -->

  <!-- Medium Textarea -->
  <plus-textarea
    label="Medium Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="md"
  />  <!-- Medium size textarea -->

  <!-- Large Textarea -->
  <plus-textarea
    label="Large Size"
    caption="Please enter text"
    placeholder="Type here..."
    size="lg"
  />  <!-- Large size textarea -->
</template>

Javascript

<!-- Small Textarea -->
<plus-textarea
  label="Small Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="sm"
></plus-textarea>  <!-- Small size textarea -->

<!-- Medium Textarea -->
<plus-textarea
  label="Medium Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="md"
></plus-textarea>  <!-- Medium size textarea -->

<!-- Large Textarea -->
<plus-textarea
  label="Large Size"
  caption="Please enter text"
  placeholder="Type here..."
  size="lg"
></plus-textarea>  <!-- Large size textarea -->

Disabled

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

React

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;

Angular

<!-- Disabled Textarea -->
<plus-textarea
  label="Disabled Textarea"
  caption="This field is disabled"
  placeholder="Cannot enter text"
  disabled
></plus-textarea>  <!-- Disabled state -->

Vue

<template>
  <!-- Disabled Textarea -->
  <plus-textarea
    label="Disabled Textarea"
    caption="This field is disabled"
    placeholder="Cannot enter text"
    disabled
  />  <!-- Disabled state -->
</template>

Javascript

<!-- Disabled Textarea -->
<plus-textarea
  label="Disabled Textarea"
  caption="This field is disabled"
  placeholder="Cannot enter text"
  disabled
></plus-textarea>  <!-- Disabled state -->

Readonly

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

React

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;

Angular

<!-- Readonly Textarea -->
<plus-textarea
  label="Readonly Textarea"
  caption="You can only read this field"
  placeholder="Read-only content"
  default-value="This field is readonly."
  readonly  
></plus-textarea>

Vue

<template>
  <!-- Readonly Textarea -->
  <plus-textarea
    label="Readonly Textarea"
    caption="You can only read this field"
    placeholder="Read-only content"
    defaultValue="This field is readonly."
    readonly  
  />
</template>

Javascript

<!-- Readonly Textarea -->
<plus-textarea
  label="Readonly Textarea"
  caption="You can only read this field"
  placeholder="Read-only content"
  default-value="This field is readonly."
  readonly 
></plus-textarea>

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.

React

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;

Angular

<!-- Required Textarea -->
<plus-textarea
  label="Comments"
  caption="This field is required"
  placeholder="Enter your comments..."
  required  
></plus-textarea>

Vue

<template>
  <!-- Required Textarea -->
  <plus-textarea
    label="Comments"
    caption="This field is required"
    placeholder="Enter your comments..."
    required  
  />
</template>

Javascript

<!-- Required Textarea -->
<plus-textarea
  label="Comments"
  caption="This field is required"
  placeholder="Enter your comments..."
  required  
></plus-textarea>

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.

layout and spacing of textarea component

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.

light and dark mode of textarea component

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.

Criteria	Description	Status
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

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
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

Event	Description	Trigger 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