Select

Usage

import { Select } from 'nr1'

Examples

Props

ariaLabelstring

Provide a descriptive label for this control, e.g. "Accounts".

childrenrequirednode

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

classNamestring

Appends class names to the component.

descriptionstring

Message with instructions on how to fill the form field.

disabledboolean

If true, the select is not available for interaction.

infostring

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

invalidboolean|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.

labelstring

Text to display as label.

labelInlineboolean

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.

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: React.MouseEvent, 
value: any 
)

requiredboolean

DEFAULT

false

If true, denotes the form field as required.

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 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,
>
>

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

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.

valueany

Value matching the item selected.