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,
...
)
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
.
number
Custom width for dropdown. If value is 0, width of the input field is used.
boolean
Deprecated at v0.52.0, use disabled
instead.
IKeytipProps
Optional keytip for this dropdown
string
When multiple items are selected, this will be used to separate values in the dropdown input.
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.)
(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void
Callback for when the selected option changes.
(option: IDropdownOption, index?: number) => void
IRenderFunction<IDropdownProps>
Custom renderer for chevron icon
IRenderFunction<IDropdownProps>
Custom renderer for the label.
IRenderFunction<IDropdownProps>
Custom renderer for placeholder text
IRenderFunction<IDropdownProps>
Custom renderer for placeholder text
IRenderFunction<IDropdownOption[]>
Custom renderer for selected option displayed in input
IDropdownOption[]
Options for the dropdown. If using defaultSelectedKey
or defaultSelectedKeys
, options must be pure for correct behavior.
string
Input placeholder text. Displayed until an option is selected.
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.
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
.
IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>
Call to provide customized styling that will layer on top of the variant rules.
ITheme
Theme provided by higher order component.
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).
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.
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)
})
}
)
}