Button Data List Detail Disclosure Field Set Icon Label Link Link Select Menu Modal Panel Select Tabs Tag Text Field Text Field With Prefix

Select

A styled native dropdown for choosing a single option from a list.

PropTypeDefaultNotes
name String nil HTML name attribute.
value String nil Currently-selected option value (matched as a string).
options Array [] Either `[[label, value], …]` pairs or `[{label:, value:}, …]` hashes.
placeholder String nil Optional — rendered as a disabled hidden first option and pre-selected when `value` is blank.
disabled Boolean false Disables the control.
**html_options Hash — Extra attributes for the <select> (id, class, data-*, …).

Default

1
<%= render SelectComponent.new(

2
      name: "country",

3
      placeholder: "Select a country",

4
      options: [["United Kingdom", "uk"], ["United States", "us"], ["Germany", "de"], ["France", "fr"]]

5
    ) %>

Disabled

1
<%= render SelectComponent.new(

2
      name: "country",

3
      placeholder: "Disabled",

4
      options: [["United Kingdom", "uk"], ["United States", "us"]],

5
      disabled: true

6
    ) %>

In field set

Used for billing and shipping.

1
<%= render FieldSetComponent.new do |f| %>

2
  <% f.with_label(text: "Country", for: "country") %>

3
  <% f.with_field do %>

4
    <%= render SelectComponent.new(name: "country", id: "country", placeholder: "Choose…",

5
          options: [["United Kingdom", "uk"], ["United States", "us"]]) %>

6
  <% end %>

7
  <% f.with_helptext { "Used for billing and shipping." } %>

8
<% end %>

With value

1
<%= render SelectComponent.new(

2
      name: "country",

3
      value: "us",

4
      options: [["United Kingdom", "uk"], ["United States", "us"], ["Germany", "de"], ["France", "fr"]]

5
    ) %>