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)
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.

Status

Priority

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).

Default

Underline

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.

Array of Strings

Array of Pairs

Hash

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.

Language

Timezone

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.

Tags (default height)

Hold Ctrl/Cmd to select multiple

Skills (5 rows visible)

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:.

With Prompt

Include Blank

Custom Blank Text

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 --") %>

Form Builder Integration

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

Form Builder

<%= 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.

Disabled

Required *

With Error

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

Parameter	Type	Default	Description
name_or_method*	Symbol/String	—	Positional first arg - name for standalone, method for form builder
collection*	Enumerable	—	Collection of options (Array, ActiveRecord, Hash, enum)

Appearance

Visual styling options

Parameter	Type	Default	Description
variant	Symbol	`:default`	Visual style `:default` `:filled` `:outline`
color	Symbol	`:default`	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/Boolean	—	Prompt text (true for 'Select...', string for custom)
include_blank	Boolean/String	`false`	Include blank option
selected	Any	—	Pre-selected value (overrides object value)

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

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

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