Conditionally Add CSS Classes to Your Views and Components

With the release of Rails 6.1, the class_names view helper was introduced. It is one of those helpers I use a lot.

Before you had to write some hard to read code:

<div class="<⁠%= item.for_sale? ? 'active' : '' %>">

But with the class_names helper, you can do:

<div class="<⁠%= class_names(active: item.for_sale?) %>">

Both output the following HTML (assuming item.for_sale? returns true):

<div class="active">

More advanced is the following:

class_names("item", { active: item.for_sale?, "out-of-stock": item.out_of_stock? })

Here item is applied in all cases. And active / out-of-stock only when the respective conditionals are met.

The class_names helper is also supported in tag-helpers. So this works just the same:

<%= tag.div class: class_names(active: item.for_sale?) %>

Or even shorter, like this:

<%= tag.div class: [active: item.for_sale?] %>

It’s one of those little, unknown features in Rails that helps you write better views and components. No wonder it is used in almost all Rails Designer’s components. 😅

Get UI & Product Engineering Insights for Rails Apps (and product updates!)

Published at . Last updated at . Have suggestions or improvements on this content? Do reach out.

UI components for Ruby on Rails apps

$ 129 one-time
payment

Get Access
  • One-time Payment

  • Access to the Entire Library

  • Built using ViewComponent

  • Designed with Tailwind CSS

  • Enhanced with Hotwire