Works everywhere

Input works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/input) — the library detects the runtime automatically.

Input

Input renders a styled <input> with an associated label, optional helper text below the field, error feedback, and support for leading/trailing adornments (icons or buttons).

Live demo →

---

Overview

import { Input } from "@prokodo/ui/input"
;<Input
  name="email"
  label="Email address"
  type="email"
  placeholder="you@example.com"
  required
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Input } from "@prokodo/ui/input"

CSS:

import "@prokodo/ui/input.css"

---

Props

Prop	Type	Default	Required	Description
id	string	—	—	HTML id for the input.
label	string	—	—	Input label text.
value	string	—	—	Controlled input value.
defaultValue	string	—	—	Uncontrolled initial value.
placeholder	string	—	—	Placeholder text.
type	string	"text"	—	HTML input type.
disabled	boolean	false	—	Disable the input.
readOnly	boolean	false	—	Make input read-only.
required	boolean	false	—	Mark field as required.
fullWidth	boolean	false	—	Stretch to container width.
multiline	boolean	false	—	Render as <textarea>.
rows	number	—	—	Number of visible rows (textarea).
minRows	number	—	—	Minimum rows for auto-resize textarea.
maxRows	number	—	—	Maximum rows for auto-resize textarea.
startNode	ReactNode	—	—	Content rendered at the start of the input.
endNode	ReactNode	—	—	Content rendered at the end of the input.
renderNode	ReactNode	—	—	Custom render override for the input node.
iconName	string	—	—	Icon name shown inside the input field.
errorText	string	—	—	Error message (also sets error state).
helperText	string	—	—	Helper text shown below the input.
color	Variants	—	—	Accent color variant.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	—	Change handler.
className	string	—	—	CSS class on root element.

See src/components/input/Input.model.ts for the full InputProps type.

---

Design Tokens

Customise Input via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
--pk-input-bg	var(--pk-color-surface)	Input background
--pk-input-fg	var(--pk-color-fg)	Input text colour
--pk-input-fg-muted	var(--pk-color-muted)	Placeholder / hint text
--pk-input-border	var(--pk-color-border)	Resting border colour
--pk-input-border-focus	var(--pk-color-brand)	Focused border colour
--pk-input-radius	var(--pk-radius-pill)	Corner radius
--pk-input-padding-x	var(--pk-space-lg)	Horizontal padding
--pk-input-padding-y	0.875rem	Vertical padding
--pk-input-label-fg	var(--pk-color-muted)	Resting label colour
--pk-input-label-focused-fg	var(--pk-color-brand)	Floating label colour
--pk-input-helper-fg	var(--pk-palette-grey-300)	Helper / error text colour
--pk-input-shadow	var(--pk-shadow-sm)	Resting box-shadow
--pk-input-gradient-from	var(--pk-color-brand)	Focus-ring gradient start
--pk-input-gradient-to	var(--pk-color-accent)	Focus-ring gradient end

AIC Note

Use the standard import path in application code:

import { Input } from "@prokodo/ui/input"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.3.5	Identify Input Purpose (AA)	🔍 Manual review	Form fields collecting personal data must expose their purpose via the HTML autocomplete attribute.
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.4.11	Focus Not Obscured (Min.) (AA)	🔍 Manual review	The focused component must not be fully hidden by sticky headers, overlays, or other positioned page elements.
3.3.1	Error Identification (A)	🔍 Manual review	Input errors must be identified and described to the user in text, not by colour alone.
3.3.2	Labels or Instructions (A)	✅ Fulfilled	Every form input requires a programmatically associated label or a visible instruction.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 6 jest-axe assertion(s) across 5 test file(s) · 7 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Input in Storybook

---

Source

src/components/input/Input.model.ts