@leafygreen-ui/combobox 8.1.3 → 9.0.0

package/dist/types/Combobox.types.d.ts

@@ -39,17 +39,18 @@ export declare const Overflow: {
     readonly expandX: "expand-x";
 };
 export type Overflow = (typeof Overflow)[keyof typeof Overflow];
-/** The error state of the Combobox */
+/** The error/valid state of the Combobox */
 export declare const State: {
-    readonly none: "none";
-    readonly error: "error";
+    readonly None: "none";
+    readonly Error: "error";
+    readonly Valid: "valid";
 };
 export type State = (typeof State)[keyof typeof State];
 /** The search state of the Combobox */
 export declare const SearchState: {
-    readonly unset: "unset";
-    readonly error: "error";
-    readonly loading: "loading";
+    readonly Unset: "unset";
+    readonly Error: "error";
+    readonly Loading: "loading";
 };
 export type SearchState = (typeof SearchState)[keyof typeof SearchState];
 /**

package/dist/types/Combobox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/types/Combobox.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;CAQlB,CAAC;AACX,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEK,CAAC;AACX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAEhE,sCAAsC;AACtC,eAAO,MAAM,KAAK;;;CAGR,CAAC;AACX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAEvD,uCAAuC;AACvC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GAC3D,KAAK,CAAC,MAAM,CAAC,GACb,MAAM,GAAG,IAAI,CAAC;AAElB,uFAAuF;AACvF,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AAEH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GACxD,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,GACzD,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;AAE5C;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,WAAW,EAAE,CAAC,GACb,eAAe,CAAC,CAAC,CAAC,CAMpB"}
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/types/Combobox.types.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;CAQlB,CAAC;AACX,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEK,CAAC;AACX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAEhE,4CAA4C;AAC5C,eAAO,MAAM,KAAK;;;;CAAiB,CAAC;AACpC,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAEvD,uCAAuC;AACvC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GAC3D,KAAK,CAAC,MAAM,CAAC,GACb,MAAM,GAAG,IAAI,CAAC;AAElB,uFAAuF;AACvF,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AAEH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GACxD,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,GACzD,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;AAE5C;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,WAAW,EAAE,CAAC,GACb,eAAe,CAAC,CAAC,CAAC,CAMpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "8.1.3",
+  "version": "9.0.0",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -22,18 +22,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/checkbox": "^13.0.0",
+    "@leafygreen-ui/checkbox": "^13.1.0",
     "@leafygreen-ui/chip": "^1.0.2",
     "@leafygreen-ui/emotion": "^4.0.8",
+    "@leafygreen-ui/form-field": "^1.2.0",
     "@leafygreen-ui/hooks": "^8.1.3",
     "@leafygreen-ui/icon": "^12.0.1",
     "@leafygreen-ui/icon-button": "^15.0.21",
-    "@leafygreen-ui/input-option": "^1.1.2",
+    "@leafygreen-ui/input-option": "^1.1.3",
     "@leafygreen-ui/lib": "^13.3.0",
     "@leafygreen-ui/palette": "^4.0.9",
     "@leafygreen-ui/popover": "^11.3.1",
-    "@leafygreen-ui/tokens": "^2.5.2",
-    "@leafygreen-ui/typography": "^18.3.0",
+    "@leafygreen-ui/tokens": "^2.6.0",
+    "@leafygreen-ui/typography": "^19.1.0",
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2"
@@ -42,9 +43,9 @@
     "@leafygreen-ui/leafygreen-provider": "^3.1.12"
   },
   "devDependencies": {
-    "@leafygreen-ui/button": "^21.1.0",
+    "@leafygreen-ui/button": "^21.2.0",
     "@leafygreen-ui/testing-lib": "^0.4.2",
-    "@lg-tools/storybook-utils": "^0.1.0"
+    "@lg-tools/storybook-utils": "^0.1.1"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
   "repository": {

package/src/Combobox/Combobox.spec.tsx

@@ -344,6 +344,15 @@ describe('packages/combobox', () => {
     });
 
     describe('When disabled', () => {
+      test(`Input element renders with aria-disabled and readonly attributes but not disabled attribute when disabled prop is set`, () => {
+        const { inputEl } = renderCombobox(select, {
+          disabled: true,
+        });
+        expect(inputEl.getAttribute('aria-disabled')).toBeTruthy();
+        expect(inputEl.hasAttribute('readonly')).toBeTruthy();
+        expect(inputEl.getAttribute('disabled')).toBeFalsy();
+      });
+
       // disabled prop
       test('Combobox is not clickable when `disabled`', () => {
         const { comboboxEl } = renderCombobox(select, { disabled: true });

package/src/Combobox/Combobox.styles.ts

@@ -4,6 +4,7 @@ import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
+  color,
   focusRing,
   fontFamilies,
   spacing,
@@ -17,7 +18,7 @@ import {
   fontSize,
   lineHeight,
 } from '../ComboboxChip/ComboboxChip.styles';
-import { ComboboxSize as Size, Overflow } from '../types';
+import { ComboboxSize as Size, Overflow, State } from '../types';
 
 /**
  * Util to get the chip height
@@ -29,7 +30,7 @@ const inputHeight = (size: Size) => {
 };
 
 // Gap between each chip
-const flexGap = 4;
+const flexGap = spacing[100];
 
 /**
  * The min-height of the combobox.
@@ -64,27 +65,27 @@ export const comboboxPadding: Record<
 > = {
   [Size.XSmall]: {
     y: getYPadding(Size.XSmall),
-    xLeftWithChip: 1,
-    xLeftWithoutChip: 10,
-    xRight: 4,
+    xLeftWithChip: spacing[25],
+    xLeftWithoutChip: spacing[200],
+    xRight: spacing[100],
   },
   [Size.Small]: {
     y: getYPadding(Size.Small),
-    xLeftWithChip: 4,
-    xLeftWithoutChip: 10,
-    xRight: 8,
+    xLeftWithChip: spacing[100],
+    xLeftWithoutChip: spacing[200],
+    xRight: spacing[100],
   },
   [Size.Default]: {
     y: getYPadding(Size.Default),
-    xLeftWithChip: 6,
-    xLeftWithoutChip: 12,
-    xRight: 12,
+    xLeftWithChip: spacing[150],
+    xLeftWithoutChip: spacing[300],
+    xRight: spacing[200],
   },
   [Size.Large]: {
     y: getYPadding(Size.Large),
-    xLeftWithChip: spacing[2] - 1,
-    xLeftWithoutChip: spacing[2] - 1,
-    xRight: spacing[2] - 1,
+    xLeftWithChip: spacing[300],
+    xLeftWithoutChip: spacing[300],
+    xRight: spacing[200],
   },
 };
 
@@ -92,7 +93,7 @@ export const comboboxPadding: Record<
 export const clearButtonIconSize = 28;
 
 /** Width of the dropdown caret icon (in px) */
-export const caretIconSize = spacing[3];
+export const caretIconSize = spacing[400];
 
 export const comboboxParentStyle = (size: Size): string => {
   return css`
@@ -108,7 +109,7 @@ export const comboboxParentStyle = (size: Size): string => {
 export const baseComboboxStyles = css`
   display: flex;
   align-items: center;
-  gap: ${spacing[2]}px;
+  gap: ${spacing[200]}px;
   cursor: text;
   transition: ${transitionDuration.default}ms ease-in-out;
   transition-property: background-color, box-shadow, border-color;
@@ -137,14 +138,12 @@ export const baseComboboxStyles = css`
 
 export const comboboxThemeStyles: Record<Theme, string> = {
   [Theme.Light]: css`
-    color: ${palette.gray.dark3};
-    background-color: ${palette.white};
-    border-color: ${palette.gray.base};
+    color: ${color.light.text.primary.default};
+    background-color: ${color.light.background.primary.default};
   `,
   [Theme.Dark]: css`
-    color: ${palette.gray.light2};
+    color: ${color.dark.text.primary.default};
     background-color: ${palette.gray.dark4};
-    border-color: ${palette.gray.base};
   `,
 };
 
@@ -160,29 +159,24 @@ export const comboboxSizeStyles = (
   padding-right: ${comboboxPadding[size].xRight}px;
 `;
 
-export const comboboxDisabledStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark1};
-    background-color: ${palette.gray.light2};
-    border-color: ${palette.gray.light1};
-  `,
-  [Theme.Dark]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark1};
-    background-color: ${palette.gray.dark3};
-    border-color: ${palette.gray.dark2};
-  `,
-};
+export const getComboboxDisabledStyles = (theme: Theme) => css`
+  cursor: not-allowed;
+  color: ${color[theme].text.disabled.default};
+  background-color: ${color[theme].background.disabled.default};
+  border-color: ${color[theme].border.disabled.default};
+`;
 
-export const comboboxErrorStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    border-color: ${palette.red.base};
+export const getComboboxStateStyles = (theme: Theme) => ({
+  [State.Error]: css`
+    border-color: ${color[theme].border.error.default};
   `,
-  [Theme.Dark]: css`
-    border-color: ${palette.red.light1};
+  [State.None]: css`
+    border-color: ${color[theme].border.primary.default};
   `,
-};
+  [State.Valid]: css`
+    border-color: ${color[theme].border.success.default};
+  `,
+});
 
 export const comboboxFocusStyle: Record<Theme, string> = {
   [Theme.Light]: css`
@@ -206,16 +200,16 @@ export const iconsWrapperBaseStyles = css`
 
 export const iconsWrapperSizeStyles: Record<Size, string> = {
   [Size.XSmall]: css`
-    gap: ${spacing[1]}px;
+    gap: ${spacing[100]}px;
   `,
   [Size.Small]: css`
-    gap: ${spacing[2]}px;
+    gap: ${spacing[200]}px;
   `,
   [Size.Default]: css`
-    gap: ${spacing[2]}px;
+    gap: ${spacing[200]}px;
   `,
   [Size.Large]: css`
-    gap: ${spacing[2]}px;
+    gap: ${spacing[200]}px;
   `,
 };
 
@@ -291,7 +285,7 @@ export const baseInputElementStyle = css`
 
   // Only add padding if there are chips
   &:not(:first-child) {
-    padding-left: ${spacing[1]}px;
+    padding-left: ${spacing[100]}px;
   }
 
   &:placeholder-shown {
@@ -305,12 +299,12 @@ export const baseInputElementStyle = css`
 export const inputElementThemeStyle: Record<Theme, string> = {
   [Theme.Light]: css`
     &::placeholder {
-      color: ${palette.gray.dark1};
+      color: ${palette.gray.base};
     }
   `,
   [Theme.Dark]: css`
     &::placeholder {
-      color: ${palette.gray.light1};
+      color: ${palette.gray.dark1};
     }
   `,
 };
@@ -318,7 +312,7 @@ export const inputElementThemeStyle: Record<Theme, string> = {
 export const inputElementDisabledThemeStyle: Record<Theme, string> = {
   [Theme.Light]: css`
     &::placeholder {
-      color: ${palette.gray.dark1};
+      color: ${palette.gray.base};
     }
   `,
   [Theme.Dark]: css`
@@ -362,28 +356,13 @@ export const clearButtonStyle = css`
   margin-inline: -6px;
 `;
 
-export const endIconStyle = css`
+export const iconStyle = css`
   height: ${caretIconSize}px;
   width: ${caretIconSize}px;
 `;
 
-export const errorMessageThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.red.base};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.red.light1};
-  `,
-};
-
-export const errorMessageSizeStyle = (size: Size) => css`
-  font-size: ${fontSize[size]}px;
-  line-height: ${lineHeight[size]}px;
-  padding-top: ${comboboxPadding[size].y}px;
-`;
-
 export const labelDescriptionContainerStyle = css`
-  margin-bottom: ${spacing[1]}px;
+  margin-bottom: ${spacing[100]}px;
   display: flex;
   flex-direction: column;
 `;
@@ -407,17 +386,8 @@ export const comboboxOverflowShadowStyles: Record<Theme, string> = {
   `,
 };
 
-export const errorIconThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: palette.red.base,
-  [Theme.Dark]: palette.red.light1,
-};
+export const getCaretIconFill = (theme: Theme) =>
+  color[theme].icon.primary.default;
 
-export const caretIconThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: palette.gray.dark2,
-  [Theme.Dark]: palette.gray.light1,
-};
-
-export const caretIconDisabledStyles: Record<Theme, string> = {
-  [Theme.Light]: palette.gray.base,
-  [Theme.Dark]: palette.gray.dark1,
-};
+export const getCaretIconDisabledFill = (theme: Theme) =>
+  color[theme].icon.disabled.default;

package/src/Combobox/Combobox.tsx

@@ -21,6 +21,7 @@ import isUndefined from 'lodash/isUndefined';
 import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
+import { DEFAULT_MESSAGES, FormFieldFeedback } from '@leafygreen-ui/form-field';
 import {
   useAutoScroll,
   useBackdropClick,
@@ -68,20 +69,17 @@ import { isValueCurrentSelection } from './utils/isValueCurrentSelection';
 import {
   baseComboboxStyles,
   baseInputElementStyle,
-  caretIconDisabledStyles,
-  caretIconThemeStyles,
   clearButtonStyle,
-  comboboxDisabledStyles,
-  comboboxErrorStyles,
   comboboxFocusStyle,
   comboboxOverflowShadowStyles,
   comboboxParentStyle,
   comboboxSizeStyles,
   comboboxThemeStyles,
-  endIconStyle,
-  errorIconThemeStyles,
-  errorMessageSizeStyle,
-  errorMessageThemeStyle,
+  getCaretIconDisabledFill,
+  getCaretIconFill,
+  getComboboxDisabledStyles,
+  getComboboxStateStyles,
+  iconStyle,
   iconsWrapperBaseStyles,
   iconsWrapperSizeStyles,
   inputElementDisabledThemeStyle,
@@ -110,7 +108,8 @@ export function Combobox<M extends boolean>({
   size = ComboboxSize.Default,
   darkMode: darkModeProp,
   state = 'none',
-  errorMessage,
+  errorMessage = DEFAULT_MESSAGES.error,
+  successMessage = DEFAULT_MESSAGES.success,
   searchState = 'unset',
   searchEmptyMessage = 'No results found',
   searchErrorMessage = 'Could not get results!',
@@ -1166,6 +1165,14 @@ export function Combobox<M extends boolean>({
       : { usePortal }),
   } as const;
 
+  const formFieldFeedbackProps = {
+    disabled,
+    errorMessage,
+    size,
+    state,
+    successMessage,
+  } as const;
+
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <ComboboxContext.Provider
@@ -1232,12 +1239,12 @@ export function Combobox<M extends boolean>({
               baseComboboxStyles,
               comboboxThemeStyles[theme],
               comboboxSizeStyles(size, isMultiselectWithSelections),
+              getComboboxStateStyles(theme)[state],
               {
-                [comboboxDisabledStyles[theme]]: disabled,
-                [comboboxErrorStyles[theme]]: state === State.error,
                 [comboboxFocusStyle[theme]]: isElementFocused(
                   ComboboxElement.Input,
                 ),
+                [getComboboxDisabledStyles(theme)]: disabled,
                 [comboboxOverflowShadowStyles[theme]]: shouldShowOverflowShadow,
               },
             )}
@@ -1270,7 +1277,8 @@ export function Combobox<M extends boolean>({
                   },
                 )}
                 placeholder={placeholderValue}
-                disabled={disabled ?? undefined}
+                aria-disabled={disabled}
+                readOnly={disabled}
                 onChange={handleInputChange}
                 value={inputValue}
                 autoComplete="off"
@@ -1282,17 +1290,9 @@ export function Combobox<M extends boolean>({
                 iconsWrapperSizeStyles[size],
               )}
             >
-              {state === 'error' && (
-                <Icon
-                  glyph="Warning"
-                  fill={errorIconThemeStyles[theme]}
-                  className={endIconStyle}
-                />
-              )}
               {clearable && doesSelectionExist(selection) && !disabled && (
                 <IconButton
                   aria-label="Clear selection"
-                  aria-disabled={disabled}
                   disabled={disabled}
                   ref={clearButtonRef}
                   onClick={handleClearButtonClick}
@@ -1305,25 +1305,15 @@ export function Combobox<M extends boolean>({
               )}
               <Icon
                 glyph="CaretDown"
-                className={endIconStyle}
+                className={iconStyle}
                 fill={cx({
-                  [caretIconThemeStyles[theme]]: !disabled,
-                  [caretIconDisabledStyles[theme]]: disabled,
+                  [getCaretIconFill(theme)]: !disabled,
+                  [getCaretIconDisabledFill(theme)]: disabled,
                 })}
               />
             </div>
           </div>
-
-          {state === 'error' && errorMessage && (
-            <div
-              className={cx(
-                errorMessageThemeStyle[theme],
-                errorMessageSizeStyle(size),
-              )}
-            >
-              {errorMessage}
-            </div>
-          )}
+          <FormFieldFeedback {...formFieldFeedbackProps} />
 
           {/******* /
           *  Menu  *

package/src/Combobox/Combobox.types.ts

@@ -110,7 +110,12 @@ export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> &
     /**
      * The message shown below the input when state is `error`
      */
-    errorMessage?: string;
+    errorMessage?: ReactNode;
+
+    /**
+     * The message shown below the input when state is `valid`
+     */
+    successMessage?: ReactNode;
 
     /**
      * The state of search results. Toggles search messages within the menu.

package/src/Combobox.stories.tsx

@@ -118,11 +118,11 @@ const meta: StoryMetaType<typeof Combobox> = {
     },
     searchErrorMessage: {
       control: 'text',
-      if: { arg: 'searchState', eq: SearchState.error },
+      if: { arg: 'searchState', eq: SearchState.Error },
     },
     searchLoadingMessage: {
       control: 'text',
-      if: { arg: 'searchState', eq: SearchState.loading },
+      if: { arg: 'searchState', eq: SearchState.Loading },
     },
     chipTruncationLocation: {
       options: Object.values(TruncationLocation),

package/src/ComboboxContext/ComboboxContext.tsx

@@ -29,8 +29,8 @@ export const defaultContext = {
   withIcons: false,
   disabled: false,
   isOpen: false,
-  state: State.none,
-  searchState: SearchState.unset,
+  state: State.None,
+  searchState: SearchState.Unset,
   overflow: Overflow.expandY,
 };
 

package/src/types/Combobox.types.ts

@@ -1,3 +1,5 @@
+import { FormFieldState } from '@leafygreen-ui/form-field';
+
 /**
  * Identifier for individual component elements within the Combobox
  */
@@ -43,18 +45,15 @@ export const Overflow = {
 } as const;
 export type Overflow = (typeof Overflow)[keyof typeof Overflow];
 
-/** The error state of the Combobox */
-export const State = {
-  none: 'none',
-  error: 'error',
-} as const;
+/** The error/valid state of the Combobox */
+export const State = FormFieldState;
 export type State = (typeof State)[keyof typeof State];
 
 /** The search state of the Combobox */
 export const SearchState = {
-  unset: 'unset',
-  error: 'error',
-  loading: 'loading',
+  Unset: 'unset',
+  Error: 'error',
+  Loading: 'loading',
 } as const;
 export type SearchState = (typeof SearchState)[keyof typeof SearchState];