1

I need to create an TextInput (Shiny) with an icon inside it (like placeholder) without css and javascript.

I've already done this using the textInputIcon function, as below:

shinyWidgets::textInputIcon(inputId = ns("txt_username"),
                            label = "",
                            placeholder = "Usuário",
                            icon = shiny::icon("user")
                            )

However, I didn't find in the documentation any way to use the same component for text which input is a password, since it is necessary to show the typed characters hidden.

The passwordInput function (from shiny) automatically hides the characters, but I couldn't put an icon beside it.

shiny::passwordInput(inputId = ns("txt_password"),
                             placeholder = "Senha",
                             label = "",
                             ),

Does anyone know any alternative for me to have the same result only with the hidden characters?

Quizicall
  • 133
  • 6

1 Answers1

1

A possible workaround is to combine both functions html and use that inside the ui:

library(shiny)
#library(shinyWidgets)

passwordInput_custom <-
    '<div class="form-group shiny-input-container">
        <label class="control-label" id="txt_password-label" for="txt_password"></label>
        <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-user" role="presentation" aria-label="user icon"></i>
        </span>
      <input id="txt_password" type="password" class="form-control" value="" placeholder="Senha"/>
    </div>'

ui <- fluidPage(

  tagList(HTML(passwordInput_custom)),
  textOutput('psswd')
  #if icon is not called anywhere inside the ui, the icon won't display
, tags$style(icon("user") #to put it somewhere that it won't show. ) )

server <- function(input, output, session) {
  
  output$psswd <- renderText({
    input$txt_password
  })
  
}

shinyApp(ui, server)

Not the cleanest solution but it works.

jpdugo17
  • 6,816
  • 2
  • 11
  • 23