Input • shiny.element

Input data using mouse or keyboard.

Basic usage

el_input("in_basic", placeholder = "Please input", width = "240px")

Disabled

Disable the Input with the disabled attribute.

el_input(
  "in_dis",
  placeholder = "Please input",
  disabled = TRUE,
  width = "240px"
)

Clearable

Make the Input clearable with the clearable attribute. After version 2.13.4, the clearable feature is also available for textarea type of Input.

tags$div(
  style = "display: flex; align-items: center; gap: 1em",
  el_input(
    "in_clear",
    placeholder = "Please input",
    clearable = TRUE,
    width = "240px"
  ),
  el_input(
    "in_clear_area",
    type = "textarea",
    placeholder = "Please input",
    clearable = TRUE,
    width = "240px"
  )
)

Custom Clear Icon

You can customize the clear icon by setting the clear-icon attribute.

tags$div(
  style = "display: flex; flex-direction: column; gap: 1em",
  el_input(
    "in_clear_icon",
    value = "Clear me",
    placeholder = "Custom clear icon",
    clearable = TRUE,
    clear_icon = "CloseBold"
  ),
  el_input(
    "in_clear_icon_area",
    type = "textarea",
    placeholder = "Custom clear icon",
    clearable = TRUE,
    clear_icon = "CloseBold"
  )
)

Formatter

Display value within it’s situation with formatter, and we usually use parser at the same time.

formatter shows the value its way; parser reads it back.

el_input(
  "in_fmt",
  placeholder = "Please input",
  width = "240px",
  formatter = JS(
    "function(value) { return `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','); }"
  ),
  parser = JS("function(value) { return value.replace(/\\$\\s?|(,*)/g, ''); }")
)

Password box

Make a toggle-able password Input with the show-password attribute. Since 2.13.6, the password-icon slot is supported to override the default icon.

The password-icon slot’s scope says whether the password shows.

tags$div(
  style = "display: flex; align-items: center; gap: 1em",
  el_input(
    "in_pass",
    type = "password",
    value = "secret",
    placeholder = "Please input password",
    show_password = TRUE,
    width = "240px"
  ),
  el_input(
    "in_pass_icon",
    type = "password",
    value = "secret",
    placeholder = "Please input password",
    show_password = TRUE,
    width = "240px",
    slots = list(
      `password-icon` = template(
        slot = "password-icon",
        scope = "{ visible }",
        htmltools::HTML(paste0(
          "<el-icon :size=\"16\"><Unlock v-if=\"visible\" />",
          "<Lock v-else /></el-icon>"
        ))
      )
    )
  )
)

Input with icon

Add an icon to indicate input type.

To add icons in Input, you can simply use prefix-icon and suffix-icon attributes. Also, the prefix and suffix named slots works as well.

group <- function(label, ...) {
  tags$div(
    style = "margin-bottom: 1.5rem",
    tags$span(
      style = "display: block; margin-bottom: 1rem; color: var(--el-text-color-regular)",
      label
    ),
    tags$div(style = "display: flex; gap: 1rem; flex-wrap: wrap", ...)
  )
}
tags$div(
  group(
    "Using attributes",
    el_input(
      "in_suffix",
      placeholder = "Pick a date",
      suffix_icon = "Calendar",
      width = "240px"
    ),
    el_input(
      "in_prefix",
      placeholder = "Type something",
      prefix_icon = "Search",
      width = "240px"
    )
  ),
  group(
    "Using slots",
    el_input(
      "in_suffix_slot",
      placeholder = "Pick a date",
      width = "240px",
      slots = list(suffix = el_icon("Calendar", class = "el-input__icon"))
    ),
    el_input(
      "in_prefix_slot",
      placeholder = "Type something",
      width = "240px",
      slots = list(prefix = el_icon("Search", class = "el-input__icon"))
    )
  )
)

Using attributes

Using slots

Textarea

Resizable for entering multiple lines of text information. Add attribute type="textarea" to change input into native textarea.

Control the height by setting the rows prop.

el_input(
  "in_area",
  type = "textarea",
  rows = 2,
  placeholder = "Please input",
  width = "240px"
)

Autosize Textarea

Setting the autosize prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to autosize to specify the minimum and maximum number of lines the textarea can automatically adjust.

tagList(
  el_input(
    "in_auto1",
    type = "textarea",
    autosize = TRUE,
    placeholder = "Please input",
    width = "240px"
  ),
  tags$div(style = "margin: 20px 0"),
  el_input(
    "in_auto2",
    type = "textarea",
    autosize = list(minRows = 2, maxRows = 4),
    placeholder = "Please input",
    width = "240px"
  )
)

Mixed input

Prepend or append an element, generally a label or a button.

Use slot to distribute elements that prepend or append to Input.

A select and a button go in the slots like text: they become part of the input, and the select still reports as input$in_kind.

kind <- function(id) {
  el_select(
    id,
    choices = c(Restaurant = "1", "Order No." = "2", Tel = "3"),
    placeholder = "Select",
    width = "115px"
  )
}
tagList(
  tags$style(
    ".input-with-select .el-input-group__prepend {
       background-color: var(--el-fill-color-blank); }"
  ),
  tags$div(
    style = "display: grid; gap: 16px; max-width: 600px",
    el_input(
      "in_pre",
      placeholder = "Please input",
      slots = list(prepend = "Http://")
    ),
    el_input(
      "in_app",
      placeholder = "Please input",
      slots = list(append = ".com")
    ),
    tags$div(
      class = "input-with-select",
      el_input(
        "in_mixed",
        placeholder = "Please input",
        slots = list(
          prepend = kind("in_kind"),
          append = el_button(icon = "Search", label = NULL)
        )
      )
    ),
    tags$div(
      class = "input-with-select",
      el_input(
        "in_mixed2",
        placeholder = "Please input",
        slots = list(
          prepend = el_button(icon = "Search", label = NULL),
          append = kind("in_kind2")
        )
      )
    )
  )
)

Sizes

Add size attribute to change the size of Input. In addition to the default size, there are two other options: large, small.

row <- function(...) {
  tags$div(
    style = "display: flex; gap: 16px; align-items: center; margin-bottom: 16px",
    lapply(c("large", "default", "small"), function(size) {
      el_input(placeholder = "Please Input", size = size, width = "240px", ...)
    })
  )
}
tagList(row(), row(suffix_icon = "Search"), row(prefix_icon = "Search"))

Limit length

maxlength and minlength attributes of input, they declare a limit on the number of characters a user can input. The “number of characters” is measured using JavaScript string length.Setting the maxlength prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting show-word-limit to true at the same time. In 2.11.5, You can set word-limit-position to outside to display the word count outside the input.

word_limit_position = "outside" puts the count after the box.

tagList(
  tags$div(
    style = "display: flex; gap: 16px",
    el_input(
      "in_lim",
      maxlength = 10,
      show_word_limit = TRUE,
      placeholder = "Please input",
      width = "240px"
    ),
    el_input(
      "in_lim_out",
      maxlength = 10,
      show_word_limit = TRUE,
      word_limit_position = "outside",
      placeholder = "Please input",
      width = "240px"
    )
  ),
  tags$div(style = "margin: 20px 0"),
  tags$div(
    style = "display: flex; gap: 16px",
    el_input(
      "in_lim_area",
      type = "textarea",
      maxlength = 30,
      show_word_limit = TRUE,
      placeholder = "Please input",
      width = "240px"
    ),
    el_input(
      "in_lim_area_out",
      type = "textarea",
      maxlength = 30,
      show_word_limit = TRUE,
      word_limit_position = "outside",
      placeholder = "Please input",
      width = "240px"
    )
  )
)

Count graphemes

Set count-graphemes to calculate text length. If it’s set, native maxlength and minlength won’t be used.

count_graphemes counts as a reader would: an emoji is one character, not the two code units JavaScript’s length gives it.

tagList(
  el_input(
    "in_graph",
    value = "\U0001F600\U0001F601",
    maxlength = 10,
    placeholder = "Please input",
    show_word_limit = TRUE,
    count_graphemes = JS("function(value) { return Array.from(value).length; }")
  ),
  tags$div(style = "margin: 20px 0"),
  el_input(
    "in_graph_area",
    type = "textarea",
    value = "\U0001F600\U0001F601",
    maxlength = 20,
    placeholder = "Please input",
    show_word_limit = TRUE,
    count_graphemes = JS("function(value) { return Array.from(value).length; }")
  )
)

Tip

Browser Support & Fallback Strategy

When using the count-graphemes prop, the component employs the following approach:

Primary: Uses Intl.Segmenter API (Chrome 87+, Firefox 125+, Safari 14.1+) for proper grapheme cluster handling. This correctly handles complex emoji, combining marks, and Zero Width Joiner sequences.

Fallback: Older browsers fall back to Array.from() for code-point based iteration. Note that this may split multi-codepoint grapheme sequences (e.g., emoji with skin tone modifiers).

When implementing your own count-graphemes function, consider using Intl.Segmenter if you need robust support for complex unicode characters.

API

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

Attributes

Element	In R	Description	Type	Default
`type`	`el_input(type =)`	type of input, see more in MDN	¹`'text' \\\| 'textarea' \\\| 'number' \\\| 'password' \\\| 'email' \\\| 'search' \\\| 'tel' \\\| 'url'`	text
`model-value`	`value`; `input$<id>`	binding value	² / ³	—
`model-modifiers`	`(Vue only:`v-model.trim`; trim in R)`	v-model modifiers, reference Vue modifiers	⁴`{ lazy?: true, number?: true, trim?: true }`	—
`maxlength`	`el_input(maxlength =)`	same as `maxlength` in native input	⁵ / ⁶	—
`minlength`	`el_input(minlength =)`	same as `minlength` in native input	⁷ / ⁸	—
`show-word-limit`	`el_input(show_word_limit =)`	whether show word count, only works when `type` is ‘text’ or ‘textarea’	⁹	false
`word-limit-position`	`el_input(word_limit_position =)`	word count position, valid when `show-word-limit` is true	¹⁰`'inside' \\\| 'outside'`	“inside”
`placeholder`	`el_input(placeholder =)`	placeholder of Input	¹¹	—
`clearable`	`el_input(clearable =)`	whether to show clear button, only works when `type` is not ‘textarea’	¹²	false
`clear-icon`	`el_input(clear_icon =)`	custom clear icon component	¹³ / ¹⁴`Component`	CircleClose
`formatter`	`el_input(formatter =)`	specifies the format of the value presented input.(only works when `type` is ‘text’)	¹⁵`(value: string \\\| number) => string`	—
`parser`	`el_input(parser =)`	specifies the value extracted from formatter input.(only works when `type` is ‘text’)	¹⁶`(value: string) => string`	—
`show-password`	`el_input(show_password =)`	whether to show toggleable password input	¹⁷	false
`disabled`	`el_input(disabled =)`	whether Input is disabled	¹⁸	false
`size`	`el_input(size =)`	size of Input, works when `type` is not ‘textarea’	¹⁹`'large' \\\| 'default' \\\| 'small'`	—
`prefix-icon`	`el_input(prefix_icon =)`	prefix icon component	²⁰ / ²¹	—
`suffix-icon`	`el_input(suffix_icon =)`	suffix icon component	²² / ²³	—
`rows`	`el_input(rows =)`	number of rows of textarea, only works when `type` is ‘textarea’	²⁴	2
`autosize`	`el_input(autosize =)`	whether textarea has an adaptive height, only works when `type` is ‘textarea’. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }`	²⁵ / ²⁶`{ minRows?: number, maxRows?: number }`	false
`autocomplete`	`el_input(autocomplete =)`	same as `autocomplete` in native input	²⁷	off
`readonly`	`el_input(readonly =)`	same as `readonly` in native input	²⁸	false
`max`	`el_input(max =)`	same as `max` in native input	—	—
`min`	`el_input(min =)`	same as `min` in native input	—	—
`step`	`el_input(step =)`	same as `step` in native input	—	—
`resize`	`el_input(resize =)`	control the resizability	²⁹`'none' \\\| 'both' \\\| 'horizontal' \\\| 'vertical'`	—
`autofocus`	`el_input(autofocus =)`	same as `autofocus` in native input	³⁰	false
`form`	`el_input(form =)`	same as `form` in native input	`string`	—
`aria-label`	`el_input(aria_label =)`	same as `aria-label` in native input	³¹	—
`tabindex`	`el_input(tabindex =)`	input tabindex	³² / ³³	—
`validate-event`	`el_input(validate_event =)`	whether to trigger form validation	³⁴	true
`input-style`	`el_input(input_style =)`	the style of the input element or textarea element	³⁵ / ³⁶`CSSProperties \\\| CSSProperties[] \\\| string[]`	{}
`label`	`el_input(label =)`	same as `aria-label` in native input	³⁷	—
`inputmode`	`el_input(inputmode =)`	same as `inputmode` in native input	³⁸	—
`count-graphemes`	`el_input(count_graphemes =)`	custom function to count graphemes; when set, native `maxlength`/`minlength` constraints are bypassed. Component uses `Intl.Segmenter` (Chrome 87+, Firefox 125+, Safari 14.1+) for proper grapheme clustering; older browsers fall back to `Array.from()` for code-point iteration	³⁹`(value: string) => number`	—

Events

Element	In R	Description
`blur`	`input$<id>_blur`	triggers when Input blurs
`focus`	`input$<id>_focus`	triggers when Input focuses
`change`	`input$<id>_change`	triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed
`input`	`input$<id>_input`	triggers when the Input value change
`clear`	`input$<id>_clear`	triggers when the Input is cleared by clicking the clear button
`keydown`	`input$<id>_keydown`	triggers when a key is pressed down
`mouseleave`	`input$<id>_mouseleave`	triggers when the mouse leaves the Input element
`mouseenter`	`input$<id>_mouseenter`	triggers when the mouse enters the Input element
`compositionstart`	`input$<id>_compositionstart`	triggers when the composition starts
`compositionupdate`	`input$<id>_compositionupdate`	triggers when the composition is updated
`compositionend`	`input$<id>_compositionend`	triggers when the composition ends

Slots

Element	In R	Description
`prefix`	`slots = list(prefix = )`	content as Input prefix, only works when `type` is not ‘textarea’
`suffix`	`slots = list(suffix = )`	content as Input suffix, only works when `type` is not ‘textarea’
`prepend`	`slots = list(prepend = )`	content to prepend before Input, only works when `type` is not ‘textarea’
`append`	`slots = list(append = )`	content to append after Input, only works when `type` is not ‘textarea’
`password-icon`	`slots = list(password-icon = )`	content as Input password icon, only works when `show-password` is true. The scope variable is `{ visible: boolean }`

Exposes

Element	In R	Description
`blur`	`call_el(session, id, "blur")`	blur the input element
`clear`	`call_el(session, id, "clear")`	clear input value
`focus`	`call_el(session, id, "focus")`	focus the input element
`resizeTextarea`	`call_el(session, id, "resizeTextarea")`	resize textarea
`select`	`call_el(session, id, "select")`	select the text in input element