RapidRailsUI

Select

Native HTML select element with Tailwind CSS styling. Lightweight form input for simple value selection.

Key Features

  • Native HTML - Uses <select> and <option> elements
  • No JavaScript - Zero JS overhead, pure HTML/CSS
  • 2 Variants - Default (bordered) and Underline
  • 5 Sizes - xs, sm, base, lg, xl
  • All Colors - Focus ring colors for all semantic colors
  • 3 Shapes - Square, Rounded, Pill
  • Optgroups - Grouped options support
  • Multiple Selection - Multi-select with visible rows
  • Form Builder - Full Rails form integration (f.rui_select)
  • Rails-Compatible API - Drop-in replacement for f.select and collection_select positional syntax
  • Mobile Optimized - Native picker on touch devices
  • Full Accessibility - Built-in browser accessibility

Select vs Dropdown

RapidRailsUI provides two components for selection - each designed for different use cases.

Aspect Select Dropdown
Purpose Form input - collect values Navigation, actions, menus
HTML Base <select> + <option> <div> + <ul>
JavaScript None required Stimulus controller
Content Text-only options Icons, avatars, checkboxes, submenus
Mobile Native OS picker Custom menu
Accessibility Built-in (native) Manual ARIA
Form Submission Native Hidden input

Use Select When

  • Collecting form input values
  • Simple option lists (status, category, country)
  • Mobile-first applications
  • Performance matters (zero JS)
  • Native browser accessibility needed
  • Multiple selection with keyboard

Use Dropdown When

  • Navigation menus
  • Action lists (edit, delete, share)
  • Options need icons or descriptions
  • User account menus with avatars
  • Nested submenus required
  • Checkbox/radio selection in menu

Basic Usage

The simplest way to use Select with an array of strings.

Basic Select 
<%= rui_select(:status, collection: ["Draft", "Published", "Archived"], label: "Status") %>

<%= rui_select(:priority, collection: ["Low", "Medium", "High"], label: "Priority", color: :primary) %>

Variants

Two visual variants: :default (bordered) and :underline (bottom border only).

Variants 
<%= rui_select(:field, collection: options, variant: :default, label: "Default") %>
<%= rui_select(:field, collection: options, variant: :underline, label: "Underline") %>

Sizes

Five sizes matching other form components: :xs, :sm, :base, :lg, :xl.

Sizes 
<%= rui_select(:field, collection: options, size: :xs) %>
<%= rui_select(:field, collection: options, size: :sm) %>
<%= rui_select(:field, collection: options, size: :base) %>  <!-- Default -->
<%= rui_select(:field, collection: options, size: :lg) %>
<%= rui_select(:field, collection: options, size: :xl) %>

Colors

Color affects the focus ring styling. Select supports all semantic colors and any Tailwind color.

Semantic Colors

Tailwind Colors

All Tailwind colors are supported with automatic dark mode variants.

Colors 
<!-- Semantic colors -->
<%= rui_select(:field, collection: options, color: :zinc) %>      <!-- Default -->
<%= rui_select(:field, collection: options, color: :primary) %>
<%= rui_select(:field, collection: options, color: :success) %>
<%= rui_select(:field, collection: options, color: :warning) %>
<%= rui_select(:field, collection: options, color: :danger) %>
<%= rui_select(:field, collection: options, color: :info) %>

<!-- Tailwind colors (all supported!) -->
<%= rui_select(:field, collection: options, color: :red) %>
<%= rui_select(:field, collection: options, color: :blue) %>
<%= rui_select(:field, collection: options, color: :purple) %>
<%= rui_select(:field, collection: options, color: :pink) %>
<%= rui_select(:field, collection: options, color: :amber) %>

Shapes

Three border radius options: :square, :rounded (default), :pill.

Shapes 
<%= rui_select(:field, collection: options, shape: :square) %>
<%= rui_select(:field, collection: options, shape: :rounded) %>  <!-- Default -->
<%= rui_select(:field, collection: options, shape: :pill) %>

Collections

Select supports multiple collection formats: arrays of strings, arrays of pairs, hashes, and ActiveRecord relations.

Collection Formats 
<!-- Array of strings (value = text) -->
<%= rui_select(:status, collection: ["Draft", "Published", "Archived"]) %>

<!-- Array of [text, value] pairs -->
<%= rui_select(:country, collection: [
  ["United States", "US"],
  ["Canada", "CA"],
  ["United Kingdom", "UK"]
]) %>

<!-- Hash { text => value } -->
<%= rui_select(:priority, collection: {
  "Low Priority" => "low",
  "Medium Priority" => "medium",
  "High Priority" => "high"
}) %>

<!-- ActiveRecord relation -->
<%= rui_select(:category_id,
  collection: Category.all,
  value_method: :id,
  text_method: :name
) %>

Option Groups

Use nested hash structure for <optgroup> elements.

Option Groups 
<%= rui_select(:language,
  collection: {
    "Popular" => [["English", "en"], ["Spanish", "es"], ["French", "fr"]],
    "Asian" => [["Japanese", "ja"], ["Chinese", "zh"], ["Korean", "ko"]],
    "Other" => [["German", "de"], ["Italian", "it"]]
  },
  label: "Language",
  prompt: "Select language..."
) %>

Multiple Selection

Enable multi-select with multiple: true. Use rows: to control visible options.

Hold Ctrl/Cmd to select multiple

Multiple Selection 
<%= rui_select(:tags,
  collection: ["Ruby", "Rails", "JavaScript", "Python"],
  label: "Tags",
  multiple: true,
  help_text: "Hold Ctrl/Cmd to select multiple"
) %>

<%= rui_select(:skills,
  collection: ["HTML", "CSS", "JavaScript", "React", "Vue"],
  label: "Skills (5 rows visible)",
  multiple: true,
  rows: 5
) %>

Prompts & Blanks

Add placeholder options with prompt: or include_blank:.

Prompts & Blanks 
<!-- Custom prompt text -->
<%= rui_select(:field, collection: options, prompt: "Please select...") %>

<!-- Empty blank option -->
<%= rui_select(:field, collection: options, include_blank: true) %>

<!-- Custom blank text -->
<%= rui_select(:field, collection: options, include_blank: "-- None --") %>

Rails-Compatible API

rui_select accepts the standard Rails f.select and collection_select positional argument patterns in addition to the keyword API. Use the same syntax you already know from Rails.

Three Calling Conventions

rui_select supports three ways to pass options. All three produce identical output.

Style Syntax Rails Equivalent
Keyword API f.rui_select(:status, collection: [...]) Original RUI syntax
f.select style f.rui_select(:status, [...]) f.select(:status, [...])
collection_select style f.rui_select(:cat_id, Cat.all, :id, :name) f.collection_select(:cat_id, Cat.all, :id, :name)

f.select Style (Positional Choices)

Pass an array of choices as the second positional argument, just like Rails f.select.

f.select Style 
<!-- Simple array of choices -->
<%= f.rui_select(:status, ["Draft", "Published"]) %>

<!-- Array of [text, value] pairs -->
<%= f.rui_select(:country, [["United States", "US"], ["Canada", "CA"]]) %>

<!-- With Rails options hash (third arg) -->
<%= f.rui_select(:status, ["Draft", "Published"], { include_blank: true }) %>

<!-- With Rails options hash + HTML options hash (third and fourth args) -->
<%= f.rui_select(:status, ["Draft", "Published"], { include_blank: true }, { class: "custom" }) %>

<!-- Trailing keyword args also work -->
<%= f.rui_select(:status, ["Draft", "Published"], include_blank: true) %>

collection_select Style (Positional Value/Text Methods)

Pass a collection, value method, and text method as positional arguments — mirrors Rails collection_select.

collection_select Style 
<!-- ActiveRecord collection with value and text methods -->
<%= f.rui_select(:category_id, Category.all, :id, :name) %>

<!-- With prompt -->
<%= f.rui_select(:category_id, Category.all, :id, :name, prompt: "Choose category...") %>

<!-- With options hash -->
<%= f.rui_select(:category_id, Category.all, :id, :name, { include_blank: true }) %>

Standalone Helper with Positional Args

The standalone rui_select helper (outside a form builder) also supports positional args.

Standalone Positional 
<%= rui_select(:status, ["Draft", "Published"], label: "Status") %>

<%= rui_select(:category_id, Category.all, :id, :name, label: "Category") %>

Migrating from Rails Select Helpers

Drop-in replacements for standard Rails select helpers:

Migration Examples 
<!-- BEFORE: Rails f.select -->
<%= f.select(:status, ["Draft", "Published"], { include_blank: true }) %>

<!-- AFTER: RUI drop-in replacement -->
<%= f.rui_select(:status, ["Draft", "Published"], { include_blank: true }) %>


<!-- BEFORE: Rails collection_select -->
<%= f.collection_select(:category_id, Category.all, :id, :name, prompt: "Choose") %>

<!-- AFTER: RUI drop-in replacement -->
<%= f.rui_select(:category_id, Category.all, :id, :name, prompt: "Choose") %>


<!-- You can also mix positional args with RUI-specific keywords -->
<%= f.rui_select(:status, ["Draft", "Published"],
  include_blank: true,
  label: "Status",
  color: :primary,
  size: :lg
) %>

Priority rule: When both positional choices and the collection: keyword are provided, the collection: keyword always wins. Explicit keyword arguments always take priority over positional hash arguments too.

Backward compatible: The original keyword API (collection:, value_method:, text_method:) is fully preserved. Existing code requires zero changes.

Form Builder Integration

Use f.rui_select within Rails forms. Values are automatically bound to the model.

Form Builder (keyword API) 
<%= form_with(model: @post) do |f| %>
  <%= f.rui_select(:status,
    collection: Post::STATUSES,
    label: "Status",
    required: true
  ) %>

  <%= f.rui_select(:category_id,
    collection: Category.all,
    value_method: :id,
    text_method: :name,
    label: "Category",
    prompt: "Select category..."
  ) %>

  <%= f.rui_select(:tag_ids,
    collection: Tag.all,
    value_method: :id,
    text_method: :name,
    label: "Tags",
    multiple: true,
    rows: 4,
    help_text: "Select one or more tags"
  ) %>

  <%= f.rui_button("Save Post") %>
<% end %>

The form builder version:

  • Auto-generates correct name and id attributes
  • Pre-selects the current model value
  • Displays validation errors automatically
  • Handles multiple selection array naming (tag_ids[])

States

Disabled, required, and error states.

This field is required

States 
<!-- Disabled -->
<%= rui_select(:field, collection: options, disabled: true) %>

<!-- Required (shows asterisk in label) -->
<%= rui_select(:field, collection: options, required: true, label: "Required Field") %>

<!-- Errors are shown automatically in form builder when model has validation errors -->
<%= f.rui_select(:category_id, collection: categories, label: "Category") %>
<!-- Shows red border and error message if @post.errors[:category_id] present -->

Accessibility

Select uses native HTML elements, providing built-in accessibility features.

ARIA Attributes

  • aria-invalid="true" automatically set when validation errors exist
  • aria-describedby links to error message and hint text
  • aria-required="true" for required fields

Keyboard Navigation

  • Tab to focus, Space/Enter to open dropdown
  • Arrow Up/Down to navigate options
  • Type characters to jump to matching options
  • Visible focus ring with customizable color

Semantic HTML

  • Native <select> element with full browser support
  • Automatic for/id label association
  • Native OS picker on mobile devices for optimal UX
  • No custom JavaScript required for core functionality

Screen Reader Support

  • Full native support - no additional ARIA needed
  • Label text announced when focusing the select
  • Error messages announced via aria-describedby

API Reference

rui_select

Native HTML select dropdown with enhanced styling. Supports three calling conventions: keyword API, Rails f.select positional API, and Rails collection_select positional API.

Parameter Type Default Description
method* Symbol/String — Attribute name (form builder) or input name (standalone)
collection Enumerable [] Keyword API: collection of options (Array, Hash, ActiveRecord::Relation)
*args Array — Positional API: choices array/collection, optional :value_method, :text_method, options hash, HTML options hash

Appearance

Visual styling options

Parameter Type Default Description
variant Symbol :default Visual style
:default :underline
color Symbol :zinc Focus ring color - semantic or any Tailwind color
size Symbol :base Select size
:xs :sm :base :lg :xl
shape Symbol :rounded Border radius
:square :rounded :pill

Prompt Options

Placeholder and default option settings

Parameter Type Default Description
prompt String — Prompt text shown as first empty option
include_blank Boolean/String false Include blank option (true for empty, string for custom text)
selected Any — Pre-selected value(s) - overrides object value when set

Labels & Text

Text options

Parameter Type Default Description
label String — Label text displayed above select
help_text String — Help text displayed below select

Collection Configuration

Options for processing collection items (keyword API or auto-detected from positional args)

Parameter Type Default Description
value_method Symbol :id Method to get value from collection items
text_method Symbol :name Method to get display text from collection items

States

State options

Parameter Type Default Description
required Boolean false Show required indicator (*)
disabled Boolean false Disable the select
multiple Boolean false Allow multiple selections
rows Integer — Visible rows for multiple select (HTML size attribute)

Form Builder

Options when used with Rails form builder (f.rui_select)

Parameter Type Default Description
form FormBuilder — Rails form builder instance (auto-set by f.rui_select)
object Object/Symbol — Object to bind select to

Related Components

Combobox

Searchable dropdown with icons and multi-select

Dropdown

Custom dropdown menus for actions

Radio Button

Single selection with visible options