Input • shiny.element

Input numerical values with a customizable range.

Basic usage

Bind a variable to v-model in <el-input-number> element and you are set.

el_input_number("num", value = 1, min = 1, max = 10)

Tip

When inputting invalid string to the input box, input value will emit NaN to the upper layer as result of error

Disabled

The disabled attribute accepts a boolean, and if the value is true, the component is disabled. If you just need to control the value within a range, you can add min attribute to set the minimum value and max to set the maximum value. By default, the minimum value is Number.MIN_SAFE_INTEGER.

el_input_number("num_dis", value = 1, disabled = TRUE)

Steps

Allows you to define incremental steps.

Add step attribute to set the step.

el_input_number("num_step", value = 5, step = 2)

Step strictly

The step-strictly attribute accepts a boolean. if this attribute is true, input value can only be multiple of step.

el_input_number("num_strict", value = 2, step = 2, step_strictly = TRUE)

Precision

Add precision attribute to set the precision of input value.

el_input_number("num_prec", value = 1, precision = 2, step = 0.1, max = 10)

Tip

The value of precision must be a non negative integer and should not be less than the decimal places of step.

Size

Use attribute size to set additional sizes with large or small.

tags$div(
  style = "display: flex; gap: 16px",
  el_input_number("num_l", value = 1, size = "large"),
  el_input_number("num_d", value = 2),
  el_input_number("num_s", value = 3, size = "small")
)

Controls Position

Set controls-position to decide the position of control buttons.

tags$div(
  style = "display: flex; flex-wrap: wrap; align-items: center; gap: 16px",
  lapply(c("large", "default", "small"), function(size) {
    el_input_number(
      paste0("num_ctl_", size),
      value = 1,
      min = 1,
      max = 10,
      controls_position = "right",
      size = size
    )
  })
)

Custom Icon

Use decrease-icon and increase-icon to set custom icons.

el_space(
  direction = "vertical",
  el_space(
    el_input_number("num_custom1", value = 1),
    el_input_number(
      "num_custom2",
      value = 1,
      slots = list(
        `decrease-icon` = el_icon("ArrowDown"),
        `increase-icon` = el_icon("ArrowUp")
      )
    )
  ),
  el_space(
    el_input_number("num_custom3", value = 1, controls_position = "right"),
    el_input_number(
      "num_custom4",
      value = 1,
      controls_position = "right",
      slots = list(
        `decrease-icon` = el_icon("Minus"),
        `increase-icon` = el_icon("Plus")
      )
    )
  )
)

With prefix and suffix

Use the prefix and suffix named slots.

el_space(
  el_input_number(
    "num_pre",
    value = 1,
    min = 1,
    max = 10,
    slots = list(prefix = tags$span("￥"))
  ),
  el_input_number(
    "num_suf",
    value = 1,
    min = 1,
    max = 10,
    slots = list(suffix = tags$span("RMB"))
  )
)

Tip

For precision purposes, the input number is limited from Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER.

Formatter

Display the value with formatter, and typically use parser alongside it.

When formatter is set, the inner input type changes to text, which allows non-numeric characters to be entered. Internally, the component processes input with Number.parseFloat: when parsing succeeds, the parsed number is written to model-value; when parsing returns NaN, model-value is set to null.

el_input_number(
  "num_fmt",
  value = 10000,
  formatter = JS(
    "function(value) { return `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','); }"
  ),
  parser = JS("function(value) { return value.replace(/\\$\\s?|(,*)/g, ''); }")
)

API

Element Plus’s tables, and beside each entry where it is in R.

Attributes

Element	In R	Description	Type	Default
`model-value`	`value`; `input$<id>`	binding value	¹ / ²	—
`min`	`min`	the minimum allowed value	³	Number.MIN_SAFE_INTEGER
`max`	`max`	the maximum allowed value	⁴	Number.MAX_SAFE_INTEGER
`step`	`step`	incremental step	⁵	1
`step-strictly`	`step_strictly`	whether input value can only be multiple of step	⁶	false
`precision`	`precision`	precision of input value	⁷	—
`size`	`size`	size of the component	⁸`'large' \\\| 'default' \\\| 'small'`	default
`readonly`	`readonly`	same as `readonly` in native input	⁹	false
`disabled`	`disabled`	whether the component is disabled	¹⁰	false
`controls`	`controls`	whether to enable the control buttons	¹¹	true
`controls-position`	`controls_position`	position of the control buttons	¹²`'' \\\| 'right'`	—
`aria-label`	`aria_label`	same as `aria-label` in native input	¹³	—
`placeholder`	`placeholder`	same as `placeholder` in native input	¹⁴	—
`id`	`id`, the Shiny input’s	same as `id` in native input	¹⁵	—
`value-on-clear`	`value_on_clear`	value should be set when input box is cleared	¹⁶ / ¹⁷ / ¹⁸`'min' \\\| 'max'`	—
`validate-event`	`validate_event`	whether to trigger form validation	¹⁹	true
`label`	`label`	same as `aria-label` in native input	²⁰	—
`inputmode`	`inputmode`	same as `inputmode` in native input	²¹	—
`align`	`align`	alignment for the inner input text	²²`'left' \\\| 'center' \\\| 'right'`	‘center’
`disabled-scientific`	`disabled_scientific`	disables input of scientific notation (e.g. ‘e’)	²³	false
`tabindex`	`tabindex`	same as `tabindex` in native input	²⁴ / ²⁵	0
`formatter`	`formatter`	specifies the format of the value presented in the input	²⁶`(value: string) => string`	—
`parser`	`parser`	specifies the value extracted from the formatted input	²⁷`(value: string) => string`	—

Slots

Element	In R	Description
`decrease-icon`	`slots = list(decrease-icon = )`	custom input box button decrease icon
`increase-icon`	`slots = list(increase-icon = )`	custom input box button increase icon
`prefix`	`slots = list(prefix = )`	content as Input prefix
`suffix`	`slots = list(suffix = )`	content as Input suffix

Events

Element	In R	Description
`change`	`input$<id>`, the value	triggers when the value changes
`blur`	`input$<id>_blur`	triggers when Input blurs
`focus`	`input$<id>_focus`	triggers when Input focuses

Exposes

Element	In R	Description
`focus`	`call_el(session, id, "focus")`	get focus the input component
`blur`	`call_el(session, id, "blur")`	remove focus the input component