Select - Rails UI Components

Usage

<%= form_with url: root_path do |f| %>
  <%= f.select :state, options_for_select([["California", "CA"], ["New York", "NY"]]), { include_blank: "Select..." } %>
<% end %>

Props

Prop	Type	Default	Description
`size`	`Symbol` `:sm` \| `:md` \| `:lg`	`:md`	Size of the select field.
`label`	`String \| false`	`humanized attribute name`	Custom label text. Set to `false` to hide the label.
`hint`	`String`	`nil`	Helper text displayed below the field.
`error`	`String`	`nil`	Manual error message. ActiveRecord errors are displayed automatically.
`disabled`	`Boolean`	`false`	Disable the field.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Basic Select

<%= form_with url: root_path do |f| %>
  <%= f.select :state, options_for_select([["California", "CA"], ["New York", "NY"], ["Texas", "TX"]]), { include_blank: "Select state..." } %>
<% end %>

Select sizes

<%= form_with url: root_path do |f| %>
  <%= f.select :large_field, ["Yes", "No"], { }, { size: :lg } %>
  <%= f.select :default_field, ["Yes", "No"], { } %>
  <%= f.select :small_field, ["Yes", "No"], { }, { size: :sm } %>
<% end %>

Label customization

<%= form_with url: root_path do |f| %>
  <%= f.select :custom_label, ["Option 1", "Option 2"], { include_blank: "Select option..." }, { label: "Custom Label Text" } %>
  <%= f.select :no_label, ["Yes", "No"], {}, { label: false } %>
<% end %>

Hint message

<%= form_with url: root_path do |f| %>
  <%= f.select :with_hint, ["Yes", "No"], {}, { hint: "Select an option" } %>
<% end %>

Disabled State

<%= form_with url: root_path do |f| %>
  <%= f.select :disabled_field, ["Option 1", "Option 2"], { selected: "Option 1" }, { disabled: true } %>
<% end %>

Validation

<% user = User.new %>
<% user.errors.add(:state, "is required") %>
<%= form_with model: user, url: root_path do |f| %>
  <%= f.select :state, options_for_select([["California", "CA"], ["New York", "NY"], ["Texas", "TX"]]), { include_blank: "Select state..." } %>
  <%= f.select :state, options_for_select([["California", "CA"], ["New York", "NY"], ["Texas", "TX"]]), { include_blank: "Select state..." }, { error: "This field has a custom error" } %>
<% end %>