Native Select

Um <select> nativo estilizado para combinar com os demais controles.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add native-select --yes

O item native-select do registry instala estes arquivos:

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

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

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

Exemplos

Padrão

Um select nativo com a seta e o foco estilizados.

<%= 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 %>

Referência da API

Toda parte aceita class / class_name e **attrs. Nenhuma das partes recebe outro argumento.