Checkbox

Submittable boolean controls with explicit checked, unchecked, and mixed state.

Source: app/components/nitro_kit/checkbox.rb
API: NitroKit::Checkbox.new(label:, id:, name:, value:, checked:)

Submission states

Checked and unchecked state stay native. Only indeterminate needs an enhancer, because HTML cannot express it.

Boolean states

Unchecked

Email summaries

Checked

Security notices

Indeterminate

Select visible members

Disabled

Legacy synchronization

Invalid

Accept the processing agreement

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/checkbox_page.rb

sample("Unchecked", slug: "unchecked") do
  render NitroKit::Checkbox.new(
    label: "Email summaries",
    id: "gallery-checkbox-unchecked-control",
    name: "preferences[email_summaries]",
    value: "enabled",
    unchecked_value: "disabled",
    html: { id: "gallery-checkbox-unchecked" }
  )
end
sample("Checked", slug: "checked") do
  render NitroKit::Checkbox.new(
    label: "Security notices",
    id: "gallery-checkbox-checked-control",
    name: "preferences[security_notices]",
    checked: true,
    required: true,
    html: { id: "gallery-checkbox-checked" }
  )
end
sample("Indeterminate", slug: "indeterminate") do
  render NitroKit::Checkbox.new(
    label: "Select visible members",
    id: "gallery-checkbox-indeterminate-control",
    name: "members[visible]",
    indeterminate: true,
    include_hidden: false,
    html: { id: "gallery-checkbox-indeterminate" }
  )
end
sample("Disabled", slug: "disabled") do
  render NitroKit::Checkbox.new(
    label: "Legacy synchronization",
    id: "gallery-checkbox-disabled-control",
    name: "preferences[legacy_sync]",
    checked: true,
    disabled: true,
    html: { id: "gallery-checkbox-disabled" }
  )
end
sample("Invalid", slug: "invalid") do
  render NitroKit::Checkbox.new(
    label: "Accept the processing agreement",
    id: "gallery-checkbox-invalid-control",
    name: "preferences[processing_agreement]",
    required: true,
    invalid: true,
    html: { id: "gallery-checkbox-invalid" }
  )
end

Sizes

Medium

Medium checkbox

Large

Large checkbox

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/checkbox_page.rb

sample("Medium", slug: "medium") do
  render NitroKit::Checkbox.new(
    label: "Medium checkbox",
    id: "gallery-checkbox-medium-control",
    name: "preferences[medium]",
    checked: true,
    size: :md,
    html: { id: "gallery-checkbox-medium" }
  )
end
sample("Large", slug: "large") do
  render NitroKit::Checkbox.new(
    label: "Large checkbox",
    id: "gallery-checkbox-large-control",
    name: "preferences[large]",
    checked: true,
    size: :lg,
    html: { id: "gallery-checkbox-large" }
  )
end

Label boundaries

Standalone controls need an explicit accessible name; block labels and long agreement text remain native.

Label pressure

Standalone

Block label

Activity reports every Monday morning

Long agreement

I understand that rotating this production credential immediately invalidates every existing deployment token

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/checkbox_page.rb

sample("Standalone", slug: "standalone") do
  render NitroKit::Checkbox.new(
    id: "gallery-checkbox-standalone-control",
    name: "rows[selected]",
    include_hidden: false,
    control_aria: { label: "Select deployment row" },
    html: { id: "gallery-checkbox-standalone" }
  )
end
sample("Block label", slug: "block") do
  render NitroKit::Checkbox.new(
    id: "gallery-checkbox-block-control",
    name: "preferences[activity]",
    checked: true,
    html: { id: "gallery-checkbox-block" }
  ) do
    strong { "Activity reports" }
    plain(" every Monday morning")
  end
end
sample("Long agreement", slug: "long") do
  render NitroKit::Checkbox.new(
    label: "I understand that rotating this production credential immediately invalidates every existing deployment token",
    id: "gallery-checkbox-long-control",
    name: "credential[confirm_rotation]",
    required: true,
    html: { id: "gallery-checkbox-long" }
  )
end

Rails form builder

The builder keeps model truthiness, hidden unchecked values, errors, and Rails names together.

Terms validation

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/checkbox_page.rb

registration = Registration.new(email: "[email protected]", role: "developer", terms: false)
registration.validate

form_with(
  model: registration,
  scope: :registration,
  url: "#registration-terms",
  builder: NitroKit::FormBuilder,
  id: "gallery-checkbox-registration-form"
) do |form|
  form.group do
    form.field(
      :terms,
      as: :checkbox,
      id: "gallery-checkbox-registration-terms",
      label: "I accept the workspace terms",
      description: "Required before the invitation can be accepted.",
      checked_value: "yes",
      unchecked_value: "no",
      required: true
    )
    form.submit("Accept invitation", id: "gallery-checkbox-registration-save")
  end
end

Under pressure

Every hostile identity from Gallery::Hostile as a checkbox label with sentence and URL descriptions, then a required checkbox that is also disabled and invalid under a paragraph-length label.

Hostile labels

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/checkbox_page.rb

render NitroKit::Flex.new(dir: :col, gap: 3, align: :stretch) do
  Gallery::Hostile::NAMES.each_with_index do |name, index|
    render NitroKit::Checkbox.new(
      label: name,
      description: index.even? ? Gallery::Hostile::LONG_SENTENCE : Gallery::Hostile::LONG_URL,
      id: "gallery-checkbox-hostile-#{index}-control",
      name: "hostile[names][#{index}]",
      checked: index.zero?,
      size: index.odd? ? :lg : :md,
      html: { id: "gallery-checkbox-hostile-#{index}" }
    )
  end
  render NitroKit::Checkbox.new(
    label: Gallery::Hostile::LONG_PARAGRAPH,
    description: Gallery::Hostile::LONG_ERROR,
    id: "gallery-checkbox-hostile-locked-control",
    name: "hostile[locked]",
    checked: true,
    required: true,
    disabled: true,
    invalid: true,
    html: { id: "gallery-checkbox-hostile-locked" }
  )
end

Component contract

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

docs/component_contracts.md · NitroKit::Checkbox

Constructor-specific options: label: nil, description: nil, id: nil, name: nil, value: "1", unchecked_value: "0", include_hidden: true, checked: false, indeterminate: false, disabled: false, required: false, invalid: false, size: :md, control_html: {}, control_aria: {}, control_data: {}
Root and closed vocabulary: div[data-nk=checkbox] containing a native checkbox input; sizes md lg
Contract: Requires label text, block content, or an accessible control name; a description requires a label or block and a non-blank String id:, renders outside the label in the checkbox-description slot, and binds aria-describedby, so the accessible name stays the label text. A named checkbox emits its unchecked hidden input by default, and include_hidden: true with a nil unchecked_value raises. invalid: true sets aria-invalid on the control. Checked state stays native; only indeterminate: true mounts the nk--checkable enhancer, which applies the native DOM property and owns data-state="indeterminate".

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.