About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

This section 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.

This component is not supported on workspace-based products such as Bitbucket.

Props

NameTypeRequiredDescription
isMultibooleanWhether the user can select multiple users from the list. Defaults to false
isRequiredbooleanIndicates 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..
labelstringYesThe label text to display.
namestringYesThe 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.
defaultValuestringThe initial user to display. The value should be an Atlassian account ID.
descriptionstringThe text description of the user picker field.
placeholderstringThe placeholder helper text.
onChange
1
2
(user: {
  id: string;
  type: string;
  avatarUrl: string;
  name: string;
  email: string;
}) => void
NoAn 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

Rate this page: