Skip to main content

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.

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.

<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.

<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.

<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 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.

<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 unlocked. Keep soaring!

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

Warning​

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​

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: 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​

AttributeTypeDescriptionDefault
id*string | ID for the textarea field.-
label*string | Label for the textarea field.-
descriptionstring | Description for the textarea field.-
validation{ variant: string, message: node } | Validation state and message-
rowsnumber | -2
disabledbool | -false
classNamestring | --

Hello From Root