User Picker

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

UserPicker

To add the UserPicker component to your app:

1
2
import { UserPicker } from "@forge/react";

Description

A dropdown that lists a selectable range of users on the site.

Props

Name	Type	Required	Description
`isMulti`	`boolean`		Whether the user can select multiple users from the list. Defaults to `false`
`isRequired`	`boolean`		Indicates to the user whether or not a value is required in this field to submit the form. If a field is required, an asterisk appears at the end of that field’s label..
`label`	`string`	Yes	The label text to display.
`name`	`string`	Yes	The key to which the input value is assigned in the returned form object. If `isMulti` is true, the submitted value is an array of strings; otherwise, it is a string.
`defaultValue`	`string`		The initial user to display. The value should be an Atlassian account ID.
`description`	`string`		The text description of the user picker field.
`placeholder`	`string`		The placeholder helper text.
`onChange`	1 2 `(user: { id: string; type: string; avatarUrl: string; name: string; email: string; }) => void`	No	An event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a `Form`.

Example

A field for selecting a user.

1
2
const App = () => {
  return (
    <UserPicker
      label="User"
      name="user"
      onChange={(user) => console.log(user)}
    />
  );
};

The returned Form object contains the Atlassian account ID of the selected user.

1
2
user: "1a2345bc6789012d3e45f67";

Output

Example image of rendered User picker