Native Select

A native <select>, styled to match the other controls.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add native-select --yes

The native-select registry item installs these files:

app/components/ui_component.rb
app/components/ui/native_select_component.rb
app/helpers/ui/native_select_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_native_select(name: "fruit") do %>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
<% end %>

Examples

Default

A native select with a styled chevron and focus ring.

<%= ui_native_select(name: "fruit", class: "w-60") do %>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
<% end %>

API reference

Every part accepts class / class_name and **attrs. None of its parts takes another argument.