Component changelog

Field changelog

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

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.

  • 1898db0: Field's validate can return a promise for async checks, such as whether a username is taken. While it's pending, every part carries data-validating and Field.Validity reports validating; a slower, older check never overwrites a newer result. validationDebounceTime waits for typing to pause before validating in onChange mode.

  • 07e6783: Checkbox, Switch, Select and NumberField work inside Field.Root without Field.Control: they take the field's id (so Field.Label names them), name, disabled and required state, and get aria-describedby from Field.Description and Field.Error plus aria-invalid when the field is invalid. A control's own props still win.

  • a265579: Checkbox, Switch, Select and NumberField inside Field.Root now report focus, blur and edits to the field, so data-focused, data-touched and data-dirty follow them, and they carry the field's state attributes themselves. Fields also get data-filled while the control holds a value (non-empty text, a checked box, a picked option). Moving between a NumberField's input and its buttons doesn't count as leaving the field.

  • 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.

  • 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.

  • 07e6783: Add format and locale to NumberField. With format (Intl.NumberFormat options), the value shows as currency, a percent, a unit or with grouping; people can type formatted text such as "2,000" or "1.234,5", and it's reformatted when they leave the field. The value stays a plain number (25% is 0.25) and forms submit that number. The input keeps spinbutton semantics with aria-valuetext.

  • 07e6783: Add NumberField.ScrubArea: drag over it (for example a short label) to change the value, like the inputs in design tools. Moving right or up increments by one step per pixelSensitivity pixels (default 2), Shift uses largeStep, direction="vertical" switches the axis, and min and max still apply. It carries data-scrubbing while dragging. In Clarity it becomes a leading column of the field.

  • 07e6783: Add allowWheelScrub to NumberField: while the input is focused, the mouse wheel steps the value (Shift uses largeStep) and the page doesn't scroll. Scrolling past an unfocused field never changes it.

  • 07e6783: Add Toolbar.Input, a text field that's one stop in the toolbar's arrow-key navigation. ArrowLeft and ArrowRight move the caret and leave the field only once the caret is at its start or end, and Home and End stay in the field. Roving focus now keeps a text field's own role and type instead of stamping button semantics on it.

Patch Changes
  • ed15256Clicking a Field.Label whose control is a popup trigger (Select, Combobox) now focuses the trigger instead of opening the popup, like the label of a native <select>. Labels of checkboxes and switches still toggle them.