# VelvetKit

## Native select (`UI::NativeSelect`)

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

Add it: `bin/rails generate velvetkit:add native_select`

Also adds: `label`, `form_field`, `icon`

### Arguments

```ruby
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")) %>

### Example: Sizes

```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>
```

### Example: States

```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>
```