Checkbox group

A native fieldset of typed multi-select choices with Rails array naming.

Source
app/components/nitro_kit/checkbox_group.rb
API
NitroKit::CheckboxGroup.new(legend:, options:, name:, value:)

Choice normalization

Typed choices normalize into one fieldset, one unchecked sentinel, and deterministic checkbox IDs.

Notification channels

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Notification channels",
  description: "Choose every channel that should receive production alerts.",
  id: "gallery-checkbox-group-notifications",
  name: "preferences[channels]",
  value: [ "Email", "security" ],
  options: [
    "Email",
    [ "Security dashboard", "security" ],
    { label: "Team operations channel", value: "operations", id: "gallery-channel-operations" },
    NitroKit::Choice.new(
      label: "Legacy pager",
      value: "pager",
      disabled: true,
      id: "gallery-channel-pager"
    )
  ]
)

Boundary counts

One choice
No selection
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
sample("One choice", slug: "one") do
  render NitroKit::CheckboxGroup.new(
    legend: "Workspace digest",
    id: "gallery-checkbox-group-one",
    name: "preferences[digest]",
    value: [],
    options: [ [ "Weekly summary", "weekly" ] ]
  )
end
sample("No selection", slug: "none-selected") do
  render NitroKit::CheckboxGroup.new(
    legend: "Export formats",
    id: "gallery-checkbox-group-none",
    name: "export[formats]",
    value: [],
    options: [ [ "CSV", "csv" ], [ "JSON", "json" ], [ "PDF", "pdf" ] ]
  )
end

Availability and pressure

Disabled groups, disabled individual choices, many choices, and long copy retain fieldset semantics.

Many permissions

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Workspace permissions inherited by members of the release engineering team",
  description: "Selected permissions apply to new team members and do not replace individual owner grants.",
  id: "gallery-checkbox-group-many",
  name: "team[permissions]",
  value: %w[deploy read_logs manage_incidents],
  options: [
    [ "Deploy to production", "deploy" ],
    [ "Read deployment logs", "read_logs" ],
    [ "Manage incidents and customer-visible status updates", "manage_incidents" ],
    [ "Rotate production credentials", "rotate_credentials" ],
    [ "Change billing details", "billing", true ],
    [ "Export the complete workspace audit log", "export_audit" ]
  ]
)

Disabled group

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Legacy synchronization targets",
  description: "This configuration is locked while migration is in progress.",
  id: "gallery-checkbox-group-disabled",
  name: "legacy[targets]",
  value: %w[warehouse archive],
  disabled: true,
  options: [ [ "Reporting warehouse", "warehouse" ], [ "Compliance archive", "archive" ] ]
)

Form composition

The direct group submits conventional Rails array names inside an ordinary Phlex form.

Report subscription

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
form(id: "gallery-checkbox-group-report-form", action: "#report-subscription", method: "post") do
  render NitroKit::CheckboxGroup.new(
    legend: "Reports to receive",
    description: "Select any number of recurring workspace reports.",
    id: "gallery-checkbox-group-reports",
    name: "subscription[reports]",
    value: %w[deployments billing],
    options: [
      [ "Deployment activity", "deployments" ],
      [ "Member access changes", "access" ],
      [ "Billing summary", "billing" ]
    ]
  )
  render NitroKit::Button.new(
    "Save subscriptions",
    id: "gallery-checkbox-group-report-save",
    type: :submit,
    variant: :primary
  )
end