AI Input Generator.

Create a text input component with a visible label above the field, wired with a generated id and a matching for attribute rather than wrapping the input in the label. Below it, a helper text line linked through aria-describedby. Reserve the height of that line at rest so the form does not shift when an error replaces it. The field is 40px tall with an 8px radius, a 1px grey border, and a 2px focus-visible ring offset from the border. Add a required prop that sets the required attribute and appends a visually hidden "required" to the label rather than relying on an asterisk alone. Accept type, inputMode and autocomplete as props with no defaults, so each call site declares them.

Add validation states to a text input: error with a red border, a red message replacing the helper text, aria-invalid="true", and the message linked through aria-describedby so it is announced when focus enters the field. Add success and warning states that change the border and the leading icon but keep the same message slot and line height. Never signal state by border color alone — pair every state with an icon and text. Validate on blur, then revalidate on change only once the field is already in an error state, so a half-typed email is not flagged mid-entry. Announce late server-side errors through a polite live region.

Create a text input with optional prefix and suffix slots rendered inside the field border. Static affixes such as a currency symbol or a .com suffix get aria-hidden and muted text; interactive affixes such as a password visibility toggle or a clear button render as real buttons with their own aria-label and stay reachable by keyboard. Increase the field padding to match each affix width so typed text never slides under it. Keep the focus ring on the outer wrapper, not the bare input, so the ring surrounds the affixes too. Include a search variant with a leading magnifier and a trailing clear button that appears only when the field has a value.

Create a textarea that shares the label, helper text and error layout of the text input. Autosize from a three-row minimum up to eight rows, recalculating the height from scrollHeight on input after resetting it, then switch to internal scrolling at the cap so a long message cannot push the submit button off screen. Add an optional character counter in the bottom right showing used and total, turning amber at 90 percent of the limit and red at the limit, announced through a polite live region rather than on every keystroke. Disable the native resize handle only when autosizing is on, otherwise leave it available.

Create a formatted input for card numbers, phone numbers and expiry dates. Insert separators as the user types — spaces every four digits for cards, a slash after the month for expiry — while storing the unformatted value in state and submitting that. Preserve the caret position when the mask inserts a character mid-string, rather than letting the value reset send it to the end. Set inputMode="numeric" and the correct autocomplete token: cc-number, tel, cc-exp. Accept paste of an already-formatted value by stripping non-digits first. Validate length on blur and keep the field editable in the error state.

Create a form field group component that lays out two or three inputs on one row using a grid, collapsing to a single column below 640px. Keep a shared vertical gap between rows and align the labels on a single baseline even when one field carries helper text and its neighbor does not, by reserving the message line in every field. Group semantically related fields in a fieldset with a legend, such as an address block, so screen readers announce the group name before each field. Let each field declare its own width in grid columns rather than a hardcoded percentage, so a postcode field can be narrower than a city field.