FormField

Composed field wrapper for labels, help text, and errors.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add form-field

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { FormField } from '@app/components/ui/form-field.tsx';
import { Input } from '@app/components/ui/input.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><FormField name="email" label="Customer email" helpText="We will send tracking updates"><Input id="email" name="email" type="email" /></FormField></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional
`FormFieldProps`	`label`	`Renderable`	No
`FormFieldProps`	`name`	`string`	No
`FormFieldProps`	`required`	`boolean`	Yes
`FormFieldProps`	`error`	`string`	Yes
`FormFieldProps`	`helpText`	`string`	Yes
`FormFieldProps`	`class`	`string`	Yes
`FormFieldProps`	`children`	`Renderable`	No

TypeScript

FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class">

Keyboard

No S3 keyboard contract is registered for this item. Native controls retain browser keyboard behavior.

Tokens

No S3 token contract is registered for this item.

CSS custom properties referenced directly: --ns-destructive-text, --ns-fg, --ns-font-mono, --ns-leading-small, --ns-muted-fg, --ns-space-1, --ns-space-1-5, --ns-text-small, --ns-text-xs.

Contract and compatibility

This registry item ships without an S3 entry. Implementation prop documentation is authoritative.