Skip to contents

Select

Source: vignettes/select.Rmd
select.Rmd

The Select component provides a dropdown menu for selecting one or more items from a list of options.

Select vs Autocomplete

While both Select() and Autocomplete() provide dropdown functionality, they serve different purposes:

Use Select() when: - You have a short, fixed list of options - Users need to see all options at a glance - No search/filtering is needed - You want a simpler, more compact interface

Use Autocomplete() when: - You have a data.frame with a long list of options - Search/filtering functionality is beneficial - Users might not know the exact option they want - You need grouped options with search - Multiple selection with tag display is important

Basic Usage

Use Select.shinyInput() to create a dropdown select with options provided as MenuItem() children.

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "animal",
      value = "dog",
      sx = list(minWidth = 200),
      MenuItem(value = "dog", "Dog"),
      MenuItem(value = "cat", "Cat"),
      MenuItem(value = "fish", "Fish")
    ),
    verbatimTextOutput("selected")
  )
)

server <- function(input, output) {
  output$selected <- renderText({
    paste("Selected:", input$animal)
  })
}

shinyApp(ui, server)

Variants

Select supports three visual variants: outlined (default), filled, and standard.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Stack(
      spacing = 2,
      Select.shinyInput(
        inputId = "select_outlined",
        variant = "outlined",
        value = "dog",
        sx = list(minWidth = 200),
        MenuItem(value = "dog", "Dog"),
        MenuItem(value = "cat", "Cat"),
        MenuItem(value = "fish", "Fish")
      ),
      Select.shinyInput(
        inputId = "select_filled",
        variant = "filled",
        value = "dog",
        sx = list(minWidth = 200),
        MenuItem(value = "dog", "Dog"),
        MenuItem(value = "cat", "Cat"),
        MenuItem(value = "fish", "Fish")
      ),
      Select.shinyInput(
        inputId = "select_standard",
        variant = "standard",
        value = "dog",
        sx = list(minWidth = 200),
        MenuItem(value = "dog", "Dog"),
        MenuItem(value = "cat", "Cat"),
        MenuItem(value = "fish", "Fish")
      )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Labels

Use the inputProps argument with a label property to add a label to the Select.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "pet",
      value = "dog",
      inputProps = list(label = "Choose your pet"),
      sx = list(minWidth = 200),
      MenuItem(value = "dog", "Dog"),
      MenuItem(value = "cat", "Cat"),
      MenuItem(value = "fish", "Fish"),
      MenuItem(value = "bird", "Bird")
    ),
    verbatimTextOutput("pet_output")
  )
)

server <- function(input, output) {
  output$pet_output <- renderText({
    paste("You selected:", input$pet)
  })
}

shinyApp(ui, server)

Multiple Selection

Set multiple = TRUE to allow selecting multiple values. The selected value will be an array.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "animals",
      multiple = TRUE,
      value = list("dog", "cat"),
      inputProps = list(label = "Select multiple animals"),
      sx = list(minWidth = 300),
      MenuItem(value = "dog", "Dog"),
      MenuItem(value = "cat", "Cat"),
      MenuItem(value = "fish", "Fish"),
      MenuItem(value = "bird", "Bird"),
      MenuItem(value = "rabbit", "Rabbit")
    ),
    verbatimTextOutput("animals_output")
  )
)

server <- function(input, output) {
  output$animals_output <- renderText({
    paste("Selected:", paste(input$animals, collapse = ", "))
  })
}

shinyApp(ui, server)

Grouped Options

Use ListSubheader() and Divider() to organize options into groups.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "environment",
      value = "",
      displayEmpty = TRUE,
      inputProps = list('aria-label' = 'Select environment'),
      sx = list(minWidth = 300),
      ListSubheader("Production"),
      MenuItem(value = "prod_web", "Web Application"),
      MenuItem(value = "prod_mobile", "Mobile App"),
      MenuItem(value = "prod_api", "API Service"),
      ListSubheader("Development"),
      MenuItem(value = "dev_local", "Local Development"),
      MenuItem(value = "dev_staging", "Staging Environment"),
      Divider(sx = list(mx = -1)),
      MenuItem(value = "add_new", "Add New Environment")
    ),
    verbatimTextOutput("env_output")
  )
)

server <- function(input, output) {
  output$env_output <- renderText({
    paste("Selected environment:", input$environment)
  })
}

shinyApp(ui, server)

Rich Menu Items

Use ListItemText() to create menu items with primary and secondary text.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "project",
      value = "web_app",
      inputProps = list(label = "Select project"),
      sx = list(minWidth = 300),
      MenuItem(
        value = "web_app",
        ListItemText(
          primary = "Web Application",
          secondary = "React-based frontend"
        )
      ),
      MenuItem(
        value = "mobile_app",
        ListItemText(
          primary = "Mobile Application",
          secondary = "Cross-platform mobile app"
        )
      ),
      MenuItem(
        value = "backend_api",
        ListItemText(
          primary = "Backend API",
          secondary = "RESTful API service"
        )
      )
    ),
    verbatimTextOutput("project_output")
  )
)

server <- function(input, output) {
  output$project_output <- renderText({
    paste("Selected project:", input$project)
  })
}

shinyApp(ui, server)

Form Controls

Combine with FormControl, FormLabel, and FormHelperText for enhanced forms.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    FormControl(
      sx = list(minWidth = 300),
      FormLabel("Pet Selection"),
      Select.shinyInput(
        inputId = "pet_form",
        value = "dog",
        MenuItem(value = "dog", "Dog"),
        MenuItem(value = "cat", "Cat"),
        MenuItem(value = "fish", "Fish"),
        MenuItem(value = "bird", "Bird")
      ),
      FormHelperText("Choose your favorite pet from the list.")
    ),
    verbatimTextOutput("pet_form_output")
  )
)

server <- function(input, output) {
  output$pet_form_output <- renderText({
    paste("Your favorite pet:", input$pet_form)
  })
}

shinyApp(ui, server)

Display Empty

Use displayEmpty = TRUE to show a placeholder even when no value is selected.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "choice",
      value = "",
      displayEmpty = TRUE,
      inputProps = list(label = "Make a choice"),
      sx = list(minWidth = 200),
      MenuItem(value = "", em("None")),
      MenuItem(value = "option1", "Option 1"),
      MenuItem(value = "option2", "Option 2"),
      MenuItem(value = "option3", "Option 3")
    ),
    verbatimTextOutput("choice_output")
  )
)

server <- function(input, output) {
  output$choice_output <- renderText({
    if (input$choice == "") {
      "No selection made"
    } else {
      paste("Selected:", input$choice)
    }
  })
}

shinyApp(ui, server)

Auto Width

Set autoWidth = TRUE to automatically size the dropdown menu based on its content.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Stack(
      spacing = 2,
      Typography("Without autoWidth:", variant = "body2"),
      Select.shinyInput(
        inputId = "select1",
        value = "short",
        sx = list(minWidth = 200),
        MenuItem(value = "short", "Short"),
        MenuItem(value = "long", "Very Long Option Text Here")
      ),
      Typography("With autoWidth:", variant = "body2"),
      Select.shinyInput(
        inputId = "select2",
        value = "short",
        autoWidth = TRUE,
        MenuItem(value = "short", "Short"),
        MenuItem(value = "long", "Very Long Option Text Here")
      )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Styling

Use the sx argument for custom styling and control the appearance of the Select component.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "styled_select",
      value = "option1",
      inputProps = list(label = "Styled Select"),
      sx = list(
        minWidth = 250,
        backgroundColor = "primary.light",
        borderRadius = 2,
        "& .MuiOutlinedInput-notchedOutline" = list(
          borderColor = "primary.main",
          borderWidth = 2
        ),
        "&:hover .MuiOutlinedInput-notchedOutline" = list(
          borderColor = "primary.dark"
        )
      ),
      MenuItem(value = "option1", "Option 1"),
      MenuItem(value = "option2", "Option 2"),
      MenuItem(value = "option3", "Option 3")
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Updating Select Values

Use updateSelect.shinyInput() to programmatically update the selected value from the server.

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "animal_update",
      value = "dog",
      inputProps = list(label = "Select animal"),
      sx = list(minWidth = 200),
      MenuItem(value = "dog", "Dog"),
      MenuItem(value = "cat", "Cat"),
      MenuItem(value = "fish", "Fish"),
      MenuItem(value = "bird", "Bird")
    ),
    Box(
      sx = list(mt = 2),
      Button.shinyInput(
        inputId = "reset_btn",
        "Reset to Dog"
      )
    ),
    verbatimTextOutput("animal_update_output")
  )
)

server <- function(input, output, session) {
  output$animal_update_output <- renderText({
    paste("Current selection:", input$animal_update)
  })
  
  observeEvent(input$reset_btn, {
    updateSelect.shinyInput(
      session = session,
      inputId = "animal_update",
      value = "dog"
    )
  })
}

shinyApp(ui, server)

Native Select

Set native = TRUE to use the browser’s native select element (useful for mobile devices).

ui <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(p = 2),
    Select.shinyInput(
      inputId = "native_select",
      native = TRUE,
      value = "dog",
      inputProps = list(label = "Native Select"),
      sx = list(minWidth = 200),
      tags$option(value = "dog", "Dog"),
      tags$option(value = "cat", "Cat"),
      tags$option(value = "fish", "Fish")
    ),
    verbatimTextOutput("native_output")
  )
)

server <- function(input, output) {
  output$native_output <- renderText({
    paste("Selected:", input$native_select)
  })
}

shinyApp(ui, server)

Note: When using native = TRUE, use HTML option() elements instead of MenuItem() components.