Native selection controls with typed choices, prompts, blanks, and multiple values.
app/components/nitro_kit/select.rbNitroKit::Select.new(options:, id:, name:, value:, multiple:)Strings, arrays, hashes, and Choice records normalize into the same explicit option contract.
test/dummy/app/components/gallery/components/select_page.rbrender NitroKit::Select.new(
id: "gallery-select-mixed-control",
control_aria: { label: "Workspace region" },
name: "workspace[region]",
value: "eu-central",
include_blank: "No region selected",
options: [
"Automatic",
[ "United States East", "us-east" ],
{ label: "European Union Central", value: "eu-central", id: "region-eu-central" },
NitroKit::Choice.new(
label: "Legacy Asia Pacific",
value: "ap-legacy",
disabled: true,
id: "region-ap-legacy"
)
],
html: { id: "gallery-select-mixed" }
)test/dummy/app/components/gallery/components/select_page.rbsample("Prompt", slug: "prompt") do
render NitroKit::Select.new(
id: "gallery-select-prompt-control",
control_aria: { label: "Member role" },
name: "member[role]",
prompt: "Choose a role",
required: true,
options: [ [ "Administrator", "admin" ], [ "Member", "member" ], [ "Viewer", "viewer" ] ],
html: { id: "gallery-select-prompt" }
)
end
sample("No choices", slug: "empty") do
render NitroKit::Select.new(
id: "gallery-select-empty-control",
control_aria: { label: "Available region" },
name: "workspace[available_region]",
options: [],
disabled: true,
aria: { label: "No regions available" },
html: { id: "gallery-select-empty" }
)
endSingle, multiple, disabled, and long choices retain native names and selected values.
test/dummy/app/components/gallery/components/select_page.rbsample("Multiple", slug: "multiple") do
render NitroKit::Select.new(
id: "gallery-select-multiple-control",
control_aria: { label: "Notification channels" },
name: "notifications[channels]",
value: %w[email security],
multiple: true,
options: [
[ "Product updates", "product" ],
[ "Email summaries", "email" ],
[ "Security notices", "security" ]
],
html: { id: "gallery-select-multiple" }
)
end
sample("Disabled", slug: "disabled") do
render NitroKit::Select.new(
id: "gallery-select-disabled-control",
control_aria: { label: "Billing currency" },
name: "billing[currency]",
value: "USD",
disabled: true,
options: [ [ "United States dollar", "USD" ], [ "Euro", "EUR" ] ],
html: { id: "gallery-select-disabled" }
)
end
sample("Long option", slug: "long") do
render NitroKit::Select.new(
id: "gallery-select-long-control",
control_aria: { label: "Retention policy" },
name: "retention[policy]",
value: "regulated",
options: [
[ "Standard retention for ordinary workspace activity", "standard" ],
[ "Extended regulated retention with immutable audit exports", "regulated" ]
],
html: { id: "gallery-select-long" }
)
endThe builder preserves model selection, Rails field names, prompts, and validation errors.
test/dummy/app/components/gallery/components/select_page.rbprofile = Gallery::FormExamples.profile(:invalid)
form_with(
model: profile,
scope: :profile,
url: "#profile-time-zone",
builder: NitroKit::FormBuilder,
id: "gallery-select-profile-form"
) do |form|
form.group do
form.field(
:time_zone,
as: :select,
id: "gallery-select-profile-time-zone",
label: "Time zone",
description: "Dates in reports use this display time zone.",
prompt: "Choose a time zone",
options: Gallery::Forms::Profile::TIME_ZONES,
required: true
)
form.submit("Save time zone", id: "gallery-select-profile-save")
end
endConstructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.
docs/component_contracts.md · NitroKit::Select
options: [], option_tags: nil, id: nil, name: nil, value: nil, include_blank: nil, prompt: nil, disabled: false, required: false, multiple: false, autocomplete: nil, control_html: {}, control_aria: {}, control_data: {}span[data-nk=select] wrapping a native selectoptions: and captured option_tags: are mutually exclusive, as are include_blank: and prompt:. id: and the control_* bags address the inner select; html:, aria:, and data: address the root span. Multiple names normalize to [], drop the toggle icon, and accept array values.Application conventions this component belongs to. Each summary is the leading section of its pattern document.
docs/patterns/resource_form.md
422; success redirects with 303.form.group.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
render NitroKit::Button.new("Save", variant: :primary).ArgumentError; this component's accepted options are in the contract above.html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.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.desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.--nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.data-state when styling or behavior also needs it.