calcite_switch: Create a Calcite Switch Component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Calcite Switch Component

Description

Creates a switch component for "on" and "off" choices. Switches should be used for boolean choices and can be useful for opt-in and additive actions.

Usage

calcite_switch(
  id = NULL,
  checked = NULL,
  disabled = NULL,
  form = NULL,
  label = NULL,
  label_text_end = NULL,
  label_text_start = NULL,
  name = NULL,
  scale = NULL,
  value = NULL,
  ...
)

Arguments

id	Optional ID for the switch (required for Shiny reactivity)
checked	When TRUE, the component is checked
disabled	When TRUE, interaction is prevented and the component is displayed with lower opacity
form	The id of the form that will be associated with the component
label	Accessible name for the component
label_text_end	When provided, displays label text at the end of the component
label_text_start	When provided, displays label text at the start of the component
name	Specifies the name of the component. Required to pass the component's value on form submission
scale	Specifies the size of the component: "s" (small), "m" (medium), or "l" (large)
value	The component's value
...	Additional attributes passed to the component

Details

Shiny Integration

When used in a Shiny app, calcite_switch() returns a reactive list containing all component properties. You can observe the entire component state or watch individual properties:

Available properties:

• ⁠$checked⁠ - Whether the switch is currently checked (on/off)

• ⁠$disabled⁠ - Whether the switch is disabled

• ⁠$value⁠ - The switch's value

• ⁠$name⁠ - The component's name

• Other component properties

Usage in server:

# Watch for changes to the switch
observeEvent(input$my_switch, {
  print(paste("Switch is:", if(input$my_switch$checked) "ON" else "OFF"))
})

# Access the checked state directly
observeEvent(input$my_switch$checked, {
  if (input$my_switch$checked) {
    print("Switch turned ON")
  } else {
    print("Switch turned OFF")
  }
})

Value

An object of class calcite_component

References

Official Documentation

Examples

# Basic switch
calcite_switch(
  id = "my_switch",
  label = "Enable 3D mode"
)

# Switch with label text on both sides
calcite_switch(
  id = "theme_switch",
  label_text_start = "Light",
  label_text_end = "Dark",
  label = "Theme toggle"
)

# Checked switch at large scale
calcite_switch(
  checked = TRUE,
  scale = "l",
  label = "Notifications"
)

# Shiny example
if (interactive()) {
  library(shiny)

  ui <- calcite_shell(
    calcite_panel(
      heading = "Switch Example",

      calcite_label(
        layout = "inline",
        "3D Off",
        calcite_switch(id = "mode_switch"),
        "3D On"
      ),

      verbatimTextOutput("status")
    )
  )

  server <- function(input, output, session) {
    # Display switch state
    output$status <- renderPrint({
      input$mode_switch
    })
  }

  shinyApp(ui, server)
}

calcite documentation built on March 3, 2026, 5:07 p.m.