shadcn-rails

Native Select

A styled native HTML select element with optgroup support.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component native_select

Usage

<%= render Shadcn::NativeSelectComponent.new(name: "country") do |select| %>
  <% select.with_option(value: "", disabled: true, selected: true) { "Select a country" } %>
  <% select.with_option(value: "us") { "United States" } %>
  <% select.with_option(value: "uk") { "United Kingdom" } %>
<% end %>

Examples

With Optgroups

<%= render Shadcn::NativeSelectComponent.new(name: "car") do |select| %>
  <% select.with_optgroup(label: "Swedish Cars") do |group| %>
    <% group.with_option(value: "volvo") { "Volvo" } %>
    <% group.with_option(value: "saab") { "Saab" } %>
  <% end %>
  <% select.with_optgroup(label: "German Cars") do |group| %>
    <% group.with_option(value: "mercedes") { "Mercedes" } %>
    <% group.with_option(value: "audi") { "Audi" } %>
  <% end %>
<% end %>

Disabled

<%= render Shadcn::NativeSelectComponent.new(name: "status", disabled: true) do |select| %>
  <% select.with_option(value: "active", selected: true) { "Active" } %>
  <% select.with_option(value: "inactive") { "Inactive" } %>
<% end %>

Required

In Form Field

Select the country where you reside.

API Reference

API Reference

Prop Type Default Description
name String nil Select name attribute for form submission
id String nil Select ID attribute
disabled Boolean false Whether the select is disabled
required Boolean false Whether the select is required
class_name String nil Additional CSS classes to apply

Slots

  • with_option - Option element (value:, disabled:, selected:)
  • with_optgroup - Option group (label:, disabled:) with nested options

Accessibility

  • Uses native <select> element for full accessibility support
  • Screen readers announce all options and their states correctly
  • Keyboard navigation works natively (arrow keys, type to search)
  • Consider using a placeholder option with disabled for initial state

Native vs Custom Select

Use Native Select when:

  • You need maximum accessibility and mobile support
  • You don't need custom styling for the dropdown
  • You want zero JavaScript overhead

Use the custom Select component when:

  • You need full control over dropdown styling
  • You want features like search/filtering
  • You need custom option rendering