Choices - Rails UI Components

Usage

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

Props

Prop	Type	Default	Description
`size`	`Symbol` `:sm` \| `:md` \| `:lg`	`:md`	Size of the select field.
`multiple`	`Boolean`	`false`	Enable multiple selection.
`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.
`data-search`	`String`	`nil`	URL for async search functionality.
`data-search_enabled`	`Boolean`	`false`	Enable local search within options.
`data-max_item_count`	`Integer`	`nil`	Maximum number of items that can be selected (multiple mode).

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

Examples

Basic Choices

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

Choices sizes

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

Multiple Selection

<%= form_with url: root_path do |f| %>
  <%= f.choices :languages, ["English", "Spanish", "French", "German", "Italian"], { hint: "Choose languages you speak" }, { multiple: true } %>
  <%= f.choices :skills, ["JavaScript", "Ruby", "Python", "Go", "Rust"], {}, { multiple: true, data: { max_item_count: 2 }, hint: "Max 2 items" } %>
<% end %>

Async Search

<%= form_with url: root_path do |f| %>
  <%= f.choices :country, [], { include_blank: "Select country..." }, { data: { search: countries_path(format: :json) } } %>
<% end %>

With Search Field

<%= form_with url: root_path do |f| %>
  <%= f.choices :gender, ["Male", "Female", "Other"], {}, { data: { search_enabled: true } } %>
<% end %>

Label customization

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

Hint message

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

Disabled State

<%= form_with url: root_path do |f| %>
  <%= f.choices :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.choices :state, options_for_select([["California", "CA"], ["New York", "NY"], ["Texas", "TX"]]), { include_blank: "Select state..." } %>
  <%= f.choices :state, options_for_select([["California", "CA"], ["New York", "NY"], ["Texas", "TX"]]), { include_blank: "Select state..." }, { error: "This field has a custom error" } %>
<% end %>