Skip to content

Commit 540aa21

Browse files
ryo-manbajrgarciadev
ryo-manba
and
jrgarciadev
authored
feat: switch default validationBehavior to aria and allow switching via props (#2987)
* chore: add support validationBehavior aria * chore: add validationBehavior to Provider * chore: add autocomplete validation test * chore: add checkbox validation test * fix(input): require condition * docs: add description of validationBehavior props * chore: add support validationBehavior props for date components * docs(dates): add description of validationBehavior props * chore: add changeset * chore: format * chore: fix test * fix: select validationBehavior is not support yet * fix: select validationBehavior not supported yet * chore(docs): validation behavior prop added to nextui-provider --------- Co-authored-by: Junior Garcia <[email protected]>
1 parent bc75983 commit 540aa21

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+901
-307
lines changed

‎.changeset/smooth-laws-tap.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"@nextui-org/autocomplete": minor
3+
"@nextui-org/checkbox": minor
4+
"@nextui-org/date-input": minor
5+
"@nextui-org/date-picker": minor
6+
"@nextui-org/input": minor
7+
"@nextui-org/radio": minor
8+
"@nextui-org/select": minor
9+
"@nextui-org/system": minor
10+
"@nextui-org/use-aria-multiselect": minor
11+
---
12+
13+
Change validationBehavior from native to aria by default, with the option to change via props.

‎apps/docs/content/docs/api-references/nextui-provider.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,15 @@ interface AppProviderProps {
158158
- **Type**: `boolean`
159159
- **Default**: Same as `disableAnimation`
160160

161+
<Spacer y={2}/>
162+
163+
`validationBehavior`
164+
165+
- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid,
166+
or mark the field as required or invalid via ARIA.
167+
- **Type**: `native | aria`
168+
- **Default**: `aria`
169+
161170
---
162171

163172
## Types

‎apps/docs/content/docs/components/autocomplete.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,7 @@ properties to customize the popover, listbox and input components.
428428
| disabledKeys | `all` \| `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
429429
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message to display below the field. | - |
430430
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
431+
| 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` |
431432
| startContent | `ReactNode` | Element to be rendered in the left side of the Autocomplete. | - |
432433
| endContent | `ReactNode` | Element to be rendered in the right side of the Autocomplete. | - |
433434
| autoFocus | `boolean` | Whether the Autocomplete should be focused on render. | `false` |

‎apps/docs/content/docs/components/calendar.mdx

+1-2
Original file line numberDiff line numberDiff line change
@@ -226,10 +226,9 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
226226
| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - |
227227
| 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<br> calendars` |
228228
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - |
229-
| 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. | - |
230229
| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` |
231230
| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` |
232-
| 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. | - |
231+
| 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. | - |
233232

234233
### Calendar Events
235234

‎apps/docs/content/docs/components/checkbox-group.mdx

+23-22
Original file line numberDiff line numberDiff line change
@@ -93,28 +93,29 @@ In case you need to customize the checkbox even further, you can use the `useChe
9393

9494
### Checkbox Group Props
9595

96-
| Attribute | Type | Description | Default |
97-
| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------- |
98-
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
99-
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
100-
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
101-
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
102-
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
103-
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
104-
| label | `string` | The label of the CheckboxGroup. | - |
105-
| value | `string[]` | The current selected values. (controlled). | - |
106-
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
107-
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
108-
| isInvalid | `boolean` | Whether the checkbox group is invalid. | `false` |
109-
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
110-
| description | `ReactNode` | The checkbox group description. | - |
111-
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
112-
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
113-
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
114-
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
115-
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
116-
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
117-
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |
96+
| Attribute | Type | Description | Default |
97+
| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
98+
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
99+
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
100+
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
101+
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
102+
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
103+
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
104+
| label | `string` | The label of the CheckboxGroup. | - |
105+
| value | `string[]` | The current selected values. (controlled). | - |
106+
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
107+
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
108+
| isInvalid | `boolean` | Whether the checkbox group is invalid. | `false` |
109+
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
110+
| description | `ReactNode` | The checkbox group description. | - |
111+
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
112+
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
113+
| 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` |
114+
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
115+
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
116+
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
117+
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
118+
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |
118119

119120
### Checkbox Group Events
120121

0 commit comments

Comments
 (0)