calcite_segmented_control: Create a Calcite Segmented Control Component

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

Create a Calcite Segmented Control Component

Description

Creates a segmented control for selecting between multiple options. Similar to radio buttons but with a more compact, segmented button appearance.

Usage

calcite_segmented_control(
  ...,
  id = NULL,
  value = NULL,
  appearance = NULL,
  disabled = NULL,
  layout = NULL,
  scale = NULL,
  width = NULL,
  name = NULL,
  label_text = NULL,
  status = NULL,
  validation_message = NULL,
  required = NULL
)

Arguments

...	Additional attributes passed to the component
id	Component ID (required for Shiny reactivity)
value	Initial selected value (should match a child item's value)
appearance	Visual style: "solid", "outline", or "outline-fill"
disabled	Whether the control is disabled (default: FALSE)
layout	Orientation: "horizontal" or "vertical"
scale	Size of the control: "s" (small), "m" (medium), or "l" (large)
width	Width behavior: "auto" or "full"
name	Name for form submission
label_text	Label displayed on the component
status	Validation state: "idle", "valid", or "invalid"
validation_message	Message displayed for validation feedback
required	Whether selection is required

Details

Shiny Integration

The segmented control emits a calciteSegmentedControlChange event when the selected item changes.

Available properties in input$id:

• ⁠$value⁠ - Currently selected value (matches a child item's value attribute)

• ⁠$disabled⁠ - Whether the control is disabled

• ⁠$scale⁠ - Current scale setting

• Other component properties

Basic usage:

calcite_segmented_control(
  id = "effect_type",
  width = "full",
  calcite_segmented_control_item(value = "blur"),
  calcite_segmented_control_item(value = "highlight", checked = TRUE),
  calcite_segmented_control_item(value = "party")
)

# In server
observeEvent(input$effect_type, {
  selected <- input$effect_type$value
  print(paste("Selected:", selected))
})

Update from server:

update_calcite("effect_type", value = "blur")

Value

An object of class calcite_component

References

Official Documentation

Examples

# Basic segmented control
calcite_segmented_control(
  id = "view_mode",
  calcite_segmented_control_item(value = "list", icon_start = "list"),
  calcite_segmented_control_item(value = "grid", icon_start = "grid", checked = TRUE),
  calcite_segmented_control_item(value = "table", icon_start = "table")
)

# Full width with text
calcite_segmented_control(
  id = "effect",
  width = "full",
  calcite_segmented_control_item(value = "Blur"),
  calcite_segmented_control_item(value = "Highlight", checked = TRUE),
  calcite_segmented_control_item(value = "Party mode")
)

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

  ui <- calcite_shell(
    calcite_card(
      heading = "Segmented Control Example",
      calcite_label(
        "Choose an option",
        calcite_segmented_control(
          id = "my_control",
          width = "full",
          calcite_segmented_control_item(value = "option1"),
          calcite_segmented_control_item(value = "option2", checked = TRUE),
          calcite_segmented_control_item(value = "option3")
        )
      ),
      verbatimTextOutput("selected_value")
    )
  )

  server <- function(input, output, session) {
    output$selected_value <- renderPrint({
      paste("Selected:", input$my_control$value)
    })
  }

  shinyApp(ui, server)
}

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