Skip to content
NockerlDesignv2.0.0

Text field

In review
Live · web

Interactive: type, tab to focus

Shown in the session list. Optional.

States: rest, filled, disabled, read-only

Helper text sits under the well.

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 input.tsx is being conformed to it; see the drift note below.)
import { NockerlTextField } from '@dizyx/nockerl-react';


export function SessionForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  return (
    <>
      <NockerlTextField
        label="Session name"
        value={name}
        onChange={setName}
        placeholder="e.g. Refactor auth flow"
        helperText="Shown in the session list."
      />
      <NockerlTextField
        label="Notify email"
        type="email"
        leadingIcon="@"
        value={email}
        onChange={setEmail}
        errorText={emailError}
      />
    </>
  );
}

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 field 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 still wins if both are set (back-compat). Color is never the only signal (a glyph always rides along).
statusTextstringThe message shown for status (ignored when errorText is set).
requiredbooleanfalseMarks the field required: renders the status-colored * after the label.
maxLengthnumberOptional max length: adds a footer row with a right-aligned character counter (help on the left, "{len} / {max}" on the right); over the cap = error treatment.
disabledbooleanfalseInert + clearly-seen (never invisible).
readOnlybooleanfalseValue shown, selectable, not editable.
leadingIconstringOptional leading glyph rendered inside the well, before the text.
typestring'text'input type (text, email, password, …).

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