Textarea Field

A simple textarea component. Accept all props of a regular textarea element.

The TextareaField extends the Textarea element by adding label, description and validation variants.

A textarea field

---

Usage

import { TextArea } from "@newfold/ui-component-library";

<TextareaField
    id="textarea-field-demo"
    label="A textarea field"
/>

---

HTML Attributes

Since the TextareaField component is a wrapper around a regular textarea element, all attributes of a regular textarea element are accepted.

For example, here's a textarea with a placeholder.

A textarea field

<TextareaField
    id="textarea-field-html-attributes"
    label="A textarea field"
    placeholder="HTML attributes placeholder text"
/>

---

Value

To add a default value to the TextareaField, you can render the TextareaField as a dynamic component instead of self-closing.

A textarea field

[object Object]

<TextareaField
    id="textarea-field-value"
    label="A textarea field"
>
    The 'textarea' HTML element is a fundamental input control
    that allows users to input multiple lines of text.
</TextareaField>

---

Label

Use the label prop to add a label to the TextareaField component.

Textarea field label 👋

<TextareaField
    id="textarea-field-html-label"
    label="Textarea field label 👋"
/>

---

Description

Use the description prop to add a description to the TextareaField component.

Textarea field label 👋

Textarea field description 🙌

<TextareaField
    id="textarea-field-html-description"
    label="Textarea field label 👋"
    description="Textarea field description 🙌"
/>

---

Disabled

Use the disabled prop to disable the TextareaField component.

Disabled textarea field

<TextareaField
    id="textarea-field-html-disabled"
    label="Disabled textarea field"
    disabled
/>

---

Validation

Use the validation prop to add validation to the TextareaField component. The TextareaField provides four validation variants: success, warning, info, and error.

Success

Success variant

Success unlocked. Keep soaring!

<TextareaField 
    id="textarea-field-success"
    label="Success variant"
    validation={{
        variant: "success",
        message: "Success unlocked. Keep soaring!"
    }}
/>

Warning

Warning variant

Caution: Proceed with care to avoid potential pitfalls.

<TextareaField 
    id="textarea-field-warning"
    label="Warning variant"
    validation={{
        variant: "warning",
        message: "Caution: Proceed with care to avoid potential pitfalls."
    }}
/>

Info

Info variant

Information: Knowledge is the key to empowerment.

<TextareaField 
    id="textarea-field-info"
    label="Info variant"
    validation={{
        variant: "info",
        message: "Information: Knowledge is the key to empowerment."
    }}
/>

Error

Error variant

Error: Unable to proceed without required input.

<TextareaField 
    id="textarea-field-error"
    label="Error variant"
    validation={{
        variant: "error",
        message: "Error: Unable to proceed without required input."
    }}
/>

---

Props

Attribute	Type	Description	Default
id*	string |	ID for the textarea field.	-
label*	string |	Label for the textarea field.	-
description	string |	Description for the textarea field.	-
validation	{ variant: string, message: node } |	Validation state and message	-
rows	number |	-	2
disabled	bool |	-	false
className	string |	-	-