diff --git a/.changeset/lazy-comics-crash.md b/.changeset/lazy-comics-crash.md new file mode 100644 index 0000000000..962030cc23 --- /dev/null +++ b/.changeset/lazy-comics-crash.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Add missing `data-invalid` attribute (#3149) diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index ee5d1b4d8e..650b18e61d 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -285,6 +285,14 @@ the popover and listbox components. - **data-filled**: Indicates if the select has a value, is focused, has start/end content or is open. +- **data-has-value**: + Indicates if the select has selected item(s). +- **data-has-label**: + Indicates if the select has a label. Based on `label` prop. +- **data-has-helper**: + Indicates if the select has helper text. Based on `errorMessage` or `description` prop. +- **data-invalid**: + Indicates if the select is invalid. Based on `isInvalid` prop. `Select` has the following attributes on the `trigger` element: diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 35600017ba..fb3b730b6e 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -377,6 +377,7 @@ export function useSelect(originalProps: UseSelectProps) { "data-has-value": dataAttr(hasValue), "data-has-label": dataAttr(hasLabel), "data-has-helper": dataAttr(hasHelper), + "data-invalid": dataAttr(isInvalid), className: slots.base({ class: clsx(baseStyles, props.className), }),