Skip to contents

A toggle represents a physical switch that allows someone to choose between two mutually exclusive options.  For example, “On/Off”, “Show/Hide”. Choosing an option should produce an immediate result.

For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

Toggle(...)

Toggle.shinyInput(inputId, ..., value = defaultValue)

updateToggle.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

...

Props to pass to the component. The allowed props are listed below in the Details section.

inputId

ID of the component.

value

Starting value.

session

Object passed as the session argument to Shiny server.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app. The update functions return nothing (called for side effects).

Details

  • ariaLabel string
    Text for screen-reader to announce as the name of the toggle.

  • as IComponentAs<React.HTMLAttributes<HTMLElement>>
    Render the root element as another type.

  • checked boolean
    Checked state of the toggle. If you are maintaining state yourself, use this property. Otherwise use defaultChecked.

  • componentRef IRefObject<IToggle>
    Optional callback to access the IToggle interface. Use this instead of ref for accessing the public methods and properties of the component.

  • defaultChecked boolean
    Initial state of the toggle. If you want the toggle to maintain its own state, use this. Otherwise use checked.

  • disabled boolean
    Optional disabled flag.

  • inlineLabel boolean
    Whether the label (not the onText/offText) should be positioned inline with the toggle control. Left (right in RTL) side when on/off text provided VS right (left in RTL) side when no on/off text. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

  • keytipProps IKeytipProps
    Optional keytip for this toggle

  • label string | JSX.Element
    A label for the toggle.

  • offAriaLabel string

  • offText string
    Text to display when toggle is OFF. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

  • onAriaLabel string

  • onChange (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void
    Callback issued when the value changes.

  • onChanged (checked: boolean) => void

  • onText string
    Text to display when toggle is ON. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

  • role 'checkbox' | 'switch' | 'menuitemcheckbox'
    (Optional) Specify whether to use the "switch" role (ARIA 1.1) or the checkbox role (ARIA 1.0). If unspecified, defaults to "switch".

  • styles IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles>
    Optional styles for the component.

  • theme ITheme
    Theme provided by HOC.

Best practices

Layout

  • When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click a "Submit", "Next", or "OK" button to apply changes, use a check box.

Content

  • Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".

  • Keep descriptive text short and concise—two to four words; preferably nouns. For example, "Focused inbox" or "WiFi".

Examples

library(shiny)
library(shiny.fluent)

ui <- function(id) {
  ns <- NS(id)
  div(
    Toggle.shinyInput(ns("toggle"), value = TRUE),
    textOutput(ns("toggleValue"))
  )
}

server <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$toggleValue <- renderText({
      sprintf("Value: %s", input$toggle)
    })
  })
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}