• /
  • Log in
  • Free account

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

import { Select } from 'nr1'

Examples

Basic

1
<Select onChange={(evt, value) => alert(value)}>
2
<SelectItem value="a">Value is "a"</SelectItem>
3
<SelectItem value="b">Value is "b"</SelectItem>
4
<SelectItem value="c">Value is "c"</SelectItem>
5
</Select>;

Controlled component

1
class MyComponent extends React.Component {
2
constructor() {
3
super(...arguments);
4
5
this.state = {
6
value: null,
7
};
8
9
this._onChange = this._onChange.bind(this);
10
}
11
12
_onChange(event, value) {
13
this.setState({ value });
14
}
15
16
render() {
17
return (
18
<Select onChange={this._onChange} value={this.state.value}>
19
<SelectItem value="a">Value is "a"</SelectItem>
20
<SelectItem value="b">Value is "b"</SelectItem>
21
<SelectItem value="c">Value is "c"</SelectItem>
22
</Select>
23
);
24
}
25
}

Props

childrenrequirednode

List of options expressed as a set of <SelectItem>s.

classNamestring

Appends class names to the component.

disabledboolean

If true, the select is not available for interaction.

infostring

Additional information can be displayed in an info tooltip next to the Label.

labelstring

Text to display as label.

onChangefunction

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.

function (
event: Event,
value: any
) => undefined
spacingTypeenum[]

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.

<Array of
<One of
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,
>
>
styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

valueany

Value matching the item selected.

Methods

Select.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.