@nathan3boss/ui

    Textarea

    The Textarea component provides a styled multiline field with optional label, helper text, and character counting.

    Usage

    import React from 'react';
import { Textarea } from '@nathan3boss/ui/textarea';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Textarea label="Magic Journal" placeholder="Write your notes here..." />
    </ExampleFrame>
  );
};

    Helper Text

    Record your observations of the passage of time.
    import React from 'react';
import { Textarea } from '@nathan3boss/ui/textarea';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Textarea
        helperText="Record your observations of the passage of time."
        helperColor="default"
        label="Magic Journal"
        placeholder="Write your notes here..."
      />
    </ExampleFrame>
  );
};

    Character Count

    Keep this note concise.0/120
    import React from 'react';
import { Textarea } from '@nathan3boss/ui/textarea';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame width="320px">
      <Textarea
        helperText="Keep this note concise."
        helperColor="success"
        label="Magic Journal"
        max={120}
        placeholder="Write your notes here..."
      />
    </ExampleFrame>
  );
};

    API

    Textarea

    Renders a styled multiline text area with label, helper text, and character counting support.

    PropertyDescriptionTypeDefault Value
    endContentRenders content at the end of the textarea field.ReactNode-
    helperTextDisplays supporting text below the textarea.ReactNode-
    helperColorSets the semantic color treatment of the helper text.HelperTextColor | undefineddefault
    labelRenders a label above the textarea.ReactNode-
    maxDefines the character limit used by the built-in counter.number | undefined-
    sizeControls the textarea spacing and typography scale.InputSize | undefinedmd
    startContentRenders content at the start of the textarea field.ReactNode-
    colorApplies the semantic color treatment of the textarea.InputColor | undefineddefault