Dropdown

Properties

You may check out the DrawerList Properties down below as well as the Data structure examples.

Properties	Description
`title`	(optional) give a title to let the users know what they have to do. Defaults to `Valgmeny`.
`value`	(optional) define a preselected data entry (index). More info down below.
`variant`	(optional) defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
`icon`	(optional) icon to be included in the dropdown.
`icon_size`	(optional) change the size of the icon pragmatically.
`icon_position`	(optional) position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
`triangle_position`	(optional) position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`.
`size`	(optional) define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.
`opened`	(optional) if set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options.
`open_on_focus`	(optional) if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
`prevent_selection`	(optional) if set to `true`, no permanent selection will be made. Defaults to `false`.
`action_menu`	(optional) same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`.
`more_menu`	(optional) same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.
`align_dropdown`	(optional) use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`.
`independent_width`	(optional) If set to `true`, the Dropdown will handle it's width independent to the content width. Defaults to `false`.
`skip_portal`	(optional) set to `true` to disable the React Portal behavior. Defaults to `false`.
`stretch`	(optional) if set to `true`, then the dropdown will be 100% in available `width`.
`status`	(optional) text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
`status_state`	(optional) defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
`status_props`	(optional) use an object to define additional FormStatus properties.
`globalStatus`	(optional) the configuration used for the target GlobalStatus.
`label`	(optional) prepends the Form Label component. If no ID is provided, a random ID is created.
`label_direction`	(optional) use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
`label_sr_only`	(optional) use `true` to make the label only readable by screen readers.
`suffix`	(optional) text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component.
`trigger_element`	(optional) lets you provide a custom React element as the trigger HTML element.
`innerRef`	(optional) by providing a React.ref you can get the internally used main element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
`buttonRef`	(optional) by providing a React.ref you can get the internally used button element (DOM). E.g. `buttonRef={myRef}` by using `React.createRef()` or `React.useRef()`.
`skeleton`	(optional) if set to `true`, an overlaying skeleton with animation will be shown.
DrawerList	(optional) all DrawerList properties.
Space	(optional) spacing properties like `top` or `bottom` are supported.

DrawerList Properties

Property	Type	Description
`data`	`string \| object \| function`	(required) The data we want to fill the list with. Provide the data as a JSON string, array, or object in the specified data structure. If you don't have to define a value, you can also send in a function which will be called once the user opens the DrawerList.
`value`	`string` `number`	(optional) Define a preselected data entry (index) or key inside an array item. Can be a string or integer.
`default_value`	`number`	(optional) Define a startup value or handle a re-render without handling the state during the re-render by yourself. Defaults to null.
`triangle_position`	`string`	(optional) Position of the arrow icon/triangle inside the drawer-list. Set to 'left' or 'right'. Defaults to 'left' if not set.
`direction`	`string`	(optional) Defines the direction of how the drawer-list shows the options list. Can be 'bottom' or 'top'. Defaults to 'auto'.
`label_direction`	`string`	(optional) The direction of the label. If set to 'horizontal', the label will be positioned horizontally next to the input element. If set to 'vertical', the label will be positioned vertically above the input element.
`prevent_selection`	`boolean`	(optional) If set to `true`, the DrawerList will then not make any permanent selection.
`focusable`	`boolean`	(optional) If set to `true`, the element is then focusable by assertive technologies.
`prevent_close`	`boolean`	(optional) If set to `true`, the DrawerList will not close on any events.
`keep_open`	`boolean`	(optional) If set to `true`, the DrawerList will close on outside clicks, but not on selection.
`independent_width`	`boolean`	(optional) If set to `true`, the DrawerList will handle its width and position independently of the parent/mother element.
`fixed_position`	`boolean`	(optional) If set to `true`, the DrawerList will be fixed in its scroll position by using CSS `position: fixed;`.
`enable_body_lock`	`boolean`	(optional) If set to `true`, the HTML body will get locked from scrolling when the Dropdown is open.
`skip_keysearch`	`boolean`	(optional) If set to `true`, search items by the first key will be ignored.
`ignore_events`	`boolean`	(optional) If set to `true`, all keyboard and mouse events will be ignored.
`align_drawer`	`string`	(optional) Use 'right' to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if an independent width is used.
`list_class`	`string`	(optional) Define an HTML class that will be set on the list, beside `dnb-drawer-list__list`.
`portal_class`	`string`	(optional) Define an HTML class that will be set on the DOM portal beside `dnb-drawer-list__portal__style`. Can be useful to handle e.g. a custom `z-index` in relation to a header.
`scrollable`	`boolean`	(optional) Defines if the options list should be scrollable (the `max-height` is set by default to `50vh`).
`no_scroll_animation`	`boolean`	(optional) To disable scrolling animation.
`no_animation`	`boolean`	(optional) To disable appear/disappear (show/hide) animation.
`skip_portal`	`boolean`	(optional) To disable the React Portal behavior.
`min_height`	`string`	(optional) Defines the minimum height (in `rem`) of the options list.
`max_height`	`string`	(optional) Defines the maximum height (in `rem`) of the options list.
`page_offset`	`string`	(optional) Defines the available scrollable height. If scrolling should not change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content).
`observer_element`	`string`	(optional) Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on.
`cache_hash`	`string`	(optional) Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete are using this because of the huge data changes due to search and reorder.
`wrapper_element`	`HTMLElement`	(optional) Has to be an HTML Element, ideally a mother element, used to calculate sizes and distances. Also used for the 'click outside' detection. Clicking on the `wrapper_element` will not trigger an outside click.
`options_render`	`function`	(optional) Has to be a function, returning the items again. See example. This can be used to add additional options above the actual rendered list.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Value

Should either be an index (integer) of the data array or a key – defined by selectedKey (the deprecated selected_key should not start with a number) inside an array item.

If data is an object, use the object key as the value to define the selected item. Can be a string or integer.

Data structure

// 1. as array
const data = [
  // Every data item can, beside "content" - contain what ever
  {
    // (optional) can be what ever
    selectedKey: 'key_0',

    // (optional) is show instead of "content", once selected
    selected_value: 'Item 1 Value',
    suffix_value: 'Addition 1',

    // Item content as a string or array
    content: 'Item 1 Content',
  },

  // more items ...
  {
    selectedKey: 'key_1',
    content: ['Item 2 Value', 'Item 2 Content'],
  },
  {
    selectedKey: 'key_2',
    selected_value: 'Item 3 Value',
    suffix_value: 'Addition 3',
    content: ['Item 3 Content A', 'Item 3 Content B'],
  },
  {
    selectedKey: 'key_3',
    selected_value: 'Item 4 Value',
    suffix_value: 'Addition 4',
    content: ['Item 4 Content A', <>Custom Component</>],
  },
]

// 2. as object
const data = {
  a: 'A',
  b: 'B',
}

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB
`Dropdown.title`	Valgmeny	Option Menu

#Dropdown

#Properties

#DrawerList Properties

#Value

#Data structure

#Translations