How to remove numeric input's spin button in R shiny?

Hi,

I am strugling with two things on the numericInput function from the shiny package:
1- I would like to enter a number only by typing, getting rid of the spinner
2 - The title of the input is always appearing on top of the numericInput window, does anyone know how I can put on the side?

The code I am using is:

Required Input

  numericInput(inputId = "ElevationReference",
               label = "Elevation reference",
               value = 555.53,
               width = "80px"),
1 Like

Hi there,

  1. If by 'spinner' you're referring to the incrementer arrows on the right side of the input, I'm not sure how to remove them, but I suspect it may involve modifying some CSS, because I can't find built-in properties for numericInput that govern their appearance. I imagine you could use textInput instead, as long as you were able to train your users that only numeric values should be entered.

  2. If you're willing to decouple your label from the input, you could set the label to NULL and use a fluidPage layout with fluidColumns to manually place a label to the side of the input widget. This is a hacky approach at best but it would be workable.

Neither of these things I'm suggesting are awesome options but they would get the job done. I'm hoping somebody else may chime in with a better idea!

1 Like

It does the job!
Thanks

We have removed the spinners from numericInput using this code block in the ui.R file:

# Removes spin wheels from inputs
     tags$style(HTML("
        input[type=number] {
              -moz-appearance:textfield;
        }
        input[type=number]::{
              -moz-appearance:textfield;
        }
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
              -webkit-appearance: none;
              margin: 0;
        }
    "))

This should remove the spinner from Chrome, IE and Firefox.

2 Likes

Thank you very much wolfpack, it runs good now!

1 Like