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
Minor Changes
-
befc825: Dialog, AlertDialog, Popover, Tooltip, HoverCard, menus, Select, Combobox and NavigationMenu take
actionsRefwithclose(). Field and Form takeactionsRefwithvalidate(). Field takes controlledtouchedanddirty, andField.ControltakesonValueChange. -
1898db0: Field's
validatecan return a promise for async checks, such as whether a username is taken. While it's pending, every part carriesdata-validatingandField.Validityreportsvalidating; a slower, older check never overwrites a newer result.validationDebounceTimewaits for typing to pause before validating inonChangemode. -
07e6783: Checkbox, Switch, Select and NumberField work inside
Field.RootwithoutField.Control: they take the field's id (soField.Labelnames them), name, disabled and required state, and getaria-describedbyfromField.DescriptionandField.Errorplusaria-invalidwhen the field is invalid. A control's own props still win. -
a265579: Checkbox, Switch, Select and NumberField inside
Field.Rootnow report focus, blur and edits to the field, sodata-focused,data-touchedanddata-dirtyfollow them, and they carry the field's state attributes themselves. Fields also getdata-filledwhile 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-describedbyandaria-invalidare wired automatically, Error renders only while the field isinvalid, and every part carriesdata-invalid,data-disabled,data-required,data-focused,data-touchedanddata-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
validatefunction, and shows the result pervalidationMode: after a submit attempt (onSubmit, the default), on blur, or on change, then updates live as the user fixes it.Field.Errorshows the validation message when it has no children, andmatchgives each problem its own message, for examplematch="valueMissing".Field.Validityrenders custom UI from the result. Parts carrydata-validanddata-invalid, andinvalidstill forces the error state.Resetting the form hides shown errors and clears
data-touchedanddata-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,
onFormSubmitreceives the values as an object. Pass server errors aserrors, keyed by field name: each shows on its Field and clears when the user edits it.validationModesets the default for every Field inside. -
07e6783: Add
formatandlocaleto NumberField. Withformat(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 witharia-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 onestepperpixelSensitivitypixels (default 2), Shift useslargeStep,direction="vertical"switches the axis, and min and max still apply. It carriesdata-scrubbingwhile dragging. In Clarity it becomes a leading column of the field. -
07e6783: Add
allowWheelScrubto NumberField: while the input is focused, the mouse wheel steps the value (Shift useslargeStep) 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.Labelwhose 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.