---
title: AccountPicker
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/AccountPicker
---

Retrieves all accounts and allows account selection through dropdown and search. To capture the currently selected account, you can use the `onChange` listener.

Note that the platform already contains its own account picker, which is located in the header of it. This one can be configured to be shown using the `nerdlet.setConfig` API (passing `{ accountPicker: true }`), and its value can be read using `<PlatformStateContext.Consumer>`. For full reference, please check these APIs.

### Usage

```jsx
import { AccountPicker } from 'nr1'
```

### Examples

#### Basic

```jsx
class Example extends React.Component {
  constructor() {
    super(...arguments);

    this.state = { accountId: null };

    this.onChangeAccount = this.onChangeAccount.bind(this);
  }

  onChangeAccount(_, value) {
    alert(`Selected account: ${value}`);

    this.setState({ accountId: value });
  }

  render() {
    return (
      <AccountPicker
        value={this.state.accountId}
        onChange={this.onChangeAccount}
      />
    );
  }
}
```

#### With inline label

```jsx
class Example extends React.Component {
  constructor() {
    super(...arguments);

    this.state = { accountId: null };

    this.onChangeAccount = this.onChangeAccount.bind(this);
  }

  onChangeAccount(_, value) {
    alert(`Selected account: ${value}`);

    this.setState({ accountId: value });
  }

  render() {
    return (
      <AccountPicker
        label="Account"
        labelInline
        value={this.state.accountId}
        onChange={this.onChangeAccount}
      />
    );
  }
}
```

### Props

| `ariaLabel` string     | Provide a descriptive label for this control, e.g. "Accounts".                                                                                                                                                                                                                                                                                                                                                      |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string     | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                      |
| `crossAccount` boolean | Shows an option at the top named "All accounts". When selected, the value provided by the `onChange` callback is `AccountPicker.CROSS_ACCOUNT`. This is useful when you have functionality that can operate on multiple accounts.                                                                                                                                                                                   |
| `disabled` boolean     | If `true`, the dropdown is not available for interaction.                                                                                                                                                                                                                                                                                                                                                           |
| `label` string         | Text to display as label.                                                                                                                                                                                                                                                                                                                                                                                           |
| `labelInline` boolean  | Display the label inline the form control.Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component.                                                                                                                                                                                                                                    |
| `onChange` function    | Callback fired every time the user clicks an account from the list.                                                                                                                                                                                                                                                                                                                                                 |
| `spacingType` enum\[]  | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. AccountPicker.SPACING_TYPE.EXTRA_LARGE, AccountPicker.SPACING_TYPE.LARGE, AccountPicker.SPACING_TYPE.MEDIUM, AccountPicker.SPACING_TYPE.NONE, AccountPicker.SPACING_TYPE.OMIT, AccountPicker.SPACING_TYPE.SMALL,  |
| `style` object         | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                           |
| `testId` string        | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.**Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                  |
| `value` number\|enum   | Id of the selected account.                                                                                                                                                                                                                                                                                                                                                                                         |