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)
      })
    }
  )
}