Component changelog

Form changelog

Component-specific release notes collected from the full changelog. This page filters the published entries that mention Form.

Release

v1.2.0

npm
Minor Changes
  • befc825: Dialog, AlertDialog, Popover, Tooltip, HoverCard, menus, Select, Combobox and NavigationMenu take actionsRef with close(). Field and Form take actionsRef with validate(). Field takes controlled touched and dirty, and Field.Control takes onValueChange.

  • 07e6783: Add focusableWhenDisabled to Button. A disabled button with it stays in the tab order and uses aria-disabled instead of native disabled, while clicks, Enter, Space and form submission stay blocked. Use it when a button disables itself during a pending request, so focus isn't lost, or when keyboard users need to reach a disabled button to learn why.

    In Clarity, only natively disabled buttons ignore the pointer, so a disabled button with focusableWhenDisabled can still show a Tooltip on hover explaining why. Hover colors no longer apply to disabled buttons.

  • 07e6783: Add readOnly to Checkbox, Switch and RadioGroup. A read-only control shows its state, stays focusable and in the form, but clicks and Space don't change it; it carries aria-readonly and data-readonly.

  • 1898db0: Add Field: Root, Label, Control, Description and Error parts that link a label, help text and an error to any form control. Ids, aria-describedby and aria-invalid are wired automatically, Error renders only while the field is invalid, and every part carries data-invalid, data-disabled, data-required, data-focused, data-touched and data-dirty. Compose Rad UI's TextField or TextArea with <Field.Control asChild>.

  • 1898db0: Field validates. It runs the browser's own checks (required, type, pattern, min/max) plus an optional validate function, and shows the result per validationMode: after a submit attempt (onSubmit, the default), on blur, or on change, then updates live as the user fixes it. Field.Error shows the validation message when it has no children, and match gives each problem its own message, for example match="valueMissing". Field.Validity renders custom UI from the result. Parts carry data-valid and data-invalid, and invalid still forces the error state.

    Resetting the form hides shown errors and clears data-touched and data-dirty.

  • befc825: Checkbox takes indeterminate, uncheckedValue, form and inputRef; Switch takes uncheckedValue, form and inputRef; RadioGroup takes form and inputRef. Form reset now also works with a form outside the tree. Slider takes thumbCollisionBehavior (none, push, swap), format/locale, largeStep and form; its thumbs take getAriaLabel, getAriaValueText and inputRef. NumberField takes allowOutOfRange, snapOnStep, form and inputRef.

  • 1898db0: Add Form, a form that validates its Fields before submitting. A submit with invalid fields shows every error and focuses the first invalid field, and async checks are awaited before submitting; plain controls outside a Field still get the browser's checks; once valid, onFormSubmit receives the values as an object. Pass server errors as errors, keyed by field name: each shows on its Field and clears when the user edits it. validationMode sets the default for every Field inside.

  • befc825: Select, Combobox and Autocomplete take filter (or null), limit, locale, readOnly, form, inputRef, autoComplete, finalFocus, highlightItemOnHover, onItemHighlighted and loop. The default filter ignores case and accents; Combobox.useFilter and Autocomplete.useFilter give the matchers. New parts: Select.Label, Combobox.Status and Autocomplete.Status (announces the match count). Autocomplete takes autoHighlight, openOnInputClick, submitOnItemClick and mode.

  • befc825: OTPField takes mask, normalizeValue, onValueInvalid, inputMode, autoComplete and form, and gains OTPField.Separator. A required OTPField now blocks form submission until every slot is filled.

  • 07e6783: Add OTPField for one-time codes: a group of single-character inputs that fill left to right. Typing moves forward, Backspace moves back, arrows, Home and End move between slots, and pasting or SMS autofill (autocomplete="one-time-code") spreads a full code across them. validationType limits characters (numeric by default), type="password" masks them, onValueComplete fires once every slot is filled, autoSubmit submits the form, and name submits the code through a hidden input.

  • 07e6783: Select and Combobox support multiple. With it, value, defaultValue and onValueChange use arrays, picking an option toggles it and keeps the list open, the listbox gets aria-multiselectable, the trigger lists the selected labels (or calls renderValue with the arrays), and a form submits every value under name. Combobox adds Combobox.Chips, which shows the selected values as removable chips, and Backspace in an empty search removes the last one.

Release

v1.1.0

npm
Minor Changes
  • 3aabdde: feat(label): add Label component

    @radui/ui/Label renders a native <label> that names a form control (htmlFor, or by wrapping it).

    • Matches Radix Label: double-clicking the label doesn't select its text, while controls nested inside it still get their own clicks.
    • Supports asChild, customRootClass and ref forwarding.
    • Clarity and baremetal styles included.

Release

v1.0.0

npm
Patch Changes
  • 55ee49a: Accessibility and Clarity cleanup across core controls: fix menu/navigation semantics and dismissal, form prop/state routing for Checkbox, Radio, TextArea, Fieldset, Text, and Slider, Avatar/Skeleton sizing, and contrast/alignment issues in the Clarity theme.

  • 54b05e7: Add a Fieldset component with native legend semantics, grouped form-control slots, accessibility docs, and state data attributes.