Form Field

Stable

Universal accessible layout wrapper providing glowing required dots, error alerts, helper descriptions, and automatic ARIA bindings for any form control.

Installation

$pnpm add @siberui/react

Import

tsx

import { FormField } from '@siberui/react';

Basic Wrapper Composition

Wrap custom controls or third-party inputs in FormField to automatically standardize label positioning and monospace helper descriptions.

CUSTOM QUANTUM BUFFER

0x7F_BUFFER_READYIDLE

Input accepts arbitrary byte stream payloads

tsx

<div className="max-w-md w-full">
  <FormField
    label="CUSTOM QUANTUM BUFFER"
    helperText="Input accepts arbitrary byte stream payloads"
  >
    <div className="flex items-center justify-between px-3.5 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-sm text-slate-200">
      <span className="font-mono text-xs text-cyan-400">0x7F_BUFFER_READY</span>
      <span className="text-xs text-slate-500 font-mono">IDLE</span>
    </div>
  </FormField>
</div>

Required Indicators & Error Bindings

Setting required attaches a glowing cyan indicator dot, while error renders right-aligned warning feedback.

OPERATOR IDENTIFIERINVALID_ALIAS: Operator signature not found in ledger

EGRESS SUBNET

Required for routing packets outside perimeter

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <FormField
    label="OPERATOR IDENTIFIER"
    required
    error="INVALID_ALIAS: Operator signature not found in ledger"
  >
    <Input variant="neon" defaultValue="agent_unregistered" error />
  </FormField>

  <FormField
    label="EGRESS SUBNET"
    required
    helperText="Required for routing packets outside perimeter"
  >
    <Input variant="neon" defaultValue="10.240.0.1/16" success />
  </FormField>
</div>

Disabled Container State

Passing disabled dims the entire field structure and blocks pointer interaction.

QUARANTINED INTERFACE

Interface deactivated by root security policy

tsx

<div className="max-w-md w-full">
  <FormField
    label="QUARANTINED INTERFACE"
    disabled
    helperText="Interface deactivated by root security policy"
  >
    <Input defaultValue="ETH_04_LOCKED" disabled />
  </FormField>
</div>

Frosted Cyber-Glass Security Form

Construct glassmorphic identity creation modules with circuit substrate backgrounds and animated boundary sweeps.

NEW NODE REGISTRATION

V3.1

NODE CODENAME

LATTICE PUBLIC KEY

Base64 encoded Ed25519 or Kyber string

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-5">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Key className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">NEW NODE REGISTRATION</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">V3.1</Badge>
    </div>

    <div className="space-y-4">
      <FormField label="NODE CODENAME" required>
        <Input variant="glass" placeholder="e.g. SENTINEL-ORBIT-09" />
      </FormField>

      <FormField label="LATTICE PUBLIC KEY" required helperText="Base64 encoded Ed25519 or Kyber string">
        <Textarea variant="glass" placeholder="Paste cryptographic public key..." rows={3} />
      </FormField>
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        REGISTER NODE
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Configuration Card

Multi-field operational dashboard card with validation bindings.

ROUTER CONFIGURATION

ACTIVE

Configure BGP neighbor and MTU limits.

BGP NEIGHBOR AS

MTU MAXIMUM PACKET SIZE

Default value is 1500, max jumbo frame 9000

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">ROUTER CONFIGURATION</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Configure BGP neighbor and MTU limits.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <FormField label="BGP NEIGHBOR AS" required>
      <Input variant="neon" defaultValue="AS64512" />
    </FormField>

    <FormField label="MTU MAXIMUM PACKET SIZE" helperText="Default value is 1500, max jumbo frame 9000">
      <Input variant="neon" defaultValue="9000" />
    </FormField>

    <div className="pt-2 flex justify-end gap-3">
      <Button variant="secondary" size="sm">RESET</Button>
      <Button variant="neon" size="sm" glow>APPLY CONFIG</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (6)← swipe to inspect →

Property	Description	Type	Default
label	Monospace label rendered above the wrapped form control.	string	-
htmlFor	Explicit ID matching target input. Automatically generated if omitted.	string	-
error	Error state string or boolean. String displays right-aligned warning text.	string \| boolean	-
helperText	Instructional text rendered beneath the child component.	string	-
required	Adds an illuminated cyan dot indicator preceding the label text.	boolean	false
disabled	Dims opacity and disables pointer interaction on child controls.	boolean	false

Accessibility

Automatic ID Association: FormField generates a unique ID via React.useId() to bind labels to controls.
Screen Reader Alerts: When error is a string, it renders with high-contrast text and announces validation issues clearly.

Best Practices

When to Use: Use FormField when composing custom interactive blocks, composite multi-input rows, or wrapping external components.