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)
      })
    }
  )
}