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

<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

<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

<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

<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

<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

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. `function (event: React.MouseEvent, value: any )`
`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`. `<Array of<One ofSelect.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.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With label and info

With inline label

With description

With invalid message

Controlled component

Props

string

REQUIRED

node

string

string

boolean

string

boolean|string

string

boolean

function

boolean

enum[]

object

string

any

Usage