Identity picker
An identity picker component is used to select one or more people or groups from a list.
Examples
Usage
Use a identity picker to allow the user to select one or more people or groups.
APIs
IIdentityPickerProps
ariaLabel
string
Aria label
ariaLabelledBy
string
Id of another element which labels this one for screen reader users.
className
string
Optional CSS class name to add to IdentityPicker
convertItemToPill
(person: IIdentity, index: number) => ISelectedTagProps
Custom converter to go from identity to tag props
noResultsFoundText
string
String to display when there are no results found.
onBlur
(text?: string) => void
Called on focus away
@param text text value of the picker before focus away
onIdentitiesRemovedrequired
(identities: IIdentity[]) => void
Called when the user removes multiple identities by selecting them and hitting delete
onIdentityAddedrequired
(tag: IIdentity) => void
Called when the user clicks or enters on a suggested person
onIdentityRemovedrequired
(tag: IIdentity) => void
Called when the user removes a previously selected person
onResolveEntity
(email: string, identity: IIdentity | null) => void
This prop specifies a callback where, if this is specified, unresolved emails are allowed to be chosen.
This allows unresolved emails to be passed into the onIdentityAdded callback and they have the following properties
{ entityId: emailAddress, originDirectory: "email", entityType: IdentityType.Custom}
pickerProviderrequired
Provider to handle how to filter the suggested people from a filter.
placeholderText
string
String to show when there is no input in the text field.
renderCustomIdentitySuggestion
(identity: IIdentity) => JSX.Element
Render a suggestion item for a custom identity.
selectedIdentitiesrequired
Identity values of the selected identities This prop is 100% controlled
by the consumer. onIdentityAdded/onIdentityRemoved/onIdentitiesRemoved must also be implemented in order to
work properly. If this value is a array of IIDentities, the prop must be
updated to cause the PeoplePicker to re-render. If this value is an
ObservableValue, then changing its value will cause the PeoplePicker
to re-render.
suggestionsContainerAriaLabel
string
Aria label of the suggestions container
IIdentityPickerDropdownProps
ariaLabelInherited From: ISharedIdentityPickerProps
string
Aria label
ariaLabelledByInherited From: ISharedIdentityPickerProps
string
Id of another element which labels this one for screen reader users.
autoFocusInherited From: ISharedIdentityPickerProps
boolean
A boolean value indicating should component gets auto focussed on mount
calloutWidth300.Inherited From: ISharedIdentityPickerProps
number
Width of callout
classNameInherited From: ISharedIdentityPickerProps
string
The CSS classname of the people picker control.
disabledInherited From: ISharedIdentityPickerProps
boolean
Disables the identity picker if true.
editPlaceholder"Assign People"Inherited From: ISharedIdentityPickerProps
string
Placeholder text for the input
inputIdInherited From: ISharedIdentityPickerProps
string
Optional Id that will be given to the input element
isResultsFooterVisibletrue.Inherited From: ISharedIdentityPickerProps
boolean
Indicates if the text in resultsFooter or resultsFooterFull should be shown at the end of the suggestion list.
noResultsFoundTextInherited From: ISharedIdentityPickerProps
string
String to display when there are no results found.
onBlurInherited From: ISharedIdentityPickerProps
() => void
A callback for when input gets blurred
onChangerequiredInherited From: ISharedIdentityPickerProps
(item?: IIdentity) => boolean | void
A callback for when a suggestion is clicked. If no valid suggestion has been selected, item is undefined.
onClearInherited From: ISharedIdentityPickerProps
() => void
A callback for when the search text is cleared.
onFocusInherited From: ISharedIdentityPickerProps
(e: React.FocusEvent<HTMLInputElement>) => void
A callback for when input gets focus
onSuggestionsVisibleChanged
(suggestsionsVisible: boolean) => void
Called when the control is attempting to show or hide the suggestions list.
pickerProviderrequiredInherited From: ISharedIdentityPickerProps
Provider to handle how to filter the suggested people from a filter.
placeholder"No one selected"Inherited From: ISharedIdentityPickerProps
string
Placeholder text for the input
renderCustomIdentitySuggestionInherited From: ISharedIdentityPickerProps
(identity: IIdentity) => JSX.Element
Render a suggestion item for a custom identity.
requiredfalse.Inherited From: ISharedIdentityPickerProps
boolean
Indicates whether textfield is required or not.
resolveUnrecognizedIdentityInherited From: ISharedIdentityPickerProps
(identityInput: string) => IIdentity | undefined
Optional delegate to resolve identity input which did not resolve to any suggested
identity in the picker.
resultsMaximumNumberInherited From: ISharedIdentityPickerProps
number
Maximum number of suggestions to show in the full suggestion list.
suggestionItemsMaximumCount
number
Maximum number of suggestions to show in the full suggestion list.
If provided 0 or less, it will be set to no limit.
IMPORTANT: This could create a performance issue if the number of suggestions is too high or not properly limited
suggestionsContainerAriaLabel
string
Aria label of the suggestions container
suggestionsItemClassNameInherited From: ISharedIdentityPickerProps
string
the classname of the suggestionitem.
valuerequiredInherited From: ISharedIdentityPickerProps
Identity value of the selected persona This prop is 100% controlled
by the consumer. onChange must also be implemented in order to
work properly. If this value is a an identity, the prop must be
updated to cause the IdentityPicker to re-render. If this value is an
ObservableValue, then changing its value will cause the IdentityPicker
to re-render. The textValue may also need to be updated when you change
this to show the selected users display name
IPersonaConnections
IdentityType
User"user"
string
Group"group"
string
Custom"custom"
string
IIdentity
activeoptional
boolean
departmentoptional
string
descriptionoptional
string
displayNameoptional
string
entityId
string
entityType
string
guestoptional
boolean
imageoptional
string
isHostedoptional
boolean
isMruoptional
boolean
jobTitleoptional
string
localDirectoryoptional
string
localIdoptional
string
mailoptional
string
mailNicknameoptional
string
manageroptional
string
originDirectory
string
originId
string
physicalDeliveryOfficeNameoptional
string
samAccountNameoptional
string
scopeNameoptional
string
signInAddressoptional
string
subjectDescriptoroptional
string
surnameoptional
string
telephoneNumberoptional
string
IPeoplePickerProvider
addIdentitiesToMRUoptional
(identities: IIdentity[]) => Promise<boolean>
Add identities to the MRU
@returns A promise that returns true if successful false otherwise
getAdditionalEntriesoptional
() => string[]
Get non-identity entries
getEntityFromUniqueAttribute
(entityId: string) => IIdentity | PromiseLike<IIdentity>
Request Entity information given an entityId
onEmptyInputFocusoptional
() => IIdentity[] | PromiseLike<IIdentity[]> | null
If no input is in the search box when clicked, provide a set of identities to show (used for MRU)
onFilterIdentities
(filter: string, selectedItems?: IIdentity[]) => IIdentity[] | PromiseLike<IIdentity[]> | null
Given a list of currently selected items and a filter string, return a list of suggestions to put in the suggestion list
onRequestConnectionInformation
(entity: IIdentity, getDirectReports?: boolean) => IPersonaConnections | PromiseLike<IPersonaConnections>
Request connection information about a given Entity.
removeIdentitiesFromMRUoptional
(identities: IIdentity[]) => Promise<boolean>
Add identities to the MRU
@returns A promise that returns true if successful false otherwise
setAdditionalEntriesoptional
(values: string[]) => void
Add non-identity entries
ISharedIdentityPickerProps
ariaLabel
string
Aria label
ariaLabelledBy
string
Id of another element which labels this one for screen reader users.
autoFocus
boolean
A boolean value indicating should component gets auto focussed on mount
calloutWidth300.
number
Width of callout
className
string
The CSS classname of the people picker control.
disabled
boolean
Disables the identity picker if true.
editPlaceholder"Assign People"
string
Placeholder text for the input
inputId
string
Optional Id that will be given to the input element
isResultsFooterVisibletrue.
boolean
Indicates if the text in resultsFooter or resultsFooterFull should be shown at the end of the suggestion list.
noResultsFoundText
string
String to display when there are no results found.
onBlur
() => void
A callback for when input gets blurred
onChangerequired
(item?: IIdentity) => boolean | void
A callback for when a suggestion is clicked. If no valid suggestion has been selected, item is undefined.
onClear
() => void
A callback for when the search text is cleared.
onFocus
(e: React.FocusEvent<HTMLInputElement>) => void
A callback for when input gets focus
pickerProviderrequired
Provider to handle how to filter the suggested people from a filter.
placeholder"No one selected"
string
Placeholder text for the input
renderCustomIdentitySuggestion
(identity: IIdentity) => JSX.Element
Render a suggestion item for a custom identity.
requiredfalse.
boolean
Indicates whether textfield is required or not.
resolveUnrecognizedIdentity
(identityInput: string) => IIdentity | undefined
Optional delegate to resolve identity input which did not resolve to any suggested
identity in the picker.
resultsMaximumNumber
number
Maximum number of suggestions to show in the full suggestion list.
suggestionsContainerAriaLabel
string
An ARIA label for the container that is the parent of the suggestions.
suggestionsItemClassName
string
the classname of the suggestionitem.
valuerequired
Identity value of the selected persona This prop is 100% controlled
by the consumer. onChange must also be implemented in order to
work properly. If this value is a an identity, the prop must be
updated to cause the IdentityPicker to re-render. If this value is an
ObservableValue, then changing its value will cause the IdentityPicker
to re-render. The textValue may also need to be updated when you change
this to show the selected users display name