Skip to content
Nitro Kitv2.0.0.alpha.4

Search gallery…

IntroductionGalleryAgent guideGalleryHuman guideGalleryColorsFoundations · ThemeTypographyFoundations · ThemeSpacing & sizingFoundations · ThemeEffectsFoundations · ThemeButtonComponents · ActionsButton groupComponents · ActionsButton toComponents · ActionsAppearance pickerComponents · FormsCheckboxComponents · FormsCheckbox groupComponents · FormsComboboxComponents · FormsControl groupComponents · FormsDropzoneComponents · FormsFieldComponents · FormsField groupComponents · FormsFieldsetComponents · FormsInputComponents · FormsLabelComponents · FormsRadio buttonComponents · FormsRadio button groupComponents · FormsRich text areaComponents · FormsSelectComponents · FormsSwitchComponents · FormsTextareaComponents · FormsCommand paletteComponents · OverlaysDialogComponents · OverlaysDropdownComponents · OverlaysSheetComponents · OverlaysTooltipComponents · OverlaysAlertComponents · FeedbackEmpty stateComponents · FeedbackToastComponents · FeedbackAccordionComponents · Data displayAvatarComponents · Data displayAvatar stackComponents · Data displayBadgeComponents · Data displayDetails tableComponents · Data displayIconComponents · Data displayProgressive imageComponents · Data displayStat gridComponents · Data displayTableComponents · Data displayTypesetComponents · Data displayPaginationComponents · NavigationPagination barComponents · NavigationTabsComponents · NavigationToolbarComponents · NavigationCardComponents · LayoutContainerComponents · LayoutFlexComponents · LayoutGridComponents · LayoutApplication navigationComponents · ApplicationApplication shellComponents · ApplicationAuthentication shellComponents · ApplicationDanger zoneComponents · ApplicationData sectionComponents · ApplicationForm sectionComponents · ApplicationPage headerComponents · ApplicationSettings layoutComponents · ApplicationSign inCompositions · Access & onboardingPassword resetCompositions · Access & onboardingEmail verificationCompositions · Access & onboardingInvitation acceptanceCompositions · Access & onboardingAccount creationCompositions · Access & onboardingAccount securityCompositions · Access & onboardingWorkspace onboardingCompositions · Access & onboardingBranched onboardingCompositions · Access & onboardingWorkspace dashboardCompositions · Workspace & organizationWorkspace settingsCompositions · Workspace & organizationWorkspace usersCompositions · Workspace & organizationTeam managementCompositions · Workspace & organizationAPI credentialsCompositions · Workspace & organizationOrganization overviewCompositions · Workspace & organizationOrganization settingsCompositions · Workspace & organizationTeam activityCompositions · Workspace & organizationTeam memberCompositions · Workspace & organizationSubscription billingCompositions · Billing & commerceCheckout and paymentCompositions · Billing & commerceCheckout resultsCompositions · Billing & commerceData resource overviewCompositions · Data & operationsData resource activityCompositions · Data & operationsData resource settingsCompositions · Data & operationsProduct resource lifecycleCompositions · Data & operationsAPI webhooksCompositions · Data & operationsIntegration managementCompositions · Data & operationsFile uploadsCompositions · Data & operationsActivity and audit logCompositions · Data & operationsChangelogCompositions · Product & supportHelp centerCompositions · Product & supportSystem status and errorsCompositions · Product & supportProduct landingCompositions · MarketingPublic pricingCompositions · MarketingProduct featuresCompositions · MarketingPublic contactCompositions · MarketingSidebar operations applicationCompositions · Complete applicationsTopbar media applicationCompositions · Complete applicationsHybrid account applicationCompositions · Complete applications

No destinations found.

  • Introduction
  • Agent guide
  • Human guide
  • Foundations
    • Colors
    • Typography
    • Spacing & sizing
    • Effects
  • Actions
    • Button
    • Button group
    • Button to
  • Forms
    • Appearance picker
    • Checkbox
    • Checkbox group
    • Combobox
    • Control group
    • Dropzone
    • Field
    • Field group
    • Fieldset
    • Input
    • Label
    • Radio button
    • Radio button group
    • Rich text area
    • Select
    • Switch
    • Textarea
  • Overlays
    • Command palette
    • Dialog
    • Dropdown
    • Sheet
    • Tooltip
  • Feedback
    • Alert
    • Empty state
    • Toast
  • Data display
    • Accordion
    • Avatar
    • Avatar stack
    • Badge
    • Details table
    • Icon
    • Progressive image
    • Stat grid
    • Table
    • Typeset
  • Navigation
    • Pagination
    • Pagination bar
    • Tabs
    • Toolbar
  • Layout
    • Card
    • Container
    • Flex
    • Grid
  • Application
    • Application navigation
    • Application shell
    • Authentication shell
    • Danger zone
    • Data section
    • Form section
    • Page header
    • Settings layout
  • Access & onboarding
    • Sign in
    • Password reset
    • Email verification
    • Invitation acceptance
    • Account creation
    • Account security
    • Workspace onboarding
    • Branched onboarding
  • Workspace & organization
    • Workspace dashboard
    • Workspace settings
    • Workspace users
    • Team management
    • API credentials
    • Organization overview
    • Organization settings
    • Team activity
    • Team member
  • Billing & commerce
    • Subscription billing
    • Checkout and payment
    • Checkout results
  • Data & operations
    • Data resource overview
    • Data resource activity
    • Data resource settings
    • Product resource lifecycle
    • API webhooks
    • Integration management
    • File uploads
    • Activity and audit log
  • Product & support
    • Changelog
    • Help center
    • System status and errors
  • Marketing
    • Product landing
    • Public pricing
    • Product features
    • Public contact
  • Complete applications
    • Sidebar operations application
    • Topbar media application
    • Hybrid account application

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

Notification channels

Choose every channel that should receive production alerts.

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
Workspace digest
No selection
Export formats
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

Presentation and orientation

`presentation:` and `orientation:` change how the same fieldset lays its choices out; the markup, names, and hidden sentinel stay identical.

Card presentation

Cards suit choices that carry their own explanation, and the selected card is outlined.

Deployment protections

Protections apply to every production deploy in this workspace.

One approving review from outside the authoring team.
The deploy waits for the full test suite and the security scan.
Production deploys are refused outside 08:00–18:00 UTC on weekdays.
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Deployment protections",
  description: "Protections apply to every production deploy in this workspace.",
  id: "gallery-checkbox-group-cards",
  name: "workspace[protections]",
  value: %w[review status_checks],
  presentation: :cards,
  options: [
    {
      label: "Require a reviewer",
      value: "review",
      description: "One approving review from outside the authoring team."
    },
    {
      label: "Require passing status checks",
      value: "status_checks",
      description: "The deploy waits for the full test suite and the security scan."
    },
    {
      label: "Require a deploy window",
      value: "window",
      description: "Production deploys are refused outside 08:00–18:00 UTC on weekdays."
    }
  ]
)

Horizontal orientation

Short, self-evident choices read well on one line and wrap when the parent narrows.

Include in the export
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Include in the export",
  id: "gallery-checkbox-group-horizontal",
  name: "export[sections]",
  value: %w[members deployments],
  orientation: :horizontal,
  options: [
    [ "Members", "members" ],
    [ "Deployments", "deployments" ],
    [ "Invoices", "invoices" ],
    [ "Audit log", "audit_log" ]
  ]
)

Availability and pressure

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

Many permissions

Workspace permissions inherited by members of the release engineering team

Selected permissions apply to new team members and do not replace individual owner grants.

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" ],
    { label: "Change billing details", value: "billing", disabled: true },
    [ "Export the complete workspace audit log", "export_audit" ]
  ]
)

Required large group

Compliance acknowledgements

Every reviewer must record at least one acknowledgement.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
render NitroKit::CheckboxGroup.new(
  legend: "Compliance acknowledgements",
  description: "Every reviewer must record at least one acknowledgement.",
  id: "gallery-checkbox-group-required",
  name: "review[acknowledgements]",
  value: %w[retention],
  required: true,
  size: :lg,
  options: [
    [ "Retention policy reviewed", "retention" ],
    [ "Access log reviewed", "access_log" ]
  ]
)

Disabled group

Legacy synchronization targets

This configuration is locked while migration is in progress.

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

Reports to receive

Select any number of recurring workspace reports.

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::FieldGroup.new(html: { id: "gallery-checkbox-group-report-fields" }) 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
end

Two groups in one fieldset

A Fieldset owns the heading and the rhythm between related groups; each group keeps its own legend and its own Rails array name.

Alert routing

Choose where each class of alert is delivered.

Incident alerts
Billing alerts
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/checkbox_group_page.rb
form(id: "gallery-checkbox-group-alerts-form", action: "#alert-routing", method: "post") do
  render NitroKit::Fieldset.new(
    legend: "Alert routing",
    description: "Choose where each class of alert is delivered.",
    html: { id: "gallery-checkbox-group-alerts-fieldset" }
  ) do
    render NitroKit::CheckboxGroup.new(
      legend: "Incident alerts",
      id: "gallery-checkbox-group-incident-alerts",
      name: "routing[incident]",
      value: %w[pagerduty email],
      orientation: :horizontal,
      options: [ [ "PagerDuty", "pagerduty" ], [ "Email", "email" ], [ "Chat", "chat" ] ]
    )
    render NitroKit::CheckboxGroup.new(
      legend: "Billing alerts",
      id: "gallery-checkbox-group-billing-alerts",
      name: "routing[billing]",
      value: %w[email],
      orientation: :horizontal,
      options: [ [ "Email", "email" ], [ "Chat", "chat" ] ]
    )
  end
end

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::CheckboxGroup

Constructor-specific options
  • required legend:, options:, name:
  • value: [], id: nil, description: nil, orientation: :vertical, presentation: :list, unchecked_value: "", include_hidden: true, disabled: false, required: false, size: :md
Root and closed vocabulary
native fieldset[data-nk=checkbox-group]; orientations vertical horizontal; presentations list cards; sizes md lg
Contract
Options are non-empty Choice values with unique values and IDs. Names normalize to []; one group-level unchecked input is emitted by default and its unchecked_value stays Rails' array sentinel "". A name with no id-safe characters raises instead of skipping IDs. required: true marks application state as data-required=true; it does not emit invalid aria-required on the native fieldset or require every checkbox. The legend and description scope the whole group, so choices do not repeat the description through aria-describedby.

Relevant patterns

Application conventions this component belongs to. Each summary is the leading section of its pattern document.

docs/patterns/resource_form.md

Resource form

  • One model-backed Phlex component renders initial and invalid states.
  • Rails owns names, values, and errors; Nitro owns presentation.
  • Invalid mutations render the same model with 422; success redirects with 303.
  • Use one primary submit: the shell toolbar owns it, or a standalone form keeps it inside form.group.
  • Wrap the form in a Turbo Frame only when it needs an independent lifecycle.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions
  • Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
  • Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
  • Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
  • Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
  • Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
  • If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
  • Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
  • Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
  • Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
  • Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.