Input

Form controls. Wrap each control in .nf-field for consistent label + helper text spacing.

Connect every .nf-label to its control with for/id (or wrap the control in the <label>), and point the control at its helper text with aria-describedby. For errors, set aria-invalid="true": it applies the same error styling as .nf-input-error, so the visual and announced states stay in sync.

Text input

DEFAULT

User_IDUNIQUE_SYSTEM_ID_REQUIRED

<div class="nf-field">
<label class="nf-label" for="user-id">User_ID</label>
<input class="nf-input" id="user-id" type="text" placeholder="GUEST_####" aria-describedby="user-id-help" />
<span class="nf-helper" id="user-id-help">UNIQUE_SYSTEM_ID_REQUIRED</span>
</div>

Error state

ERROR

Encryption_KeyERR: INVALID_FORMAT

<div class="nf-field">
<label class="nf-label" for="enc-key">Encryption_Key</label>
<input class="nf-input nf-input-error" id="enc-key" type="text" value="CORRUPT_DATA" aria-invalid="true" aria-describedby="enc-key-error" />
<span class="nf-helper nf-helper-error" id="enc-key-error">ERR: INVALID_FORMAT</span>
</div>

Select

SELECT

Access_Level

<div class="nf-field">
<label class="nf-label" for="access-level">Access_Level</label>
<select class="nf-select" id="access-level">
  <option>LEVEL_LOW</option>
  <option>LEVEL_MID</option>
  <option>LEVEL_ROOT</option>
</select>
</div>

Checkbox & Radio

CHECKBOX

NODE_01

<label class="nf-checkbox">
<input type="checkbox" checked />
<span>NODE_01</span>
</label>

Textarea

TEXTAREA

System_Log

<div class="nf-field">
<label class="nf-label" for="system-log">System_Log</label>
<textarea class="nf-textarea" id="system-log" placeholder="ENTER LOG DATA..."></textarea>
</div>