Textarea

Multiline text controls with native values, constraints, and availability state.

Source: app/components/nitro_kit/textarea.rb
API: NitroKit::Textarea.new(id:, name:, value:, rows:, wrap:)

Values and constraints

Textarea values remain text content while native sizing and length constraints stay explicit.

Value matrix

Default

Empty

Constrained

Viewport640 px · sm

Width

Preset

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

sample("Default", slug: "default") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-default",
    aria: { label: "Profile bio" },
    name: "profile[bio]",
    value: "Building reliable interfaces for analytical software.",
    rows: 4
  )
end
sample("Empty", slug: "empty") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-empty",
    aria: { label: "Invitation message" },
    name: "invitation[message]",
    value: "",
    placeholder: "Add an optional welcome message"
  )
end
sample("Constrained", slug: "constrained") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-constrained",
    aria: { label: "Incident summary" },
    name: "incident[summary]",
    value: "Customer impact was limited to delayed notifications.",
    required: true,
    rows: 6,
    cols: 48,
    minlength: 20,
    maxlength: 280,
    wrap: :hard
  )
end

Availability and pressure

Read-only, disabled, long, and invalid content preserve browser and accessibility semantics.

State matrix

Read only

Export completed by Ada Lovelace on July 13, 2026.

Disabled

Long content

Viewport640 px · sm

Width

Preset

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

sample("Read only", slug: "readonly") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-readonly",
    aria: { label: "Audit summary" },
    name: "audit[summary]",
    value: "Export completed by Ada Lovelace on July 13, 2026.",
    readonly: true
  )
end
sample("Disabled", slug: "disabled") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-disabled",
    aria: { label: "Legacy notes" },
    name: "legacy[notes]",
    value: "Legacy notes cannot be edited.",
    disabled: true
  )
end
sample("Long content", slug: "long") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-long",
    aria: { label: "Retention policy" },
    name: "workspace[retention_policy]",
    value: "Workspace records remain available throughout the current billing period. " \
      "Audit exports preserve their original timestamps and actor identifiers across plan changes.",
    rows: 8,
    wrap: :soft
  )
end

Invalid field

Biography

Keep the biography under 280 characters.

Bio is too long (maximum is 280 characters)

Viewport640 px · sm

Width

Preset

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

invalid_profile = Gallery::FormExamples.profile(:invalid)

render NitroKit::Field.new(
  nil,
  :bio,
  as: :textarea,
  id: "gallery-textarea-invalid",
  name: "profile[bio]",
  value: invalid_profile.bio,
  label: "Biography",
  description: "Keep the biography under 280 characters.",
  errors: invalid_profile.errors.full_messages_for(:bio),
  required: true,
  maxlength: 280
)

Rails form builder

Model values and validation errors flow through FormBuilder into the direct textarea component.

Invalid profile biography

Viewport640 px · sm

Width

Preset

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

profile = Gallery::FormExamples.profile(:invalid)

form_with(
  model: profile,
  scope: :profile,
  url: "#profile-biography",
  builder: NitroKit::FormBuilder,
  id: "gallery-textarea-profile-form"
) do |form|
  form.group do
    form.field(
      :bio,
      as: :textarea,
      id: "gallery-textarea-profile-bio",
      description: "A short biography shown to workspace members.",
      required: true,
      maxlength: 280
    )
    form.submit("Save biography", id: "gallery-textarea-profile-save")
  end
end

Under pressure

Paragraph, unbroken-word, and URL values with a paragraph placeholder from Gallery::Hostile, then a required textarea field that is disabled and invalid.

Hostile values

Paragraph in two rows

Unbroken word

Long URL, no wrap

Paragraph placeholder

Mixed scripts

Viewport640 px · sm

Width

Preset

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

sample("Paragraph in two rows", slug: "paragraph") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-hostile-paragraph",
    aria: { label: Gallery::Hostile::LONG_LABEL },
    name: "hostile[paragraph]",
    value: Gallery::Hostile::LONG_PARAGRAPH,
    rows: 2
  )
end
sample("Unbroken word", slug: "word") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-hostile-word",
    aria: { label: Gallery::Hostile::LONG_LABEL },
    name: "hostile[word]",
    value: ([ Gallery::Hostile::LONG_WORD ] * 3).join,
    rows: 3
  )
end
sample("Long URL, no wrap", slug: "url") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-hostile-url",
    aria: { label: Gallery::Hostile::LONG_LABEL },
    name: "hostile[url]",
    value: Gallery::Hostile::LONG_URL,
    wrap: :off,
    rows: 3
  )
end
sample("Paragraph placeholder", slug: "placeholder") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-hostile-placeholder",
    aria: { label: Gallery::Hostile::LONG_LABEL },
    name: "hostile[placeholder]",
    value: "",
    placeholder: Gallery::Hostile::LONG_PARAGRAPH,
    rows: 3
  )
end
sample("Mixed scripts", slug: "scripts") do
  render NitroKit::Textarea.new(
    id: "gallery-textarea-hostile-scripts",
    aria: { label: Gallery::Hostile::LONG_LABEL },
    name: "hostile[scripts]",
    value: Gallery::Hostile::NAMES.join("\n"),
    rows: 4
  )
end

Hostile textarea field

Regional data residency, retention, and lawful-basis preferences for every workspace

This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text.

must be between 3 and 64 characters, may only contain letters, numbers, hyphens, and underscores, must not start or end with a hyphen, and must not collide with a reserved workspace slug such as admin, api, or www

Viewport640 px · sm

Width

Preset

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

render NitroKit::Field.new(
  nil,
  :notes,
  as: :textarea,
  id: "gallery-textarea-hostile-field",
  name: "hostile[notes]",
  value: Gallery::Hostile::LONG_WORD,
  label: Gallery::Hostile::LONG_LABEL,
  description: Gallery::Hostile::LONG_PARAGRAPH,
  errors: [ Gallery::Hostile::LONG_ERROR ],
  required: true,
  disabled: true,
  rows: 2,
  html: { id: "gallery-textarea-hostile-field-wrapper" }
)

Component contract

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

docs/component_contracts.md · NitroKit::Textarea

Constructor-specific options: id: nil, name: nil, value: nil, placeholder: nil, disabled: false, readonly: false, required: false, autocomplete: nil, rows: nil, cols: nil, minlength: nil, maxlength: nil, wrap: nil
Root and closed vocabulary: native textarea[data-nk=textarea]; wraps soft hard off
Contract: Every owned attribute is a keyword; passing one through html: raises and names the keyword. Rows and columns must be positive; lengths must be non-negative; minimum length cannot exceed maximum. Read-only controls have their own muted treatment.

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.