TextArea | MDK

TextArea component with label support and error handling

import { TextArea } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`error`	Optional	`string \| undefined`	—	Validation error message. When provided, displays error styling (red border) and the message below the textarea.
`label`	Optional	`string \| undefined`	—	Optional label displayed above the textarea
`wrapperClassName`	Optional	`string \| undefined`	—	Custom className for the root wrapper

Usage

A multi-line text input with optional label, error message, and accessible markup. Renders as a <textarea> element.

Notes

When an error is provided, the textarea receives aria-invalid and aria-describedby pointing to the error message for screen reader accessibility.
When no label is provided, wrapperClassName is applied directly to the inner wrapper div; when a label is present, it applies to the outer root div.

Example

/** * Runnable example for TextArea. */import { TextArea } from '@tetherto/mdk-react-devkit'export const TextAreaExample = () => (  <div className="mdk-example-col">    <TextArea      id="notes"      label="Device Notes"      placeholder="Add notes about this miner..."      rows={4}    />    <TextArea      id="config"      label="Custom Configuration"      placeholder="Paste raw config JSON..."      rows={6}    />    <TextArea      id="error-ta"      label="Pool URL"      placeholder="stratum+tcp://..."      error="Invalid stratum URL format."    />    <TextArea      id="disabled-ta"      label="Read-only Log"      defaultValue="2025-05-18 12:34:56 — Pool connected successfully."      disabled      rows={3}    />  </div>)