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

The `<Select>` component is a variant of the `<Dropdown>` one, especially targeted to be used in form components. The main differences are:

-   It can only work in declarative mode, i.e. it cannot be virtualized by passing a child function.
-   Every `<SelectItem>` accepts a `value` prop, that will be matched against the `value` passed to `<Select>`, and the right option will be selected. As opposed to a traditional `<SELECT>` DOM element, any reference can be used as a value, both primitives and objects.
-   Items do not accept an `onClick`. Instead, you will get the value of the selected option by receiving it from an `onChange` method.

The component is always controlled, meaning you have to update its `value` from an `onChange` callback for it to reflect the newly selected property.

### Usage

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

### Examples

#### Basic

```jsx
<Select onChange={(evt, value) => alert(value)}>
  <SelectItem value="a">Value is "a"</SelectItem>
  <SelectItem value="b">Value is "b"</SelectItem>
  <SelectItem value="c">Value is "c"</SelectItem>
</Select>
```

#### With label and info

```jsx
<Select label="Items" info="Info value" onChange={(evt, value) => alert(value)}>
  <SelectItem value="a">Value is "a"</SelectItem>
  <SelectItem value="b">Value is "b"</SelectItem>
  <SelectItem value="c">Value is "c"</SelectItem>
</Select>
```

#### With inline label

```jsx
<Select label="Items" labelInline onChange={(evt, value) => alert(value)}>
  <SelectItem value="a">Value is "a"</SelectItem>
  <SelectItem value="b">Value is "b"</SelectItem>
  <SelectItem value="c">Value is "c"</SelectItem>
</Select>
```

#### With description

```jsx
<Select description="Description value" onChange={(evt, value) => alert(value)}>
  <SelectItem value="a">Value is "a"</SelectItem>
  <SelectItem value="b">Value is "b"</SelectItem>
  <SelectItem value="c">Value is "c"</SelectItem>
</Select>
```

#### With invalid message

```jsx
<Select invalid="Invalid message value" onChange={(evt, value) => alert(value)}>
  <SelectItem value="a">Value is "a"</SelectItem>
  <SelectItem value="b">Value is "b"</SelectItem>
  <SelectItem value="c">Value is "c"</SelectItem>
</Select>
```

#### Controlled component

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

    this.state = {
      value: null,
    };

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

  _onChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <Select onChange={this._onChange} value={this.state.value}>
        <SelectItem value="1">Item 1</SelectItem>
        <SelectItem value="2">Item 2</SelectItem>
        <SelectItem value="3">Item 3</SelectItem>
      </Select>
    );
  }
}
```

### Props

| `ariaLabel` string        | Provide a descriptive label for this control, e.g. "Accounts".                                                                                                                                                                                                                                                                                                           |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` REQUIRED node  | List of options expressed as a set of `<SelectItem>`s.                                                                                                                                                                                                                                                                                                                   |
| `className` string        | Appends class names to the component.                                                                                                                                                                                                                                                                                                                                    |
| `description` string      | Message with instructions on how to fill the form field.                                                                                                                                                                                                                                                                                                                 |
| `disabled` boolean        | If `true`, the select is not available for interaction.                                                                                                                                                                                                                                                                                                                  |
| `info` string             | Additional information can be displayed in an info tooltip next to the Label.                                                                                                                                                                                                                                                                                            |
| `invalid` boolean\|string | When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a `boolean` field or a `string`. When it is a `string`, as well as the invalid state being shown, the text will be shown below.                                                                                          |
| `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 any time the value of the select is changed.You can get the value back as the second argument of the `onChange` event.                                                                                                                                                                                                                                    |
| `required` boolean        | If `true`, denotes the form field as required.                                                                                                                                                                                                                                                                                                                           |
| `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`. Select.SPACING_TYPE.EXTRA_LARGE, Select.SPACING_TYPE.LARGE, Select.SPACING_TYPE.MEDIUM, Select.SPACING_TYPE.NONE, Select.SPACING_TYPE.OMIT, Select.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` any               | Value matching the item selected.                                                                                                                                                                                                                                                                                                                                        |