Dropdown — Dropdown • shiny.fluent

A dropdown menu is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Dropdown(...)

Dropdown.shinyInput(inputId, ..., value = defaultValue)

updateDropdown.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

defaultSelectedKeys: string[] | number[]
Keys that will be initially used to set selected items. This prop is only used when multiSelect is true (use defaultSelectedKey for single select). Mutually exclusive with selectedKeys.
dropdownWidth: number
Custom width for dropdown. If value is 0, width of the input field is used.
isDisabled: boolean
Deprecated at v0.52.0, use disabled instead.
keytipProps: IKeytipProps
Optional keytip for this dropdown
multiSelectDelimiter: string
When multiple items are selected, this will be used to separate values in the dropdown input.
notifyOnReselect: boolean
If true, onChange will still be called when an already-selected item is clicked again in single select mode. (Normally it would not be called in this case.)
onChange: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void
Callback for when the selected option changes.
onChanged: (option: IDropdownOption, index?: number) => void
onRenderCaretDown: IRenderFunction<IDropdownProps>
Custom renderer for chevron icon
onRenderLabel: IRenderFunction<IDropdownProps>
Custom renderer for the label.
onRenderPlaceholder: IRenderFunction<IDropdownProps>
Custom renderer for placeholder text
onRenderPlaceHolder: IRenderFunction<IDropdownProps>
Custom renderer for placeholder text
onRenderTitle: IRenderFunction<IDropdownOption[]>
Custom renderer for selected option displayed in input
options: IDropdownOption[]
Options for the dropdown. If using defaultSelectedKey or defaultSelectedKeys, options must be pure for correct behavior.
placeHolder: string
Input placeholder text. Displayed until an option is selected.
responsiveMode: ResponsiveMode
By default, the dropdown will render the standard way for screen sizes large and above, or in a panel on small and medium screens. Manually set this prop to override this behavior.
selectedKeys: string[] | number[] | null
Keys of the selected items, only used when multiSelect is true (use selectedKey for single select). If you provide this, you must maintain selection state by observing onChange events and passing a new prop value in when changed. Passing null will clear the selection. Mutually exclusive with defaultSelectedKeys.
styles: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>
Call to provide customized styling that will layer on top of the variant rules.
theme: ITheme
Theme provided by higher order component.

Best practices

Layout

Use a dropdown list when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when space is constrained.
Use a dropdown list when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).

Content

Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
The dropdown list label should describe what can be found in the menu.
Use shortened statements or single words as list options.
If there isn't a default option, use "Select an option" as placeholder text.
If "None" is an option, include it.
Write the choices using parallel construction. For example, start with the same part of speech or verb tense.

Examples

library(shiny.fluent)

if (interactive()) {
  options <- list(
    list(key = "A", text = "Option A"),
    list(key = "B", text = "Option B"),
    list(key = "C", text = "Option C")
  )

  shinyApp(
    ui = div(
      Dropdown.shinyInput("dropdown", value = "A", options = options),
      textOutput("dropdownValue")
    ),
    server = function(input, output) {
      output$dropdownValue <- renderText({
        sprintf("Value: %s", input$dropdown)
      })
    }
  )
}