Cyber-themed form controls for text entry, selection, submission, and grouped field layout.

Forms

CyberCN form components keep the API close to native HTML controls while replacing the visual treatment with the library's clipped, high-contrast style system.

Install

npx shadcn@latest add @cybercn/cyber-form @cybercn/cyber-button

Import

import {
  CyberForm,
  CyberFieldset,
  CyberInput,
  CyberSelect,
  CyberSelection,
  CyberTextarea,
} from "@/components/ui/cybercn/form";
import { Button } from "@/components/ui/cybercn/button";

Usage Example

import {
  CyberForm,
  CyberFieldset,
  CyberInput,
  CyberSelect,
  CyberSelection,
  CyberTextarea,
} from "@/components/ui/cybercn/form";
import { Button } from "@/components/ui/cybercn/button";

export function IntakeForm() {
  return (
    <CyberForm className="max-w-xl space-y-5">
      <CyberFieldset>
        <CyberInput name="alias" placeholder="USER_ALIAS" />
        <CyberInput name="scanDate" type="date" />
      </CyberFieldset>

      <CyberTextarea name="manifesto" rows={4} placeholder="SYSTEM_MANIFESTO" />

      <CyberSelect name="district" defaultValue="HAYWOOD">
        <option value="WATSON">WATSON</option>
        <option value="HAYWOOD">HAYWOOD</option>
        <option value="PACIFICA">PACIFICA</option>
      </CyberSelect>

      <CyberSelection
        type="checkbox"
        name="encryptUplink"
        label="ENCRYPT_DATA_UPLINK"
      />

      <Button type="submit">Initialize Handshake</Button>
    </CyberForm>
  );
}

CyberForm

Prop	Type	Default	Notes
native form props	`FormHTMLAttributes<HTMLFormElement>`	-	Supports `action`, `onSubmit`, `method`, `className`, and more.

CyberForm is a thin wrapper that adds space-y-4 by default and forwards the rest of the native form API.

CyberInput

Prop	Type	Default	Notes
native input props	`ComponentProps<"input">`	-	Accepts the full native input surface.
`type`	native HTML input type	`"text"`	Defaults to text, but works with date, file, number, password, and more.

Best fit for single-line text fields, temporal inputs, upload controls, and numeric entries.

CyberTextarea

Prop	Type	Default	Notes
native textarea props	`ComponentProps<"textarea">`	-	Includes `rows`, `placeholder`, `value`, and `onChange`.

Adds cyber-input, a larger minimum height, and the textarea-specific clipped frame class.

CyberSelect

Prop	Type	Default	Notes
native select props	`ComponentProps<"select">`	-	Accepts normal select attributes and events.

Applies the CyberCN input frame with select-specific clipping and appearance-none.

CyberSelection

Prop	Type	Default	Notes
`type`	`"checkbox" \| "radio"`	required	Chooses the rendered control style.
`label`	`string`	required	Rendered inline after the input control.
native input props	`Omit<ComponentProps<"input">, "type">`	-	Includes `name`, `value`, `checked`, `onChange`, and `disabled`.

Use this for radios and checkboxes where the visible label should stay attached to the control.

NEURAL_LINK_UPGRADE ENCRYPT_DATA_UPLINK

CyberFieldset

Prop	Type	Default	Notes
`className`	`string`	-	Useful for grid layout or spacing overrides.
`children`	`React.ReactNode`	required	Usually a cluster of related form controls.

CyberFieldset is helpful for grouping date/time pairs, security fields, or multi-input identity blocks.

Forms

On this page