Checkbox-backed settings switches with labels, descriptions, sizes, and submitted values.
app/components/nitro_kit/switch.rbNitroKit::Switch.new(label:, description:, id:, name:, checked:, size:)Switches remain native checkboxes with hidden unchecked values and live checked-state reflection.
test/dummy/app/components/gallery/components/switch_page.rbsample("Small off", slug: "small-off") do
render NitroKit::Switch.new(
label: "Weekly digest",
description: "One summary every Monday morning.",
id: "gallery-switch-small-control",
name: "preferences[weekly_digest]",
size: :sm,
html: { id: "gallery-switch-small" }
)
end
sample("Medium on", slug: "medium-on") do
render NitroKit::Switch.new(
label: "Deployment alerts",
description: "Notify the operations channel after production deploys.",
id: "gallery-switch-medium-control",
name: "preferences[deployment_alerts]",
checked: true,
size: :md,
html: { id: "gallery-switch-medium" }
)
end
sample("Required", slug: "required") do
render NitroKit::Switch.new(
label: "Security notices",
id: "gallery-switch-required-control",
name: "preferences[security_notices]",
checked: true,
required: true,
html: { id: "gallery-switch-required" }
)
end
sample("Disabled", slug: "disabled") do
render NitroKit::Switch.new(
label: "Legacy synchronization",
description: "Locked while migration is in progress.",
id: "gallery-switch-disabled-control",
name: "preferences[legacy_sync]",
checked: true,
disabled: true,
html: { id: "gallery-switch-disabled" }
)
endDescriptions are referenced with aria-describedby instead of becoming part of the accessible name.
test/dummy/app/components/gallery/components/switch_page.rbsample("Block label", slug: "block") do
render NitroKit::Switch.new(
id: "gallery-switch-block-control",
name: "preferences[activity]",
checked: true,
html: { id: "gallery-switch-block" }
) do
strong { "Activity reports" }
plain(" for workspace owners")
end
end
sample("ARIA only", slug: "aria") do
render NitroKit::Switch.new(
id: "gallery-switch-aria-control",
name: "table[compact_rows]",
include_hidden: false,
control_aria: { label: "Use compact table rows" },
html: { id: "gallery-switch-aria" }
)
end
sample("Long description", slug: "long") do
render NitroKit::Switch.new(
label: "Automatic credential rotation",
description: "Create and distribute a replacement production credential before the current credential expires, then revoke the old credential after every deployment target confirms receipt.",
id: "gallery-switch-long-control",
name: "credentials[automatic_rotation]",
html: { id: "gallery-switch-long" }
)
endBuilder fields map model booleans and validation errors into submittable switch controls.
test/dummy/app/components/gallery/components/switch_page.rbregistration = Registration.new(email: "[email protected]", role: "developer", terms: false)
registration.validate
form_with(
model: registration,
scope: :registration,
url: "#registration-switch",
builder: NitroKit::FormBuilder,
id: "gallery-switch-registration-form"
) do |form|
form.field(
:terms,
as: :switch,
id: "gallery-switch-registration-terms",
label: "Accept workspace terms",
description: "Required before registration is complete.",
required: true
)
form.submit("Continue", id: "gallery-switch-registration-save")
end