TkxInput

import { TkxInput } from 'tekivex-ui';

<TkxInput label="Email" type="email" />

With label

Full name

Variants

With label

<TkxInput label="Full name" placeholder="Jane Doe" />

With hint

<TkxInput
  label="Username"
  hint="3–20 characters, lowercase only"
  pattern="[a-z0-9]{3,20}"
/>

Error state

<TkxInput
  label="Email"
  defaultValue="not-an-email"
  isInvalid
  error="Enter a valid email address"
/>

With addons

<TkxInput
  label="Website"
  leftAddon={<span>https://</span>}
  rightAddon={<span>.com</span>}
/>

With hint

Username

3–20 characters, lowercase only

Error state

Email

Enter a valid email address

Built-in Unicode safety

Unicode-safe (zero-width characters stripped)

Try pasting U+200B or RTL override

Zero-width and bidi-override characters are stripped automatically.

Stored value length: 0

By default, every TkxInput strips zero-width and bidi-override Unicode characters on input — defending against the Trojan Source attack class (CVE-2021-42574). This is on by default. Disable only for translation UIs that legitimately need them:

<TkxInput label="Translation" unicodeSafe={false} />

Server-side validation still required

unicodeSafe reduces blast radius on the client. Always re-validate untrusted input at the trust boundary closest to your data store.

Props

Prop	Type	Required	Description
label	string	yes	Visible label — required for WCAG compliance.
id	string		Auto-generated if omitted.
error	string		Error message. Renders below the field with role="alert".
hint	string		Helper text. Linked via aria-describedby.
leftAddon / rightAddon	ReactNode		Slot content rendered inside the input frame.
isInvalid	boolean		Adds the danger border + aria-invalid.
isRequired	boolean		Adds the required asterisk + aria-required.
unicodeSafe	boolean		Strip zero-width / bidi Unicode. Default true.

All other props are forwarded to the underlying <input> element.

Accessibility

• Visible <label> linked via htmlFor. Never use placeholder-as-label.
• aria-describedby automatically points at hint + error when present.
• aria-invalid set when isInvalid is true.
• :focus-visible outline at 2px (configurable via theme).
• 44×44 minimum touch area on the entire field.
• Error messages use role="alert" so screen readers announce immediately.

Source

src/components/TkxInput.tsx