Numeric Input Examples and Reference

Default Numeric Input

An example of a default numeric input without any extra properties.

library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqNumericInput(id = 'my-numeric-input',
                  value = 0),
  htmlDiv(id = 'numeric-input-output')
)))

app$callback(
  output(id = "numeric-input-output", property = "children"),
  params = list(input(id = "my-numeric-input", property = "value")),

  update_output <- function(value) {
    return(sprintf("The value is %s", value))
  }
)

app$run_server()

Label

Set the label and label position with label and labelPosition.

library(dashDaq)

daqNumericInput(
    label = 'Label',
    labelPosition = 'bottom',
    value = 10
)

Size

Extend the size with size.

library(dashDaq)

daqNumericInput(
    value = 10,
    size = 120
)

Max and Min

Set the minimum and maximum bounds with min and max.

library(dashDaq)

daqNumericInput(
    min = 0,
    max = 100,
    value = 20
)

Disable

Disable the numeric input by setting disabled=TRUE

library(dashDaq)

daq.NumericInput(
    disabled = True,
    min = 0,
    max = 10,
    value = 2
)

NumericInput Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

id (character; optional):
The ID used to identify this compnent in Dash callbacks.

value (numeric; optional):
The value of numeric input.

size (numeric; optional):
The size (length) of the numeric input in pixels.

min (numeric; default 0):
The minimum value of the numeric input.

max (numeric; default 10):
The maximum value of the numeric input.

disabled (logical; optional):
If TRUE, numeric input cannot changed.

theme (named list; default light):
Theme configuration to be set by a ThemeProvider.

label (named list; optional):
Description to be displayed alongside the control. To control styling,
pass an object with label and style properties.

label is a character | named list with keys:

label (character; optional)
style (named list; optional)

labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'top'):
Where the numeric input label is positioned.

className (character; optional):
Class to apply to the root component element.

style (named list; optional):
Style to apply to the root component element.

persistence (logical | character | numeric; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (unnamed list of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.