Unable to set label content

[paulrobertlloyd]

I’m trying to implement an address pattern using multiple text inputs, as described in the design system. This requires the following HTML:

<div class="govuk-form-group">
  <label class="govuk-label" for="address-line-1">
    Building and street <span class="govuk-visually-hidden">line 1 of 2</span>
  </label>
  <input class="govuk-input" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
</div>

Looking through the docs, I thought I could achieve this with the following:

<%= f.govuk_text_field :address_line1, autocomplete: 'address-line1', label: -> do %>
  Building and street <span class="govuk-visually-hidden">line 1 of 2</span>
<% end %>

However it appears that this replaces all the content of this helper, both the label and the text input, whereas the documentation suggests this should only replace the content of the label element. Am I misinterpreting the documentation, or is this a bug? /cc @tvararu

[tvararu]

Tested this locally, code:

Result (note the input and label are missing):

[peteryates]

This happens because the label is expecting a Proc instead of a block. We can't pass the label a block because govuk_text_field already accepts them for supplementary content and it would get extremely confusing (if it's actually possible in Ruby).

The proc is expecting Ruby rather than ERB, but you can render whatever you like via render or calling a helper:

/_name_label.slim

| Building and street

span.govuk-visually-hidden
  | line 1 of 2

/_form.slim

= form_for @person do |f|

  = f.govuk_text_field :name, label: ->{ render partial: 'name_label' }

Alternatively, using a helper:

module PeopleHelper
  def name_label
    safe_join(["Building and street", tag.span("line 1 of 2", class: 'govuk-visually-hidden')])
  end
end

Or just inline:

  = f.govuk_text_field :name,
    label: ->{ safe_join(["Building and street", tag.span("line 1 of 2", class: 'govuk-visually-hidden')]) }

Hope this helps.

In your example, passing foo in a block is indeed overwriting the entire element; it's a bug and was definitely unexpected. I'll raise a ticket. It should probably raise instead.

[paulrobertlloyd]

Thanks for info! Honestly, this is all gibberish to me (I make edits to our Ruby app purely by trail and error!), but the inline method works for me.

Might it be possible to add a similar example to the docs? We don’t use Slim templates, so the current examples are not helpful, and actually a little confusing.

[peteryates]

I'm going to close this and am continuing to explore adding ERB snippets in #118

Unfortunately, and this was news to me, Rails' ERB isn't standard and using Rails' implementation outside of Rails (the guide is generated using Nanoc) doesn't look like the most straightforward of tasks.

On the positive side, Slim only takes about five minutes to learn if you already know CSS selector syntax 😂