Skip to main content
  1. Home
  2. Using components

Using components

You can use view components in Rails templates by:

  • passing a ViewComponent object to Rails’ render method directly
  • using the packaged helpers that build and render the ViewComponent

The result and functionality of the components is the same regardless of approach.

Capturing content

This library uses Rails’ default capture functionalty. It’s intended to work with strings but renders nothing when other kinds of objects are provided. For example, if we capture a floating point number and a string in a tag#span block, only the string is rendered.

= tag.span { 1.0 }
= tag.span { "2.0" }
<span></span>
<span>2.0</span>

Using component objects directly

Rails supports the rendering of ViewComponent objects natively. You can pass them straight to render in your template.

= render(GovukComponent::InsetTextComponent.new(text: "Important message"))

Using the provided helper methods

The helper methods make rendering components easier and they provide a more consistent experience when using with the link helpers and GOV.UK Form Builder.

= govuk_inset_text(text: "Important message")
Component to helper mappings
Component class name Helper method
GovukComponent::Accordion govuk_accordion
GovukComponent::BackLink govuk_back_link
GovukComponent::Breadcrumbs govuk_breadcrumbs
GovukComponent::CookieBanner govuk_cookie_banner
GovukComponent::Details govuk_details
GovukComponent::Footer govuk_footer
GovukComponent::Header govuk_header
GovukComponent::InsetText govuk_inset_text
GovukComponent::NotificationBanner govuk_notification_banner
GovukComponent::Panel govuk_panel
GovukComponent::PhaseBanner govuk_phase_banner
GovukComponent::StartButton govuk_start_button
GovukComponent::SummaryList govuk_summary_list
GovukComponent::Table govuk_table
GovukComponent::Tabs govuk_tabs
GovukComponent::Tag govuk_tag
GovukComponent::WarningText govuk_warning_text