LongTextField

LongTextField renders a styled <textarea> for multi-line text input. The number of visible rows and whether the user can resize the textarea are both configurable. Additional native textarea attributes can be passed via the rest-props spread.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Current text value. | | onChange | (value: string) => void | Yes | — | Called with the new string on every keystroke. | | label | string | No | — | Label rendered above the textarea. | | description | string | No | — | Helper text rendered below the textarea. | | placeholder | string | No | — | Placeholder text shown inside the textarea when empty. | | rows | number | No | 3 | Initial number of visible text rows. | | resizable | boolean | No | true | When true the user can drag the resize handle; when false resizing is disabled. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the inner textarea wrapper div. | | id | string | No | — | id attribute on the inner wrapper div. | | ...props | any | No | — | Additional attributes forwarded to the underlying <textarea> element. |

Usage

Basic

import React, { useState } from 'react';
import LongTextField from '@/components/fields/LongTextField';

export default function Example() {
  const [text, setText] = useState('');

  return (
    <LongTextField
      label="Notes"
      value={text}
      onChange={setText}
      placeholder="Enter any additional notes..."
      rows={5}
    />
  );
}

Non-resizable with more rows

<LongTextField
  label="Description"
  value={description}
  onChange={setDescription}
  rows={8}
  resizable={false}
  description="Markdown is not supported here."
/>