Field
Labelled text input with hint/error wiring and an accent focus ring.
Preview
Label + placeholder
<label class="nx-field"><span class="nx-field__label">Search jobs</span><input class="nx-field__input" placeholder="Type to filter…"></label><NxField label="Search jobs" placeholder="Type to filter…" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Required | Field label text. |
placeholder | string | undefined | Input placeholder. |
Classes
| Class | Description |
|---|---|
.nx-field | Label wrapper |
.nx-field__label | .72rem/560, slate-500 |
.nx-field__input | Input: hairline border, 10px radius, accent focus ring |
.nx-field__hint | Muted helper text, wire via aria-describedby |
.nx-field__error | Danger helper text, wire via aria-describedby + aria-invalid |
States
invalid
Bitte eine gültige E-Mail eingeben
disabled
readonly
hint
Nur für dein Team sichtbar.
Accessibility
- Invalid inputs set aria-invalid="true" + aria-describedby pointing at the .nx-field__error id — the error must already exist in the DOM, not be conditionally unmounted before the describedby read.
- Focus replaces the browser default outline with an accent border + glow — never remove focus styling without an equivalent.
Do / Don’t
- Do: Always wrap the input in a <label> (or pair an explicit htmlFor).Don’t: Don't show the error text without also setting aria-invalid + aria-describedby on the input.