Native labels with explicit control relationships and direct Phlex content.
app/components/nitro_kit/label.rbNitroKit::Label.new(text, for:, id:)Labels point at ordinary native controls without taking ownership of those controls. A label is a native inline element and owns no placement of its own, so the parent stacks it above its control — here Flex, and inside Field the field grid.
test/dummy/app/components/gallery/components/label_page.rbsample("Input", slug: "input") do
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
render NitroKit::Label.new(
"Billing email",
for: "gallery-label-email",
id: "gallery-label-email-label"
)
render NitroKit::Input.new(
type: :email,
id: "gallery-label-email",
name: "billing[email]",
value: "[email protected]",
required: true
)
end
end
sample("Textarea", slug: "textarea") do
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
render NitroKit::Label.new(
"Invitation message",
for: "gallery-label-message",
id: "gallery-label-message-label"
)
render NitroKit::Textarea.new(
id: "gallery-label-message",
name: "invitation[message]",
value: "Join the release planning workspace."
)
end
end
sample("Select", slug: "select") do
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
render NitroKit::Label.new(
"Workspace role",
for: "gallery-label-role",
id: "gallery-label-role-label"
)
render NitroKit::Select.new(
id: "gallery-label-role",
name: "member[role]",
value: "member",
options: [ [ "Administrator", "admin" ], [ "Member", "member" ] ]
)
end
endPlain text and block content support concise product labels and unusually long customer copy.
test/dummy/app/components/gallery/components/label_page.rbsample("Block content", slug: "block") do
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
render NitroKit::Label.new(for: "gallery-label-search", id: "gallery-label-search-label") do
strong { "Search" }
plain(" workspace members")
end
render NitroKit::Input.new(
type: :search,
id: "gallery-label-search",
name: "members[query]",
placeholder: "Name or email"
)
end
end
sample("Long label", slug: "long") do
render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
render NitroKit::Label.new(
"Describe the production incident and include the customer-visible impact, affected regions, and recovery timeline",
for: "gallery-label-incident",
id: "gallery-label-incident-label"
)
render NitroKit::Textarea.new(
id: "gallery-label-incident",
name: "incident[summary]",
value: ""
)
end
endThe Nitro form builder derives label text and native for/id relationships from the model field.
test/dummy/app/components/gallery/components/label_page.rbprofile = Gallery::FormExamples.profile
form_with(
model: profile,
scope: :profile,
url: "#profile-labels",
builder: NitroKit::FormBuilder,
id: "gallery-label-profile-form"
) do |form|
form.group do
form.field(:name, id: "gallery-label-profile-name", required: true)
form.field(
:email,
as: :email,
id: "gallery-label-profile-email",
label: "Account email",
description: "Used for recovery and security notices."
)
end
endConstructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.
docs/component_contracts.md · NitroKit::Label
for: nil, id: nillabel[data-nk=label]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.