Toggle {shiny.fluent} | R Documentation |
Toggle
Description
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 |
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 usedefaultChecked
. -
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 usechecked
. -
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.
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).
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"))
}