Blocks

Select

A native <select> with a shadcn chevron. Uses the browser's dropdown — no JS, works with form submissions automatically.

Installation

bin/rails g shadcnrb:component select

Usage

Plan

<%= sui.layout.stack gap: 2, class: "max-w-xs" do %>
  <%= sui.label "Plan", for: "plan" %>
  <%= sui.select(id: "plan", name: "plan") do %>
    <option value="hobby">Hobby</option>
    <option value="pro" selected>Pro</option>
    <option value="team">Team</option>
  <% end %>
<% end %>

<%= sui.select(name: "small", size: :sm, class: "max-w-xs") do %>
  <option>Small size</option>
  <option>Second</option>
<% end %>