shinyWidgets Overview

Awesome checkbox Group

Checkboxes with status

Value :

Show code

awesomeCheckboxGroup(
   inputId = "Id001",
   label = "Checkboxes with status", 
    choices = c("A", "B", "C"),
   inline = TRUE,
   status = "danger"
)

More examples

Checkbox Group Buttons

Choices

Value :

Show code

checkboxGroupButtons(
   inputId = "Id002",
   label = "Choices", 
    choices = c("Choice 1", "Choice 2", "Choice 3"),
   status = "danger"
)

More examples

Awesome Radio Buttons

Radio with status

Value :

Show code

awesomeRadio(
   inputId = "Id003",
   label = "Radio with status", 
    choices = c("A", "B", "C"),
   selected = "B",
   status = "warning"
)

More examples

Radio Group Buttons

Choices

Value :

Show code

radioGroupButtons(
   inputId = "Id004",
   label = "Choices", 
    choices = c("Choice 1", "Choice 2", "Choice 3"),
   status = "primary"
)

Awesome checkbox

A single checkbox

Value :

Show code

awesomeCheckbox(
   inputId = "Id005",
   label = "A single checkbox", 
    value = TRUE,
   status = "danger"
)

More examples

Material Design Switch

Primary switch

Value :

Show code

materialSwitch(
   inputId = "Id006",
   label = "Primary switch", 
    status = "primary",
   right = TRUE
)

More examples

Bootstrap Switch

Value :

Show code

switchInput(
   inputId = "Id007",
   value = TRUE
)

More examples

Select Picker

With plain HTML

Value :

Show code

pickerInput(
   inputId = "Id008",
   label = "With plain HTML", 
    choices = paste("Badge", c("info", "success", "danger", "primary", 
        "warning")),
   multiple = TRUE,
   selected = "Badge danger", 
    choicesOpt = list(
      content = sprintf("<span class='label label-%s'>%s</span>", 
        c("info", "success", "danger", "primary", "warning"), 
        paste("Badge", c("info", "success", "danger", "primary", 
            "warning"))))
)

More examples

Search field

Click search icon to update or hit 'Enter'

Value :

Show code

searchInput(
   inputId = "Id009",
   label = "Click search icon to update or hit 'Enter'", 
    placeholder = "A placeholder",
   btnSearch = icon("search"), 
    btnReset = icon("remove"),
   width = "100%"
)

Multi.js

Countries :

Value :

Show code

multiInput(
   inputId = "Id010",
   label = "Countries :", 
    choices = NULL,
   choiceNames = lapply(seq_along(countries), 
        function(i) tagList(tags$img(src = flags[i],
   width = 20, 
            height = 15), countries[i])),
   choiceValues = countries
)

switchInput

via bootstrap-switch.org

Default

Value :

Show code

switchInput(
   inputId = "Id011"
)

TRUE at start

Value :

Show code

switchInput(
   inputId = "Id012",
   value = TRUE
)

Change ON/OFF labels

Value :

Show code

switchInput(
   inputId = "Id013",
   onLabel = "Yes",
   offLabel = "No"
)

Change ON/OFF colors

Value :

Show code

switchInput(
   inputId = "Id014",
   onStatus = "success", 
    offStatus = "danger"
)

Label in the middle

Value :

Show code

switchInput(
   inputId = "Id015",
   label = "My label", 
    labelWidth = "80px"
)

Size : mini

Value :

Show code

switchInput(
   inputId = "Id016",
   size = "mini"
)

Size : large

Value :

Show code

switchInput(
   inputId = "Id017",
   size = "large"
)

Icon in the middle

Value :

Show code

switchInput(
   inputId = "Id018",
   label = "<i class=\"fa fa-thumbs-up\"></i>"
)

Update value

Value :

Show code

switchInput(
   inputId = "switchUp",
   label = "<i class=\"fa fa-thumbs-up\"></i>"
)

Click to update :

Pretty Checkboxes And Radios

via pretty checkbox

Default single checkbox

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id019",
   label = "Click me!", 
    value = TRUE
)

With status

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id020",
   label = "Click me!", 
    value = TRUE,
   status = "warning"
)

With curve shape

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id021",
   label = "Click me!", 
    value = TRUE,
   status = "danger",
   shape = "curve"
)

With outline color

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id022",
   label = "Click me!", 
    value = TRUE,
   status = "danger",
   shape = "curve",
   outline = TRUE
)

With fill color

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id023",
   label = "Click me!", 
    value = TRUE,
   status = "success",
   fill = TRUE
)

With Font Awesome icon

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id024",
   label = "Click me!", 
    value = TRUE,
   status = "info",
   icon = icon("thumbs-up"), 
    plain = TRUE,
   outline = TRUE
)

With animation

Click me!

Value :

Show code

prettyCheckbox(
   inputId = "Id025",
   label = "Click me!", 
    value = TRUE,
   icon = icon("check"),
   status = "success",
   animation = "rotate"
)

Default switch

Click me!

Value :

Show code

prettySwitch(
   inputId = "Id026",
   label = "Click me!"
)

Switch fill & status

Click me!

Value :

Show code

prettySwitch(
   inputId = "Id027",
   label = "Click me!", 
    status = "success",
   fill = TRUE
)

Switch slim & status

Click me!

Value :

Show code

prettySwitch(
   inputId = "Id028",
   label = "Click me!", 
    status = "primary",
   slim = TRUE
)

Default toggle

Checked!

Unchecked...

Value :

Show code

prettyToggle(
   inputId = "Id029",
   label_on = "Checked!", 
    label_off = "Unchecked..."
)

Toggle with icons & status

Yes!

No..

Value :

Show code

prettyToggle(
   inputId = "Id030",
   label_on = "Yes!", 
    icon_on = icon("check"),
   status_on = "info",
   status_off = "warning", 
    label_off = "No..",
   icon_off = icon("remove")
)

Toggle with icons

Yes!

No..

Value :

Show code

prettyToggle(
   inputId = "Id031",
   label_on = "Yes!", 
    label_off = "No..",
   outline = TRUE,
   plain = TRUE,
   icon_on = icon("thumbs-up"), 
    icon_off = icon("thumbs-down")
)

Default checkbox group

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyCheckboxGroup(
   inputId = "Id032",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !")
)

Inline checkbox group & fill status

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyCheckboxGroup(
   inputId = "Id033",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   inline = TRUE, 
    status = "danger",
   fill = TRUE
)

Checkbox group with icons

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyCheckboxGroup(
   inputId = "Id034",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   icon = icon("user"), 
    animation = "tada"
)

Checkbox group with icons, status & outline

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyCheckboxGroup(
   inputId = "Id035",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   icon = icon("check-square-o"), 
    status = "primary",
   outline = TRUE,
   animation = "jelly"
)

Default radio buttons

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyRadioButtons(
   inputId = "Id036",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !")
)

Inline radio buttons & fill status

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyRadioButtons(
   inputId = "Id037",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   inline = TRUE, 
    status = "danger",
   fill = TRUE
)

Radio buttons with icons

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyRadioButtons(
   inputId = "Id038",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   icon = icon("user"), 
    animation = "tada"
)

Radio buttons with icons, status

Choose:

Click me !

Me !

Or me !

Value :

Show code

prettyRadioButtons(
   inputId = "Id039",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
   icon = icon("check"), 
    bigger = TRUE,
   status = "info",
   animation = "jelly"
)

Awesome Checkboxes And Radios

via awesome-bootstrap-checkbox

Shiny default

A single checkbox

Value :

Show code

checkboxInput(
   inputId = "Id040",
   label = "A single checkbox", 
    value = TRUE
)

Shiny default

Checkboxes

Value :

Show code

checkboxGroupInput(
   inputId = "Id041",
   label = "Checkboxes", 
    choices = c("A", "B", "C"),
   selected = "A"
)

Shiny default

Radio buttons

Value :

Show code

radioButtons(
   inputId = "Id042",
   label = "Radio buttons", 
    choices = c("A", "B", "C")
)

Single

A single checkbox

Value :

Show code

awesomeCheckbox(
   inputId = "Id043",
   label = "A single checkbox", 
    value = TRUE
)

Checkbox group

Checkboxes

Value :

Show code

awesomeCheckboxGroup(
   inputId = "Id044",
   label = "Checkboxes", 
    choices = c("A", "B", "C"),
   selected = "A"
)

Radio buttons

Value :

Show code

awesomeRadio(
   inputId = "Id045",
   label = "Radio buttons", 
    choices = c("A", "B", "C"),
   selected = "A"
)

Another color

A single checkbox

Value :

Show code

awesomeCheckbox(
   inputId = "Id046",
   label = "A single checkbox", 
    value = TRUE,
   status = "info"
)

Inline & danger

Checkboxes

Value :

Show code

awesomeCheckboxGroup(
   inputId = "Id047",
   label = "Checkboxes", 
    choices = c("A", "B", "C"),
   selected = "A",
   inline = TRUE, 
    status = "danger"
)

Inline & success

Radio buttons

Value :

Show code

awesomeRadio(
   inputId = "Id048",
   label = "Radio buttons", 
    choices = c("A", "B", "C"),
   selected = "A",
   inline = TRUE, 
    status = "success"
)

Inline & checkbox styled

Radio buttons

Value :

Show code

awesomeRadio(
   inputId = "Id049",
   label = "Radio buttons", 
    choices = c("A", "B", "C"),
   selected = "A",
   inline = TRUE, 
    checkbox = TRUE
)

Update selected

Radio buttons

Value :

Show code

awesomeRadio(
   inputId = "upAwesomeRadio",
   label = "Radio buttons",
   choices = c("A", 
    "B", "C"),
   selected = "A",
   inline = TRUE
)

Click to update :

Update choices

Checkbox group

Value :

Show code

awesomeCheckboxGroup(
   inputId = "upAwesomeCheckbox",
   label = "Checkbox group", 
    choices = c("A", "B", "C"),
   selected = "A",
   inline = TRUE, 
    status = "warning"
)

Click to update :

Turn buttons into checkbox

Default

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id050",
   label = "Label",
   choices = c("A", 
    "B", "C")
)

With choices

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id051",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   selected = c("B", "D")
)

Danger status

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id052",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "danger"
)

Success status

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id053",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "success"
)

Justified

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id054",
   label = "Label",
   choices = c("A", 
    "B"),
   justified = TRUE
)

Vertical

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id055",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   direction = "vertical"
)

Large

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id056",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   size = "lg"
)

Update

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "upcheckboxGroupButtons",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   checkIcon = list(
      yes = icon("ok",
   lib = "glyphicon"))
)

Click to update :

Large

Choose a graph :

Value :

Show code

checkboxGroupButtons(
   inputId = "Id057",
   label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar", `<i class='fa fa-line-chart'></i>` = "line", 
        `<i class='fa fa-pie-chart'></i>` = "pie"),
   justified = TRUE
)

Icons

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id058",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   justified = TRUE,
   checkIcon = list(
      yes = icon("ok", 
    lib = "glyphicon"))
)

More icons

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id059",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "primary",
   checkIcon = list(
      yes = icon("ok", 
    lib = "glyphicon"),
   no = icon("remove",
   lib = "glyphicon"))
)

Colored icons

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id060",
   label = "Label",
   choices = c("Option 1", 
    "Option 2", "Option 3", "Option 4"),
   checkIcon = list(
      yes = tags$i(class = "fa fa-check-square", 
    style = "color: steelblue"),
   no = tags$i(class = "fa fa-square-o", 
    style = "color: steelblue"))
)

Separated buttons

Label

Value :

Show code

checkboxGroupButtons(
   inputId = "Id061",
   label = "Label",
   choices = c("Option 1", 
    "Option 2", "Option 3", "Option 4"),
   individual = TRUE,
   checkIcon = list(
      yes = tags$i(class = "fa fa-circle", 
    style = "color: steelblue"),
   no = tags$i(class = "fa fa-circle-o", 
    style = "color: steelblue"))
)

Turn buttons into radio

Default

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id062",
   label = "Label",
   choices = c("A", 
    "B", "C")
)

With choices

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id063",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   selected = "B"
)

Danger status

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id064",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "danger"
)

Success status

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id065",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "success"
)

Justified

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id066",
   label = "Label",
   choices = c("A", 
    "B"),
   justified = TRUE
)

Vertical

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id067",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   direction = "vertical"
)

Large

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id068",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   size = "lg"
)

Update

Label

Value :

Show code

radioGroupButtons(
   inputId = "upradioGroupButtons",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   checkIcon = list(
      yes = icon("ok",
   lib = "glyphicon"))
)

Click to update :

Large

Choose a graph :

Value :

Show code

radioGroupButtons(
   inputId = "Id069",
   label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar", `<i class='fa fa-line-chart'></i>` = "line", 
        `<i class='fa fa-pie-chart'></i>` = "pie"),
   justified = TRUE
)

Icons

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id070",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   justified = TRUE,
   checkIcon = list(
      yes = icon("ok", 
    lib = "glyphicon"))
)

More icons

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id071",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "primary",
   checkIcon = list(
      yes = icon("ok", 
    lib = "glyphicon"),
   no = icon("remove",
   lib = "glyphicon"))
)

Colored icons

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id072",
   label = "Label",
   choices = c("Option 1", 
    "Option 2", "Option 3", "Option 4"),
   checkIcon = list(
      yes = tags$i(class = "fa fa-check-square", 
    style = "color: steelblue"),
   no = tags$i(class = "fa fa-square-o", 
    style = "color: steelblue"))
)

Separated buttons

Label

Value :

Show code

radioGroupButtons(
   inputId = "Id073",
   label = "Label",
   choices = c("Option 1", 
    "Option 2", "Option 3", "Option 4"),
   individual = TRUE,
   checkIcon = list(
      yes = tags$i(class = "fa fa-circle", 
    style = "color: steelblue"),
   no = tags$i(class = "fa fa-circle-o", 
    style = "color: steelblue"))
)

Material switch

via material-design-switch

Default

Value :

Show code

materialSwitch(
   inputId = "Id074"
)

Label on left

A label

Value :

Show code

materialSwitch(
   inputId = "Id075",
   label = "A label"
)

Label on right

A label

Value :

Show code

materialSwitch(
   inputId = "Id076",
   label = "A label", 
    right = TRUE
)

Status primary

Primary

Value :

Show code

materialSwitch(
   inputId = "Id077",
   label = "Primary", 
    value = TRUE,
   status = "primary"
)

Status danger

Danger

Value :

Show code

materialSwitch(
   inputId = "Id078",
   label = "Danger",
   value = TRUE, 
    status = "danger"
)

Status success

Success

Value :

Show code

materialSwitch(
   inputId = "Id079",
   label = "Success", 
    value = TRUE,
   status = "success"
)

Status warning

Warning

Value :

Show code

materialSwitch(
   inputId = "Id080",
   label = "Warning", 
    value = TRUE,
   status = "warning"
)

Update

Update value

Value :

Show code

materialSwitch(
   inputId = "upMaterial",
   label = "Update value",
   value = FALSE, 
    status = "info"
)

Click to update :

Select Picker

via bootstrap-select

Default

Value :

Show code

pickerInput(
   inputId = "Id081",
   label = "Default", 
    choices = c("a", "b", "c", "d")
)

Options group

Value :

Show code

pickerInput(
   inputId = "Id082",
   label = "Options group", 
    choices = list(
      lower = c("a", "b", "c", "d"),
   upper = c("A", 
        "B", "C", "D"))
)

Multiple

Value :

Show code

pickerInput(
   inputId = "Id083",
   label = "Multiple", 
    choices = attr(UScitiesD, "Labels"),
   multiple = TRUE
)

Live search

Value :

Show code

pickerInput(
   inputId = "Id084",
   label = "Live search", 
    choices = attr(UScitiesD, "Labels"),
   options = list(
      `live-search` = TRUE)
)

Menu size

Menu size (5 items visible)

Value :

Show code

pickerInput(
   inputId = "Id085",
   label = "Menu size (5 items visible)", 
    choices = LETTERS,
   options = list(
      size = 5)
)

Placeholder

Value :

Show code

pickerInput(
   inputId = "Id086",
   label = "Placeholder", 
    choices = c("a", "b", "c", "d"),
   options = list(
      title = "This is a placeholder")
)

Selected text format

Selected text format (select >3 items)

Value :

Show code

pickerInput(
   inputId = "Id087",
   label = "Selected text format (select >3 items)", 
    choices = LETTERS,
   options = list(
      `selected-text-format` = "count > 3"), 
    multiple = TRUE
)

Style : primary

Value :

Show code

pickerInput(
   inputId = "Id088",
   label = "Style : primary", 
    choices = c("a", "b", "c", "d"),
   options = list(
      style = "btn-primary")
)

Style : danger

Value :

Show code

pickerInput(
   inputId = "Id089",
   label = "Style : danger", 
    choices = c("a", "b", "c", "d"),
   options = list(
      style = "btn-danger")
)

Style individual options

Style individual options with HTML

Value :

Show code

pickerInput(
   inputId = "Id090",
   label = "Style individual options with HTML", 
    choices = c("steelblue 150%", "right align + red", "bold", 
        "background color"),
   choicesOpt = list(
      style = c("color: steelblue; font-size: 150%;", 
        "color: firebrick; text-align: right;", "font-weight: bold;", 
        "background: forestgreen; color: white;"))
)

Style individual options (preserved)

Style individual options with HTML

Value :

Show code

pickerInput(
   inputId = "Id091",
   label = "Style individual options with HTML", 
    choices = c("steelblue 150%", "right align + red", "bold", 
        "background color"),
   choicesOpt = list(
      content = c("<div style='color: steelblue; font-size: 150%;'>steelblue 150%</div>", 
        "<div style='color: firebrick; text-align: right;'>right align + red</div>", 
        "<div style='font-weight: bold;'>bold</div>", "<div style='background: forestgreen; color: white; padding-left: 5px;'>background color</div>"))
)

Icons

Glyphicon

Value :

Show code

pickerInput(
   inputId = "Id092",
   label = "Glyphicon", 
    choices = c("glyphicon-cog", "glyphicon-play", "glyphicon-ok-sign", 
        "glyphicon-arrow-right", "glyphicon-euro", "glyphicon-music"), 
    choicesOpt = list(
      icon = c("glyphicon-cog", "glyphicon-play", 
        "glyphicon-ok-sign", "glyphicon-arrow-right", "glyphicon-euro", 
        "glyphicon-music"))
)

Subtext

Value :

Show code

pickerInput(
   inputId = "Id093",
   label = "Subtext", 
    choices = rownames(mtcars),
   choicesOpt = list(
      subtext = paste("mpg", 
        mtcars$mpg,
   sep = ": "))
)

Select/deselect all

Select/deselect all options

Value :

Show code

pickerInput(
   inputId = "Id094",
   label = "Select/deselect all options", 
    choices = LETTERS,
   options = list(
      `actions-box` = TRUE), 
    multiple = TRUE
)

Update choices

Glyphicon <> FontAwesome

Value :

Show code

pickerInput(
   inputId = "uppickerIcons",
   label = "Glyphicon <> FontAwesome", 
    choices = c("glyphicon-arrow-right / fa-arrow-right", "glyphicon-cog / fa-cog", 
        "glyphicon-play / fa-play", "glyphicon-ok-sign / fa-check", 
        "glyphicon-euro / fa-eur", "glyphicon-music / fa-music"), 
    choicesOpt = list(
      icon = c("glyphicon glyphicon-arrow-right", 
        "glyphicon glyphicon-cog", "glyphicon glyphicon-play", 
        "glyphicon glyphicon-ok-sign", "glyphicon glyphicon-euro", 
        "glyphicon glyphicon-music")),
   options = list(
      `icon-base` = "")
)

Update with Icons

Glyphicon FontAwesome

Slider Text

With characters:

Choose a letter:

Value :

Show code

sliderTextInput(
   inputId = "Id095",
   label = "Choose a letter:", 
    choices = c("a", "b", "c", "d", "e")
)

Range slider:

Choose a range:

Value :

Show code

sliderTextInput(
   inputId = "Id096",
   label = "Choose a range:", 
    choices = month.abb,
   selected = month.abb[c(4, 8)]
)

Custom range for numeric:

Choose a value:

Value :

Show code

sliderTextInput(
   inputId = "Id097",
   label = "Choose a value:", 
    choices = c(1, 10, 100, 500, 1000),
   grid = TRUE
)

Decreasing order:

Choose a value:

Value :

Show code

sliderTextInput(
   inputId = "Id098",
   label = "Choose a value:", 
    choices = seq(from = 10,
   to = 1,
   by = -1),
   grid = TRUE
)

With month

Pick a month:

Value :

Show code

sliderTextInput(
   inputId = "Id099",
   label = "Pick a month:", 
    choices = month.name
)

Restricted choices

Restricted choices:

Value :

Show code

sliderTextInput(
   inputId = "Id100",
   label = "Restricted choices:", 
    choices = LETTERS,
   selected = "A",
   from_min = "E",
   from_max = "T"
)

Restricted choices

Restricted choices for range:

Value :

Show code

sliderTextInput(
   inputId = "Id101",
   label = "Restricted choices for range:", 
    choices = LETTERS,
   selected = c("A", "T"),
   from_min = "A", 
    from_max = "E",
   to_min = "R",
   to_max = "Z"
)

Likert scale

Your choice:

Value :

Show code

sliderTextInput(
   inputId = "Id102",
   label = "Your choice:", 
    grid = TRUE,
   force_edges = TRUE,
   choices = c("Strongly disagree", 
        "Disagree", "Neither agree nor disagree", "Agree", "Strongly agree")
)

Update selected

Your choice:

Value :

Show code

sliderTextInput(
   inputId = "selectedSliderText",
   label = "Your choice:", 
    grid = TRUE,
   force_edges = TRUE,
   choices = letters[1:5]
)

Update selected:

a b c d e

Update choices

Your choice:

Value :

Show code

sliderTextInput(
   inputId = "choicesSliderText",
   label = "Your choice:",
   grid = TRUE, 
    force_edges = TRUE,
   choices = month.abb
)

Update selected:

Abbreviations Full names

Progress Bars

Default

Update

Show code

# ui
progressBar(id = "pb1", value = 50)
# server
updateProgressBar(session = session, id = "pb1", value = input$slider)

Status : info & title

This is a progress bar

Update

Show code

# ui
progressBar(id = "pb2", value = 50, status = "info", title = "This is a progress bar")
# server
updateProgressBar(session = session, id = "pb2", value = input$slider)

Status : danger & striped : true

Update

Show code

# ui
progressBar(id = "pb3", value = 50, status = "danger", striped = TRUE)
# server
updateProgressBar(session = session, id = "pb3", value = input$slider)

Display : percent

50%

Update

Show code

# ui
progressBar(id = "pb4", value = 50, display_pct = TRUE)
# server
updateProgressBar(session = session, id = "pb4", value = input$slider)

Status : warning & value > 100 (force value and total to appear)

1500 / 5000

Update

Show code

# ui
progressBar(id = "pb5", value = 1500, total = 5000, status = "warning")
# server
updateProgressBar(session = session, id = "pb5", value = input$slider, total = 5000)

Status : success & size : xs

Update

Show code

# ui
progressBar(id = "pb6", value = 50, status = "success", size = "xs")
# server
updateProgressBar(session = session, id = "pb6", value = input$slider)

Status update

50%

Update

Show code

# ui
progressBar(id = "pb7", value = 50, display_pct = TRUE, status = "warning")
# server
if (input$slider < 33) {
  status <- "danger"
} else if (input$slider >= 33 & input$slider < 67) {
  status <- "warning"
} else {
  status <- "success"
}
updateProgressBar(session = session, id = "pb7", value = input$slider, status = status)

All options 1500 / 5000

1500%

Update

Show code

# ui
progressBar(id = "pb8", value = 1500, total = 5000, status = "info", display_pct = TRUE, striped = TRUE, title = "All options")
# server
updateProgressBar(session = session, id = "pb8", value = input$slider, total = 5000)

Update total

1000 / 1000

1000%

Update

Show code

# ui
progressBar(id = "pb9", value = 1000, total = 1000, display_pct = TRUE)
# server
updateProgressBar(session = session, id = "pb9", value = 1000, total = input$slider)

bttn

Value :

Show code

actionBttn(
   inputId = "Id103",
   label = NULL,
   style = "material-circle", 
    color = "danger",
   icon = icon("bars")
)

Value :

Show code

actionBttn(
   inputId = "Id104",
   label = "material-flat", 
    style = "material-flat",
   color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id105",
   label = "pill",
   style = "pill", 
    color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id106",
   label = "float",
   style = "float", 
    color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id107",
   label = "unite",
   style = "unite", 
    color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id108",
   label = "fill",
   style = "fill", 
    color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id109",
   label = NULL,
   style = "simple", 
    color = "primary",
   icon = icon("bars")
)

Value :

Show code

actionBttn(
   inputId = "Id110",
   label = "bordered", 
    style = "bordered",
   color = "success",
   icon = icon("sliders")
)

Value :

Show code

actionBttn(
   inputId = "Id111",
   label = "minimal", 
    style = "minimal",
   color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id112",
   label = "stretch", 
    style = "stretch",
   color = "warning"
)

Value :

Show code

actionBttn(
   inputId = "Id113",
   label = "jelly",
   style = "jelly", 
    color = "danger"
)

Value :

Show code

actionBttn(
   inputId = "Id114",
   label = "gradient", 
    style = "gradient",
   color = "danger",
   icon = icon("thumbs-up")
)

Other stuffs

Dropdown Button

if you want to hide inputs to focus on a plot..

Show code

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  tags$h2("Dropdown Button"),
  br(),
  dropdownButton(

    tags$h3("List of Inputs"),

    selectInput(inputId = 'xcol',
                label = 'X Variable',
                choices = names(iris)),

    selectInput(inputId = 'ycol',
                label = 'Y Variable',
                choices = names(iris),
                selected = names(iris)[[2]]),

    sliderInput(inputId = 'clusters',
                label = 'Cluster count',
                value = 3,
                min = 1,
                max = 9),

    circle = TRUE, status = "danger",
    icon = icon("gear"), width = "300px",

    tooltip = tooltipOptions(title = "Click to see inputs !")
  ),

  plotOutput(outputId = 'plot1')
)

server <- function(input, output, session) {

  selectedData <- reactive({
    iris[, c(input$xcol, input$ycol)]
  })

  clusters <- reactive({
    kmeans(selectedData(), input$clusters)
  })

  output$plot1 <- renderPlot({
    palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
              "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"))

    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData(),
         col = clusters()$cluster,
         pch = 20, cex = 3)
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
  })

}

shinyApp(ui = ui, server = server)

Dropdown (bis)

In this version you can add animations and pickerInput will work in it.

Show code

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  tags$h2("Dropdown Button"),
  br(),
  dropdown(

    tags$h3("List of Input"),

    pickerInput(inputId = 'xcol2',
                label = 'X Variable',
                choices = names(iris),
                options = list(`style` = "btn-info")),

    pickerInput(inputId = 'ycol2',
                label = 'Y Variable',
                choices = names(iris),
                selected = names(iris)[[2]],
                options = list(`style` = "btn-warning")),

    sliderInput(inputId = 'clusters2',
                label = 'Cluster count',
                value = 3,
                min = 1, max = 9),

    style = "unite", icon = icon("gear"),
    status = "danger", width = "300px",
    animate = animateOptions(
      enter = animations$fading_entrances$fadeInLeftBig,
      exit = animations$fading_exits$fadeOutRightBig
    )
  ),

  plotOutput(outputId = 'plot2')
)

server <- function(input, output, session) {

  selectedData2 <- reactive({
    iris[, c(input$xcol2, input$ycol2)]
  })

  clusters2 <- reactive({
    kmeans(selectedData2(), input$clusters2)
  })

  output$plot2 <- renderPlot({
    palette(c("#E41A1C", "#377EB8", "#4DAF4A",
              "#984EA3", "#FF7F00", "#FFFF33",
              "#A65628", "#F781BF", "#999999"))

    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData2(),
         col = clusters2()$cluster,
         pch = 20, cex = 3)
    points(clusters2()$centers, pch = 4, cex = 4, lwd = 4)
  })

}

shinyApp(ui = ui, server = server)

Sweet Alert

via sweetalert

Show code


# ui : call this function once somewhere
useSweetAlert()


# server : launch a sweet alert anytime you want
# here they are launched when actionButtons are clicked
# but it can be after loading data, a successful (or not)
# long calculation, ...

observeEvent(input$success, {
  sendSweetAlert(
    session = session,
    title = "Success !!",
    text = "All in order",
    type = "success"
  )
})

observeEvent(input$error, {
  sendSweetAlert(
    session = session,
    title = "Error...",
    text = "Oups !",
    type = "error"
  )
})

observeEvent(input$info, {
  sendSweetAlert(
    session = session,
    title = "Information",
    text = "Something helpful",
    type = "info"
  )
})

observeEvent(input$tags, {
  sendSweetAlert(
    session = session,
    title = "HTLM tags",
    text = "normal <b>bold</b> <span style='color: steelblue;'>color</span> <h1>h1</h1>",
    html = TRUE,
    type = NULL
  )
})

observeEvent(input$warning, {
  sendSweetAlert(
    session = session,
    title = "Warning !!!",
    text = NULL,
    type = "warning"
  )
})