Toggle — Toggle • shiny.fluent

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 can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Toggle(...)

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

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

Arguments

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.fluent)

if (interactive()) {
  shinyApp(
    ui = div(
      Toggle.shinyInput("toggle", value = TRUE),
      textOutput("toggleValue")
    ),
    server = function(input, output) {
      output$toggleValue <- renderText({
        sprintf("Value: %s", input$toggle)
      })
    }
  )
}