Native select

UI::NativeSelect

The browser's own select, styled closed; best for phones' system pickers.

bin/rails generate velvetkit:add native_select

Also adds: Label Form field Icon
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Sizes

default

sizes.html.erb

<div class="flex max-w-sm flex-col gap-4">
  <% %i[sm default lg].each do |size| %>
    <%= render(UI::NativeSelect.new(name: "s_#{size}", options: UI::NativeSelectPreview::SECTIONS,
                              prompt: "Choose a section", size: size, label: size.to_s)) %>
  <% end %>
</div>

States

Default

Required *

Error

Disabled

states.html.erb

<div class="flex max-w-sm flex-col gap-4">
  <%= render(UI::NativeSelect.new(name: "a", options: UI::NativeSelectPreview::SECTIONS, label: "Default")) %>
  <%= render(UI::NativeSelect.new(name: "b", options: UI::NativeSelectPreview::SECTIONS, label: "Required", required: true)) %>
  <%= render(UI::NativeSelect.new(name: "c", options: UI::NativeSelectPreview::SECTIONS, label: "Error", error: true)) %>
  <%= render(UI::NativeSelect.new(name: "d", options: UI::NativeSelectPreview::SECTIONS, label: "Disabled", disabled: true)) %>
</div>

API

Arguments

UI::NativeSelect.new(name: nil, options: [], selected: nil, prompt: nil, label: nil, hint: nil, size: :default, required: false, error: nil, disabled: false, form: nil, field: nil, class: nil, **html_attrs)

Notes

UI::NativeSelect — the browser's own <select>, styled closed. UI::Select is the styled dropdown. Reach for this one when the platform control is the better fit: on a phone it opens the system picker, which is easier to use with a thumb than any custom list, and it needs no JavaScript. The open list is drawn by the operating system, so it can't be themed. Usage: <%= render(UI::NativeSelect.new(form: f, field: :team_id, label: "Team", options: @teams.map { [_1.name, _1.id] }, prompt: "Choose a team")) %>