arkyn

v3.0.1-beta.72

Textarea

The Textarea component is used for multi-line text input with customizable styling and validation support. It's ideal for fields that require long text, such as descriptions, comments, messages, and biographies.

tsx

import { Textarea } from "@arkyn/components";

Basic Usage

Basic usage of an textarea requires a name property.

tsx

<Textarea name="basic-textarea" />

Sizes

The available sizes are 'md' and 'lg', offering different heights and paddings to suit your layout needs.

tsx

<Textarea
  name="description-md"
  label="Description (medium)"
  placeholder="Enter description..."
  size="md"
  rows={3}
/>
<Textarea
  name="description-lg"
  label="Description (large)"
  placeholder="Enter description..."
  size="lg"
  rows={3}
/>

Variants

The available variants are solid and outline, providing different visual styles to suit your interface design.

tsx

<Textarea
  name="comment-solid"
  label="Comment (solid)"
  placeholder="Enter your comment..."
  variant="solid"
  rows={3}
/>
<Textarea
  name="comment-outline"
  label="Comment (outline)"
  placeholder="Enter your comment..."
  variant="outline"
  rows={3}
/>

Textarea states

The component supports different states, such as disabled, read-only, and loading.

Disabled textarea

The disabled state prevents any user interaction with the field and prevents data from being submitted through a form.

tsx

<Textarea
  name="disabled-with-value"
  label="Disabled with value"
  value="This text cannot be edited because the field is disabled."
  disabled
  rows={3}
/>

Read-only textarea

The read-only state allows the user to view the field value but cannot edit it. Unlike the disabled state, the value can be selected and copied, and field data can be submitted via a form.

tsx

<Textarea
  name="terms-conditions"
  label="Terms and Conditions"
  value="Here are the terms and conditions of our application. This text is for display only and cannot be modified."
  readOnly
  rows={4}
  variant="outline"
/>

Validation and errors

The component integrates with form validation systems and can display error messages. If an error message is provided via the errorMessage property, it will take precedence over messages from the form provider.
Customizable Forms
For forms, it is recommended to use the FormProvider which offers native integration with all form tools.

tsx

<Textarea
  name="invalid-description"
  label="Description"
  placeholder="Enter a description..."
  errorMessage="The description must be at least 10 characters long"
  showAsterisk
  rows={3}
/>

Properties

name - string (required) Field name for form manipulation and identification
label - string Label text to display above the textarea
showAsterisk - boolean Whether to display an asterisk in the label for required fields
errorMessage - string Error message to display below the textarea
size - "md" | "lg" (default: "md") Textarea size variant
variant - `"solid" | "outline" (default: "solid") Visual variant of the textarea
Other properties
All other standard HTML properties of <textarea> are also supported, except name, which is controlled by the component.

Notes

  • Use rows and cols to define the initial size of the textarea
  • The resize property in style controls how the user can resize
  • maxLength limits the number of characters that can be entered
On this page