Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example and tests for generating label separately from text input #477

Closed
frankieroberto opened this issue Feb 21, 2024 · 2 comments
Closed
Assignees

Comments

@frankieroberto
Copy link
Collaborator

frankieroberto commented Feb 21, 2024

We’ve seen a rare use-case where the label might need to be generated separately from the text input: where the text input is in a table cell, and the label is in a different table cell.

I think this can be done like this:

<tr>
  <th><label class="govuk-label" for="price">Price</label></th>
  <td><%= f.govuk_text_field :price, label: nil %></td>
</tr>

However setting label to nil isn’t documented.

It may also make sense to expose govuk_label as a separate helper?

<tr>
  <th><%= f.govuk_label :price, "Price" %></th>
  <td><%= f.govuk_text_field :price, label: nil %></td>
</tr>

However we’d have to be clear that this isn’t the default or easiest way of associating labels with fields.

@peteryates
Copy link
Member

Yeah I agree about the label helper, it should be quite easy to separate it out as it can just wrap form.label.

@frankieroberto
Copy link
Collaborator Author

I've split out having a separate label helper into #480 – so that this issue is purely about documenting label: nil.

peteryates added a commit that referenced this issue Jul 21, 2024
This is quite an advanced use which will stretch the Design System to
the limit. HTML has long-supported placing labels far from the
corresponding input, even outside the form altogether. The risk here is
that error messages now will be placed by the input, which has a strong
likelihood of breaking layouts.

Still, I'm sure some people will find a use for this.

Fixes #477
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

3 participants