Skip to content
NockerlDesignv2.0.0

Text area

In review
Live · web

Interactive: type, watch the counter

The agent runs with these instructions.

Auto-grows as you type, up to 8 rows.

States: disabled, read-only

Inert, but still readable.

Value you can select but not change.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform; this is the
// canonical API the published @dizyx/nockerl-react package exposes. The shipped shadcn
// textarea.tsx is being conformed to it; see the drift note below.)
import { NockerlTextArea } from '@dizyx/nockerl-react';


export function TaskPrompt() {
  const [prompt, setPrompt] = useState('');
  return (
    <NockerlTextArea
      label="Task instructions"
      value={prompt}
      onChange={setPrompt}
      placeholder="Describe what the agent should do…"
      helperText="The agent runs with these instructions."
      maxLength={2000}
      minRows={3}
      maxRows={12}
    />
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
label *stringPersistent label, bound to the field via htmlFor / id. Never a placeholder.
value *stringCurrent value (controlled).
onChange(value: string) => voidChange handler. Ignored while disabled or read-only.
placeholderstringGhost prompt INSIDE the well. It is supplementary, never the label.
helperTextstringHelper text under the well. Replaced by errorText / statusText when set.
errorTextstringWhen set, the area renders its error treatment (red border + this message).
statusFieldStatusThe validation ladder: warning / success (or error) border + a matching, icon-carrying help line showing statusText. errorText (and an over-cap counter) still win if set. Color is never the only signal. A glyph rides along.
statusTextstringThe message shown for status (ignored when errorText / over-cap wins).
requiredbooleanfalseMarks the field required: renders the status-colored * after the label.
disabledbooleanfalseInert + clearly-seen (never invisible).
readOnlybooleanfalseValue shown, selectable, not editable.
maxLengthnumberOptional max length; drives the character counter + over-cap error.
minRowsnumber3Rows the field starts at before it auto-grows.
maxRowsnumber8Rows it grows to before it starts scrolling instead.

Also accepts the native <textarea> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.