Skip to content

FieldUserRenderer control

This control renders each referenced user/group as a link on a separate line. Hovering the link for users (not groups) leads to opening of Persona control.

FieldUserRenderer control output FieldUserRenderer Persona

Note: some icons may be rendered incorrectly if used with SharePoint Framework v1.3 or earlier

Covered Fields

  • Person or Group

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { FieldUserRenderer } from "@pnp/spfx-controls-react/lib/FieldUserRenderer";
  • Use the FieldUserRenderer control in your code as follows:
<FieldUserRenderer users={event.fieldValue} context={this.context} className={'some-class'} cssProps={{ background: '#f00' }} />


The FieldUserRenderer component can be configured with the following properties:

Property Type Required Description
cssProps React.CSSProperties no CSS styles to apply to the renderer.
className ICssInput no CSS classes to apply to the renderer.
users IPrincipal no Users/groups to be displayed as they appear in event.fieldValue for Field Customizer's onRenderCell event.
context IContext yes SPFx context.