From 1891c2ab2619b24705c5cf9b7293356e6d2f2d9d Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 15:17:18 +0800 Subject: [PATCH 01/10] chore(input): set validationBehavior to native --- packages/components/input/stories/input.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index ef7e718a1b..6e180a0981 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -527,6 +527,7 @@ export const Required = { args: { ...defaultProps, isRequired: true, + validationBehavior: "native", }, }; @@ -682,6 +683,7 @@ export const WithValidation = { isRequired: true, label: "Number", placeholder: "Enter a number(0-100)", + validationBehavior: "native", }, }; From d890270bd476ec9c9d7290132df88f3f8cc05020 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 15:44:10 +0800 Subject: [PATCH 02/10] chore(docs): revise validate content in input --- apps/docs/content/docs/components/input.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index 35b0df3db1..deeab401cf 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput` | placeholder | `string` | The placeholder of the input. | - | | description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | From 60e9fccdf5c5a58352cc7dcf9af0ebd040d52a8b Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 16:11:57 +0800 Subject: [PATCH 03/10] chore(input): set validationBehavior to native --- packages/components/input/stories/input.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index 6e180a0981..2c23ca3c9f 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -666,6 +666,7 @@ export const WithErrorMessageFunction = { return "Value is required"; } }, + validationBehavior: "native", }, }; From 7c253f87284d9fb70acf72ea319b34bb5b7a1a7d Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 16:50:55 +0800 Subject: [PATCH 04/10] chore(docs): add Validation Behavior to breaking change --- apps/docs/content/blog/v2.4.0.mdx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/blog/v2.4.0.mdx b/apps/docs/content/blog/v2.4.0.mdx index 49badad758..c5a020ea3d 100644 --- a/apps/docs/content/blog/v2.4.0.mdx +++ b/apps/docs/content/blog/v2.4.0.mdx @@ -266,8 +266,20 @@ you need to update the import as follows: + import {cn} from "@nextui-org/theme" ``` - +### Validation Behavior + +Since v2.4.0, we've changed the default validation behavior to `aria` wihch means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above. + +For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead. + +```tsx +
+ + +
+``` + ## Other Changes @@ -307,6 +319,7 @@ you need to update the import as follows: - Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout. [PR](https://github.com/nextui-org/nextui/pull/3049) - [@Gaic4o](https://github.com/Gaic4o) **Documentation**: + - Updated documentation to reflect the new features and changes in the components, API references, and CLI. Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba), From 6bd9af82722799058ec66a16dc95f077c9a98562 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 16:55:02 +0800 Subject: [PATCH 05/10] chore(docs): revise content in cli --- apps/docs/content/blog/v2.4.0.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/blog/v2.4.0.mdx b/apps/docs/content/blog/v2.4.0.mdx index c5a020ea3d..a7eeaa7667 100644 --- a/apps/docs/content/blog/v2.4.0.mdx +++ b/apps/docs/content/blog/v2.4.0.mdx @@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list. ### Doctor Command add peerDependencies check -The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954). +The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more). From 2447a1528d18cda404dfb3ff49623b9454175614 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 21:12:09 +0800 Subject: [PATCH 06/10] chore(docs): fix typo --- apps/docs/content/blog/v2.4.0.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/blog/v2.4.0.mdx b/apps/docs/content/blog/v2.4.0.mdx index a7eeaa7667..4222f99585 100644 --- a/apps/docs/content/blog/v2.4.0.mdx +++ b/apps/docs/content/blog/v2.4.0.mdx @@ -268,7 +268,7 @@ you need to update the import as follows: ### Validation Behavior -Since v2.4.0, we've changed the default validation behavior to `aria` wihch means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above. +Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above. For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead. From c00316edf610d72105446bd83fa30b1e6c241bb6 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 21:18:58 +0800 Subject: [PATCH 07/10] chore(docs): update validate in other components --- apps/docs/content/docs/components/date-input.mdx | 2 +- apps/docs/content/docs/components/date-picker.mdx | 2 +- apps/docs/content/docs/components/date-range-picker.mdx | 2 +- apps/docs/content/docs/components/radio-group.mdx | 2 +- apps/docs/content/docs/components/range-calendar.mdx | 2 +- apps/docs/content/docs/components/textarea.mdx | 2 +- apps/docs/content/docs/components/time-input.mdx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx index 0c0f6d2452..e9d17c5503 100644 --- a/apps/docs/content/docs/components/date-input.mdx +++ b/apps/docs/content/docs/components/date-input.mdx @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date"; | locale | `string` | The locale to display and edit the value according to. | - | | description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - | diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index 0a305b854e..ead42d035d 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - | | description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - | diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index 9d24d14332..fc727a25a1 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -354,7 +354,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - | | description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - | +| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - | diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx index 8bdfaa350e..ab65a795e0 100644 --- a/apps/docs/content/docs/components/radio-group.mdx +++ b/apps/docs/content/docs/components/radio-group.mdx @@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use | defaultValue | `string[]` | The default selected value. (uncontrolled). | - | | description | `ReactNode` | Radio group description . | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | Radio group error message. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the radio group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 416f212254..7c3907087c 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -226,7 +226,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr | isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | | | createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all
calendars` | | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | | -| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - | | +| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | | hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | | | disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | | | classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | | diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx index 0148ce2825..6e3253929d 100644 --- a/apps/docs/content/docs/components/textarea.mdx +++ b/apps/docs/content/docs/components/textarea.mdx @@ -157,7 +157,7 @@ You can use the `value` and `onValueChange` properties to control the input valu | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | | description | `ReactNode` | A description for the textarea. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the textarea. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | labelPlacement | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` | | fullWidth | `boolean` | Whether the textarea should take up the width of its parent. | `true` | diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx index 6777f25753..96c9da853a 100644 --- a/apps/docs/content/docs/components/time-input.mdx +++ b/apps/docs/content/docs/components/time-input.mdx @@ -223,7 +223,7 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen | autoFocus | `boolean` | Whether the element should receive focus on render. | - | | description | `ReactNode` | A description for the field. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | -| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - | +| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | disableAnimation | `boolean` | Whether to disable the animation of the time input. | - | | classNames | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots. | - | From ec9600b6cd71915ab9950fc04fa9c61ac08fb30e Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 28 May 2024 21:19:58 +0800 Subject: [PATCH 08/10] chore(docs): update validate content --- apps/docs/content/docs/components/checkbox-group.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx index ac1f1927a2..bd4466a484 100644 --- a/apps/docs/content/docs/components/checkbox-group.mdx +++ b/apps/docs/content/docs/components/checkbox-group.mdx @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe | validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - | | description | `ReactNode` | The checkbox group description. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - | -| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - | +| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | From 597213a2d184d56345a4a93b07225fe186737b0c Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 30 May 2024 14:38:00 +0800 Subject: [PATCH 09/10] chore(input): undo validationBehavior --- packages/components/input/stories/input.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index 2c23ca3c9f..ef7e718a1b 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -527,7 +527,6 @@ export const Required = { args: { ...defaultProps, isRequired: true, - validationBehavior: "native", }, }; @@ -666,7 +665,6 @@ export const WithErrorMessageFunction = { return "Value is required"; } }, - validationBehavior: "native", }, }; @@ -684,7 +682,6 @@ export const WithValidation = { isRequired: true, label: "Number", placeholder: "Enter a number(0-100)", - validationBehavior: "native", }, }; From 1e84b98ce68aeff13b6a8e4db0750618837b2bd9 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 30 May 2024 15:03:17 +0800 Subject: [PATCH 10/10] refactor(docs): revise validate content --- apps/docs/content/docs/components/checkbox-group.mdx | 2 +- apps/docs/content/docs/components/date-input.mdx | 2 +- apps/docs/content/docs/components/date-picker.mdx | 2 +- apps/docs/content/docs/components/date-range-picker.mdx | 2 +- apps/docs/content/docs/components/input.mdx | 2 +- apps/docs/content/docs/components/radio-group.mdx | 2 +- apps/docs/content/docs/components/range-calendar.mdx | 2 +- apps/docs/content/docs/components/textarea.mdx | 2 +- apps/docs/content/docs/components/time-input.mdx | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx index bd4466a484..a5b10c992c 100644 --- a/apps/docs/content/docs/components/checkbox-group.mdx +++ b/apps/docs/content/docs/components/checkbox-group.mdx @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe | validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - | | description | `ReactNode` | The checkbox group description. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - | -| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx index e9d17c5503..df9e377e38 100644 --- a/apps/docs/content/docs/components/date-input.mdx +++ b/apps/docs/content/docs/components/date-input.mdx @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date"; | locale | `string` | The locale to display and edit the value according to. | - | | description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - | diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index ead42d035d..139b6d809f 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - | | description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - | diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index fc727a25a1..5f33327606 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -354,7 +354,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - | | description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - | diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index deeab401cf..44125d3550 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput` | placeholder | `string` | The placeholder of the input. | - | | description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx index ab65a795e0..78733bed9b 100644 --- a/apps/docs/content/docs/components/radio-group.mdx +++ b/apps/docs/content/docs/components/radio-group.mdx @@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use | defaultValue | `string[]` | The default selected value. (uncontrolled). | - | | description | `ReactNode` | Radio group description . | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | Radio group error message. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the radio group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 7c3907087c..9f747166dc 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -226,7 +226,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr | isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | | | createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all
calendars` | | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | | -| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | +| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | | hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | | | disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | | | classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | | diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx index 6e3253929d..851985ee55 100644 --- a/apps/docs/content/docs/components/textarea.mdx +++ b/apps/docs/content/docs/components/textarea.mdx @@ -157,7 +157,7 @@ You can use the `value` and `onValueChange` properties to control the input valu | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | | description | `ReactNode` | A description for the textarea. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the textarea. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | labelPlacement | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` | | fullWidth | `boolean` | Whether the textarea should take up the width of its parent. | `true` | diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx index 96c9da853a..1010112b7d 100644 --- a/apps/docs/content/docs/components/time-input.mdx +++ b/apps/docs/content/docs/components/time-input.mdx @@ -223,7 +223,7 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen | autoFocus | `boolean` | Whether the element should receive focus on render. | - | | description | `ReactNode` | A description for the field. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | -| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | disableAnimation | `boolean` | Whether to disable the animation of the time input. | - | | classNames | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots. | - |