如何在Shiny单选按钮前后添加行内文本实现单行布局？

问题场景 #

想要做出一行包含前后文本的单选按钮，样式类似：

从以下选项中选择：(●) 部分 (○) 大部分 (○) 全部 可用字段

用shiny::radioButtons的label参数只能添加前置文本，用tagList组合单选按钮和后置文本时，会出现后置文本换行的问题，当前代码示例：

tagList(
    shiny::radioButtons(
      ns("field_sel"),
      label = "从以下选项中选择：",
      choices = c("部分", "大部分", "全部"),
      selected = "部分",
      inline = TRUE
    ),
    htmltools::HTML(" 可用字段")
)

解决办法 #

办法1：自定义HTML构建行内单选组 #

直接用Shiny的标签函数构建整个行内结构，确保所有元素在同一行：

tags$div(
  class = "form-group shiny-input-radiogroup shiny-input-container",
  tags$span("从以下选项中选择："),
  tags$div(
    class = "shiny-options-group",
    tags$label(class = "radio-inline",
               tags$input(type = "radio", name = ns("field_sel"), value = "部分", checked = "checked"),
               " 部分"),
    tags$label(class = "radio-inline",
               tags$input(type = "radio", name = ns("field_sel"), value = "大部分"),
               " 大部分"),
    tags$label(class = "radio-inline",
               tags$input(type = "radio", name = ns("field_sel"), value = "全部"),
               " 全部")
  ),
  tags$span(" 可用字段")
)

radio-inline类保证单选按钮横向排列，所有元素在同一个容器内，不会出现换行。

办法2：修改radioButtons的DOM结构 #

先创建不带默认标签的单选按钮，再用tagQuery调整DOM，插入前后文本：

# 先创建无label的单选按钮
radio_input <- shiny::radioButtons(
  ns("field_sel"),
  label = NULL,
  choices = c("部分", "大部分", "全部"),
  selected = "部分",
  inline = TRUE
)

# 插入前后文本并调整结构
htmltools::tagQuery(radio_input) %>%
  prepend(tags$span("从以下选项中选择：")) %>%
  find(".shiny-options-group") %>%
  append(tags$span(" 可用字段")) %>%
  allTags()

这种方法保留Shiny单选按钮的默认样式，只调整元素位置。

办法3：用CSS强制行内排列 #

给容器添加flex布局样式，强制所有元素横向排列：

tags$div(
  style = "display: flex; align-items: center; gap: 5px;",
  shiny::radioButtons(
    ns("field_sel"),
    label = "从以下选项中选择：",
    choices = c("部分", "大部分", "全部"),
    selected = "部分",
    inline = TRUE
  ),
  htmltools::HTML("可用字段")
)

display: flex让容器内元素横向分布，align-items: center保证垂直对齐，gap可调整元素间的间距。

内容的提问来源于stack exchange，提问作者triphook