FormElement

Single form control (Craft resolvedName FormElement). Props use type (not inputType) for the HTML input kind.

Required Props: id, type

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`type`*required	string text \| textarea \| email \| password \| url \| tel \| date \| datetime-local \| radio \| checkbox \| select \| reset \| hidden \| color \| month \| number \| range \| search \| time \| week \| file \|	HTML input type / control kind	`email`
`text`	string	Optional label or helper text content	-
`tagName`	string	Override wrapper tag when applicable	-
`activeTab`	number	-	-
`placeholder`	string	Placeholder text	`Enter your email`
`name`	string	Form field name attribute	`email`
`label`	string	Visible label	-
`required`	boolean	HTML required Default: `false`	-
`disabled`	boolean	- Default: `false`	-
`readOnly`	boolean	- Default: `false`	-
`value`	string	Default value	-
`rows`	number	textarea rows Default: `4`	-
`cols`	number	textarea cols Default: `50`	-
`min`	string	-	-
`max`	string	-	-
`step`	string	-	-
`pattern`	string	-	-
`autoComplete`	string	HTML autocomplete attribute (React camelCase)	-
`options`	array	Select/radio options Default: `[]`	-
`invalid`	boolean	Mark field invalid for styling	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	Editor metadata (displayName, ...)	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`url`	string	-	-
`urlTarget`	string	-	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`root`	object	Input chrome: border, radius, focus ring, placeholder color	-