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[reviewstatus_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.
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[deployread_logsmanage_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" ]
]
)
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[pagerdutyemail],
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" ] ]
)
endend
Under pressure
Thirty Gallery::Hostile badge labels as choices under an overlong legend and paragraph guidance, then the same choices as horizontal chips and as cards with paragraph descriptions.
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.