diff --git a/change/@fluentui-react-fd94592f-6c11-434f-a340-fce340db9a34.json b/change/@fluentui-react-fd94592f-6c11-434f-a340-fce340db9a34.json
new file mode 100644
index 0000000000000..6135caf03e623
--- /dev/null
+++ b/change/@fluentui-react-fd94592f-6c11-434f-a340-fce340db9a34.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: Added label, required, and error properties to BasePicker.",
+  "packageName": "@fluentui/react",
+  "email": "tpalacino@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
index 480611b64991b..ee575b0a6fcff 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { IPersonaProps, IPersonaStyles } from '@fluentui/react/lib/Persona';
 import {
@@ -42,6 +43,9 @@ const personaStyles: Partial<IPersonaStyles> = {
 export const PeoplePickerListExample: React.FunctionComponent = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
+  const [pickerLabel, setPickerLabel] = React.useState<string | undefined>('Choose People');
+  const [showPickerLabel, setShowPickerLabel] = React.useState(false);
+  const [isPickerRequired, setIsPickerRequired] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
   const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(people);
 
@@ -102,6 +106,18 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
     setIsPickerDisabled(!isPickerDisabled);
   };
 
+  const onShowLabelButtonClick = (): void => {
+    setShowPickerLabel(!showPickerLabel);
+  };
+
+  const onPickerLabelChange = (_: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
+    setPickerLabel(newValue ?? '');
+  };
+
+  const onRequiredButtonClick = (): void => {
+    setIsPickerRequired(!isPickerRequired);
+  };
+
   const onToggleDelayResultsChange = (): void => {
     setDelayResults(!delayResults);
   };
@@ -115,9 +131,17 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
     );
   };
 
+  const onGetErrorMessage = React.useCallback(
+    (items: IPersonaProps[]): string | JSX.Element | PromiseLike<string | JSX.Element> | undefined => {
+      return isPickerRequired && (items || []).length === 0 ? 'Please fill out this field.' : undefined;
+    },
+    [isPickerRequired],
+  );
+
   return (
     <div>
       <ListPeoplePicker
+        label={showPickerLabel ? pickerLabel : undefined}
         // eslint-disable-next-line react/jsx-no-bind
         onResolveSuggestions={onFilterChanged}
         // eslint-disable-next-line react/jsx-no-bind
@@ -141,6 +165,8 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
         componentRef={picker}
         resolveDelay={300}
         disabled={isPickerDisabled}
+        required={isPickerRequired}
+        onGetErrorMessage={onGetErrorMessage}
       />
       <Checkbox
         label="Disable People Picker"
@@ -156,6 +182,28 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
         onChange={onToggleDelayResultsChange}
         styles={checkboxStyles}
       />
+      <Checkbox
+        label="Required People Picker"
+        checked={isPickerRequired}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={onRequiredButtonClick}
+        styles={checkboxStyles}
+      />
+      <Checkbox
+        label="Show Label"
+        checked={showPickerLabel}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={onShowLabelButtonClick}
+        styles={checkboxStyles}
+      />
+      {showPickerLabel && (
+        <TextField
+          label={'People Picker Label'}
+          value={pickerLabel}
+          // eslint-disable-next-line react/jsx-no-bind
+          onChange={onPickerLabelChange}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
index 410efaa4a7145..f12398e2db581 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { IPersonaProps } from '@fluentui/react/lib/Persona';
 import {
@@ -29,6 +30,9 @@ const checkboxStyles = {
 export const PeoplePickerNormalExample: React.FunctionComponent = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
+  const [pickerLabel, setPickerLabel] = React.useState<string | undefined>('Choose People');
+  const [showPickerLabel, setShowPickerLabel] = React.useState(false);
+  const [isPickerRequired, setIsPickerRequired] = React.useState(false);
   const [showSecondaryText, setShowSecondaryText] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
   const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(people);
@@ -103,6 +107,18 @@ export const PeoplePickerNormalExample: React.FunctionComponent = () => {
     setIsPickerDisabled(!isPickerDisabled);
   };
 
+  const onShowLabelButtonClick = (): void => {
+    setShowPickerLabel(!showPickerLabel);
+  };
+
+  const onPickerLabelChange = (_: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
+    setPickerLabel(newValue ?? '');
+  };
+
+  const onRequiredButtonClick = (): void => {
+    setIsPickerRequired(!isPickerRequired);
+  };
+
   const onToggleDelayResultsChange = (): void => {
     setDelayResults(!delayResults);
   };
@@ -111,9 +127,17 @@ export const PeoplePickerNormalExample: React.FunctionComponent = () => {
     setShowSecondaryText(!showSecondaryText);
   };
 
+  const onGetErrorMessage = React.useCallback(
+    (items: IPersonaProps[]): string | JSX.Element | PromiseLike<string | JSX.Element> | undefined => {
+      return isPickerRequired && (items || []).length === 0 ? 'Please fill out this field.' : undefined;
+    },
+    [isPickerRequired],
+  );
+
   return (
     <div>
       <NormalPeoplePicker
+        label={showPickerLabel ? pickerLabel : undefined}
         // eslint-disable-next-line react/jsx-no-bind
         onResolveSuggestions={onFilterChanged}
         // eslint-disable-next-line react/jsx-no-bind
@@ -137,6 +161,8 @@ export const PeoplePickerNormalExample: React.FunctionComponent = () => {
         onInputChange={onInputChange}
         resolveDelay={300}
         disabled={isPickerDisabled}
+        required={isPickerRequired}
+        onGetErrorMessage={onGetErrorMessage}
       />
       <Checkbox
         label="Disable People Picker"
@@ -159,6 +185,28 @@ export const PeoplePickerNormalExample: React.FunctionComponent = () => {
         onChange={onToggleShowSecondaryText}
         styles={checkboxStyles}
       />
+      <Checkbox
+        label="Required People Picker"
+        checked={isPickerRequired}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={onRequiredButtonClick}
+        styles={checkboxStyles}
+      />
+      <Checkbox
+        label="Show Label"
+        checked={showPickerLabel}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={onShowLabelButtonClick}
+        styles={checkboxStyles}
+      />
+      {showPickerLabel && (
+        <TextField
+          label={'People Picker Label'}
+          value={pickerLabel}
+          // eslint-disable-next-line react/jsx-no-bind
+          onChange={onPickerLabelChange}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/react/src/components/pickers/BasePicker.styles.ts b/packages/react/src/components/pickers/BasePicker.styles.ts
index b6965fe710a14..e8d0d7d392155 100644
--- a/packages/react/src/components/pickers/BasePicker.styles.ts
+++ b/packages/react/src/components/pickers/BasePicker.styles.ts
@@ -10,13 +10,15 @@ import type { IStyle } from '../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-BasePicker',
+  label: 'ms-BasePicker-label',
   text: 'ms-BasePicker-text',
   itemsWrapper: 'ms-BasePicker-itemsWrapper',
   input: 'ms-BasePicker-input',
+  error: 'ms-BasePicker-error',
 };
 
 export function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {
-  const { className, theme, isFocused, inputClassName, disabled } = props;
+  const { className, theme, isFocused, inputClassName, disabled, hasErrorMessage } = props;
 
   if (!theme) {
     throw new Error('theme is undefined or null in base BasePicker getStyles function.');
@@ -56,8 +58,22 @@ export function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {
   // const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
   const disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
 
+  const focusColor = isFocused && !disabled && (hasErrorMessage ? semanticColors.errorText : inputFocusBorderAlt);
+
   return {
     root: [classNames.root, className, { position: 'relative' }],
+    error: [
+      classNames.error,
+      {
+        fontSize: 12,
+        fontWeight: 400,
+        color: semanticColors.errorText,
+        margin: 0,
+        paddingTop: 5,
+        display: hasErrorMessage ? 'flex' : 'none',
+        alignItems: 'center',
+      },
+    ],
     text: [
       classNames.text,
       {
@@ -79,7 +95,7 @@ export function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {
             },
           },
         },
-      isFocused && !disabled && getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),
+        focusColor && getInputFocusStyle(focusColor, effects.roundedCorner2),
       disabled && {
         borderColor: disabledOverlayColor,
         selectors: {
@@ -102,6 +118,14 @@ export function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {
           },
         },
       },
+      hasErrorMessage && {
+        borderColor: semanticColors.errorText,
+        selectors: {
+          ':hover': {
+            borderColor: semanticColors.errorText,
+          },
+        },
+      },
     ],
     itemsWrapper: [
       classNames.itemsWrapper,
diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx
index acf894a7ca8e5..0a22b22e261ca 100644
--- a/packages/react/src/components/pickers/BasePicker.tsx
+++ b/packages/react/src/components/pickers/BasePicker.tsx
@@ -19,6 +19,7 @@ import { SuggestionsController } from './Suggestions/SuggestionsController';
 import { ValidationState } from './BasePicker.types';
 import { Autofill } from '../Autofill/index';
 import * as stylesImport from './BasePicker.scss';
+import { Label } from '../../Label';
 import type { IProcessedStyleSet } from '../../Styling';
 import type {
   ISuggestions,
@@ -49,6 +50,7 @@ export interface IBasePickerState<T> {
   isResultsFooterVisible?: boolean;
   selectedIndices?: number[];
   selectionRemoved?: T;
+  errorMessage?: string | JSX.Element;
 }
 
 /**
@@ -72,6 +74,10 @@ export type IPickerAriaIds = {
    * Aria id for element with role=combobox
    */
   combobox: string;
+  /**
+   * Aria id for error message component
+   */
+  error: string;
 };
 
 const getClassNames = classNamesFunction<IBasePickerStyleProps, IBasePickerStyles>();
@@ -115,6 +121,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
   private _styledSuggestions = getStyledSuggestions(this.SuggestionOfProperType);
   private _id: string;
   private _async: Async;
+  private _isMounted: boolean = false;
   private _onResolveSuggestionsDebounced: (updatedValue: string) => void;
   private _overrideScrollDismiss = false;
   private _overrideScrollDimissTimeout: number;
@@ -139,6 +146,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
       selectedSuggestionAlert: `selected-suggestion-alert-${this._id}`,
       suggestionList: `suggestion-list-${this._id}`,
       combobox: `combobox-${this._id}`,
+      error: `error-${this._id}`,
     };
     this.suggestionStore = new SuggestionsController<T>();
     this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });
@@ -160,7 +168,9 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
   }
 
   public componentDidMount(): void {
+    this._isMounted = true;
     this._async = new Async(this);
+    this._updateErrorMessage(this.state.items);
     this.selection.setItems(this.state.items);
     this._onResolveSuggestionsDebounced = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);
   }
@@ -183,6 +193,8 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
       }
     }
 
+    this._updateErrorMessage(this.state.items);
+
     // handle dismiss buffer after suggestions are opened
     if (this.state.suggestionsVisible && !oldState.suggestionsVisible) {
       this._overrideScrollDismiss = true;
@@ -194,6 +206,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
   }
 
   public componentWillUnmount(): void {
+    this._isMounted = false;
     if (this.currentPromise) {
       this.currentPromise = undefined;
     }
@@ -269,6 +282,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
 
     const suggestionsVisible = !!this.state.suggestionsVisible;
     const suggestionsAvailable = suggestionsVisible ? this._ariaMap.suggestionList : undefined;
+    const hasError = !!(this.state.errorMessage ?? this.props.errorMessage);
     // TODO
     // Clean this up by leaving only the first part after removing support for SASS.
     // Currently we can not remove the SASS styles from BasePicker class because it
@@ -284,10 +298,13 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
           className,
           isFocused,
           disabled,
+          hasErrorMessage: hasError,
           inputClassName: inputProps && inputProps.className,
         })
       : {
           root: css('ms-BasePicker', className ? className : ''),
+          error: 'ms-BasePicker-error',
+          label: 'ms-BasePicker-label',
           text: css('ms-BasePicker-text', legacyStyles.pickerText, this.state.isFocused && legacyStyles.inputFocused),
           itemsWrapper: legacyStyles.pickerItems,
           input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),
@@ -295,6 +312,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
         };
 
     const comboLabel = this.props['aria-label'] || inputProps?.['aria-label'];
+    const inputId = inputProps?.id ?? this._ariaMap.combobox;
 
     // selectionAriaLabel is contained in a separate <span> rather than an aria-label on the items list
     // because if the items list has an aria-label, the aria-describedby on the input will only read
@@ -309,6 +327,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
         onBlur={this.onBlur}
         onClick={this.onWrapperClick}
       >
+        {this.renderLabel(inputId, classNames.label)}
         {this.renderCustomAlert(classNames.screenReaderText)}
         <span id={`${this._ariaMap.selectedItems}-label`} hidden>
           {selectionAriaLabel || comboLabel}
@@ -331,7 +350,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
                 {...(inputProps as any)}
                 className={classNames.input}
                 componentRef={this.input}
-                id={inputProps?.id ? inputProps.id : this._ariaMap.combobox}
+                id={inputId}
                 onClick={this.onClick}
                 onFocus={this.onInputFocus}
                 onBlur={this.onInputBlur}
@@ -339,7 +358,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
                 suggestedDisplayValue={suggestedDisplayValue}
                 aria-activedescendant={suggestionsVisible ? this.getActiveDescendant() : undefined}
                 aria-controls={suggestionsAvailable}
-                aria-describedby={items.length > 0 ? this._ariaMap.selectedItems : undefined}
+                aria-describedby={this._getDescribedBy(items, hasError)}
                 aria-expanded={suggestionsVisible}
                 aria-haspopup="listbox"
                 aria-label={comboLabel}
@@ -350,17 +369,53 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
             )}
           </div>
         </SelectionZone>
+        {this.renderError(classNames.error)}
         {this.renderSuggestions()}
       </div>
     );
   }
 
+  protected _getDescribedBy = (items: T[], hasError: boolean): string => {
+    let describedBy = '';
+    if (items.length > 0) {
+      describedBy += this._ariaMap.selectedItems;
+    }
+    if (hasError) {
+      describedBy += this._ariaMap.error;
+    }
+    return describedBy;
+  };
+
   protected canAddItems(): boolean {
     const { items } = this.state;
     const { itemLimit } = this.props;
     return itemLimit === undefined || items.length < itemLimit;
   }
 
+  protected renderLabel(inputId: string, className?: string): JSX.Element | null {
+    const { label, disabled, required } = this.props;
+    if (!label) {
+      return null;
+    }
+    return (
+      <Label className={className} disabled={disabled} required={required} htmlFor={inputId}>
+        {label}
+      </Label>
+    );
+  }
+
+  protected renderError(className?: string): JSX.Element | null {
+    const { errorMessage = this.state.errorMessage } = this.props;
+    if (!errorMessage) {
+      return null;
+    }
+    return (
+      <div role="alert" id={this._ariaMap.error} className={className}>
+        {errorMessage}
+      </div>
+    );
+  }
+
   protected renderSuggestions(): JSX.Element | null {
     const StyledTypedSuggestions: React.FunctionComponent<ISuggestionsProps<T>> = this._styledSuggestions;
 
@@ -1010,6 +1065,44 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
     }
   }
 
+  private async _getErrorMessage(items: T[]): Promise<string | JSX.Element | undefined> {
+    if (this.props.errorMessage) {
+      return this.props.errorMessage;
+    }
+    if (this.props.onGetErrorMessage) {
+      try {
+        const errorMessage = this.props.onGetErrorMessage(items);
+        if (errorMessage) {
+          if ((errorMessage as PromiseLike<string | JSX.Element>).then) {
+            return await (errorMessage as PromiseLike<string | JSX.Element>);
+          } else {
+            return errorMessage as string | JSX.Element;
+          }
+        } else {
+          return undefined;
+        }
+      } catch (err) {
+        /* NO-OP */
+      }
+    }
+  }
+
+  private _updateErrorMessage(items: T[]): void {
+    let newErrorMessage: string | JSX.Element | undefined;
+    this._getErrorMessage(items)
+      .then(errorMessage => {
+        newErrorMessage = errorMessage;
+      })
+      .catch(() => {
+        /* NO-OP */
+      })
+      .finally(() => {
+        if (this._isMounted && newErrorMessage !== this.state.errorMessage) {
+          this.setState({ errorMessage: newErrorMessage });
+        }
+      });
+  }
+
   /**
    * Controls what happens whenever there is an action that impacts the selected items.
    * If `selectedItems` is provided, this will act as a controlled component and it will not update its own state.
@@ -1020,6 +1113,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
       this.onChange(items);
     } else {
       this.setState({ items }, () => {
+        this._updateErrorMessage(items);
         this._onSelectedItemsUpdated(items);
       });
     }
@@ -1101,12 +1195,13 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
 
 export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
   public render(): JSX.Element {
-    const { suggestedDisplayValue, isFocused } = this.state;
+    const { suggestedDisplayValue, isFocused, items } = this.state;
     const { className, inputProps, disabled, selectionAriaLabel, selectionRole = 'list', theme, styles } = this.props;
 
     const suggestionsVisible = !!this.state.suggestionsVisible;
 
     const suggestionsAvailable: string | undefined = suggestionsVisible ? this._ariaMap.suggestionList : undefined;
+    const hasError = !!(this.state.errorMessage ?? this.props.errorMessage);
     // TODO
     // Clean this up by leaving only the first part after removing support for SASS.
     // Currently we can not remove the SASS styles from BasePicker class because it
@@ -1121,10 +1216,14 @@ export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> ex
           theme,
           className,
           isFocused,
+          disabled,
+          hasErrorMessage: hasError,
           inputClassName: inputProps && inputProps.className,
         })
       : {
           root: css('ms-BasePicker', legacyStyles.picker, className ? className : ''),
+          error: 'ms-BasePicker-error',
+          label: 'ms-BasePicker-label',
           text: css(
             'ms-BasePicker-text',
             legacyStyles.pickerText,
@@ -1137,9 +1236,11 @@ export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> ex
         };
 
     const comboLabel = this.props['aria-label'] || inputProps?.['aria-label'];
+    const inputId = inputProps?.id ?? this._ariaMap.combobox;
 
     return (
       <div ref={this.root} onBlur={this.onBlur} onFocus={this.onFocus}>
+        {this.renderLabel(inputId, classNames.label)}
         <div className={classNames.root} onKeyDown={this.onKeyDown}>
           {this.renderCustomAlert(classNames.screenReaderText)}
           <span id={`${this._ariaMap.selectedItems}-label`} hidden>
@@ -1160,9 +1261,9 @@ export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> ex
               aria-expanded={suggestionsVisible}
               aria-haspopup="listbox"
               aria-label={comboLabel}
-              aria-describedby={this.state.items.length > 0 ? this._ariaMap.selectedItems : undefined}
+              aria-describedby={this._getDescribedBy(items, hasError)}
               role="combobox"
-              id={inputProps?.id ? inputProps.id : this._ariaMap.combobox}
+              id={inputId}
               disabled={disabled}
               onInputChange={this.props.onInputChange}
             />
@@ -1179,6 +1280,7 @@ export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> ex
             {this.renderItems()}
           </div>
         </SelectionZone>
+        {this.renderError(classNames.error)}
       </div>
     );
   }
diff --git a/packages/react/src/components/pickers/BasePicker.types.ts b/packages/react/src/components/pickers/BasePicker.types.ts
index 44d73a57365b3..5b5ad9121a709 100644
--- a/packages/react/src/components/pickers/BasePicker.types.ts
+++ b/packages/react/src/components/pickers/BasePicker.types.ts
@@ -44,6 +44,11 @@ export interface IBasePickerProps<T> extends IReactProps<any> {
    */
   componentRef?: IRefObject<IBasePicker<T>>;
 
+  /**
+   * Descriptive label for the field.
+   */
+  label?: string;
+
   /**
    * Function that specifies how the selected item will appear.
    */
@@ -135,6 +140,28 @@ export interface IBasePickerProps<T> extends IReactProps<any> {
    */
   inputProps?: IInputProps;
 
+  /**
+   * Static error message displayed below the selection zone of the field. Use `onGetErrorMessage` to dynamically
+   * change the error message displayed (if any) based on the current value. `errorMessage` and
+   * `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence).
+   */
+  errorMessage?: string | JSX.Element;
+
+  /**
+   * Function used to determine whether the selected items are valid and get an error message if not.
+   * Mutually exclusive with the static string `errorMessage` (it will take precedence over this).
+   *
+   * When it returns `string | JSX.Element`:
+   * - If valid, it returns empty string.
+   * - If invalid, it returns the error message and the text field will
+   *   show a red border and show an error message below the text field.
+   *
+   * When it returns `Promise<string | JSX.Element>`:
+   * - The resolved value is displayed as the error message.
+   * - If rejected, the value is thrown away.
+   */
+  onGetErrorMessage?: (items: T[]) => string | JSX.Element | PromiseLike<string | JSX.Element> | undefined;
+
   /**
    * A callback for when an item is removed from the suggestion list
    */
@@ -156,6 +183,12 @@ export interface IBasePickerProps<T> extends IReactProps<any> {
    */
   disabled?: boolean;
 
+  /**
+   * Whether or not the field is required.
+   * @defaultvalue false
+   */
+  required?: boolean;
+
   /**
    * Restrict the amount of selectable items.
    * @defaultvalue undefined
@@ -317,6 +350,9 @@ export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement>
  * {@docCategory Pickers}
  */
 export type IBasePickerStyleProps = Pick<IBasePickerProps<any>, 'theme' | 'className' | 'disabled'> & {
+  /** Whether the element has an error message or not. */
+  hasErrorMessage: boolean;
+
   /** Whether text style area is focused */
   isFocused?: boolean;
 
@@ -332,12 +368,18 @@ export interface IBasePickerStyles {
   /** Root element of any picker extending from BasePicker (wraps all the elements). */
   root: IStyle;
 
+  /** Refers fo the error message element. */
+  error: IStyle;
+
   /**
    * Refers to the elements already selected (picked) wrapped by `itemsWrapper` along with the input to type
    * a new selection.
    */
   text: IStyle;
 
+  /** Refers to the label element (if specified). */
+  label: IStyle;
+
   /** Refers to the items already selected (picked). */
   itemsWrapper: IStyle;