Shadwire
Componentes

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 a sua aplicação 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">Maçã</option>
  <option value="banana">Banana</option>
<% end %>

Exemplos

Padrão

Select nativo com chevron e foco estilizados.

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