# `PhiaUi.Components.NativeSelect`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/native_select.ex#L1)

Styled native `<select>` wrapper without `Phoenix.HTML.FormField` dependency.

Unlike `PhiaUi.Components.Select.phia_select/1`, which requires a
`Phoenix.HTML.FormField` struct (and thus a changeset), `native_select/1`
accepts plain attrs — `:name`, `:value`, `:options` — making it ideal for
standalone selects outside of Ecto forms: filters, settings, wizard steps,
and other non-changeset scenarios.

## Variants

| Variant        | Description                                                |
|----------------|------------------------------------------------------------|
| `"default"`    | Label above, bordered select below                        |
| `"inset"`      | Label inside the border at top-left, select below          |
| `"overlapping"`| Floating label (`absolute -top-2.5 left-3 bg-background`) |

## Sizes

| Size      | Height   |
|-----------|----------|
| `"sm"`    | `h-8`    |
| `"default"` | `h-10` |
| `"lg"`    | `h-12`   |

## Options format

Accepts any format supported by `Phoenix.HTML.Form.options_for_select/2`:

    <%!-- Tuple list --%>
    options={[{"Free", "free"}, {"Pro", "pro"}]}

    <%!-- Plain strings --%>
    options={["Small", "Medium", "Large"]}

    <%!-- Keyword list --%>
    options={[Free: "free", Pro: "pro"]}

## Grouped options (optgroups)

    grouped_options={[
      {"Fruits", [{"Apple", "apple"}, {"Banana", "banana"}]},
      {"Vegetables", [{"Carrot", "carrot"}, {"Spinach", "spinach"}]}
    ]}

## Basic example

    <.native_select
      name="country"
      options={[{"United States", "us"}, {"Canada", "ca"}]}
      label="Country"
      placeholder="Select a country..."
    />

## With overlapping label

    <.native_select
      name="role"
      options={[{"Admin", "admin"}, {"Member", "member"}]}
      label="Role"
      variant="overlapping"
    />

# `native_select`

Renders a styled native `<select>` element without requiring a FormField struct.

## Examples

    <.native_select
      name="size"
      options={["Small", "Medium", "Large"]}
      label="Size"
    />

    <.native_select
      name="category"
      grouped_options={[
        {"Fruits", [{"Apple", "apple"}, {"Banana", "banana"}]},
        {"Veggies", [{"Carrot", "carrot"}]}
      ]}
      label="Category"
      variant="inset"
    />

## Attributes

* `id` (`:string`) - Element id. Auto-generated when nil. Defaults to `nil`.
* `name` (`:string`) - Form field name. Defaults to `nil`.
* `value` (`:any`) - Currently selected value. Defaults to `nil`.
* `options` (`:list`) - List of options: `[{"Label", "val"}]`, `["val"]`, or `[label: "val"]`. Defaults to `[]`.
* `grouped_options` (`:list`) - Grouped options for `<optgroup>`: `[{"Group", [opts]}]`. Defaults to `nil`.
* `placeholder` (`:string`) - Disabled placeholder first option. Defaults to `nil`.
* `label` (`:string`) - Label text. Defaults to `nil`.
* `description` (`:string`) - Helper text below label. Defaults to `nil`.
* `error` (`:any`) - Error message string. Defaults to `nil`.
* `required` (`:boolean`) - Marks the field as required. Defaults to `false`.
* `disabled` (`:boolean`) - Disables the select. Defaults to `false`.
* `size` (`:atom`) - Size variant. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `variant` (`:atom`) - Layout variant. Defaults to `:default`. Must be one of `:default`, `:inset`, or `:overlapping`.
* `class` (`:string`) - Additional classes on the `<select>`. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `icon` - Optional icon rendered inside the select border on the left.

---

*Consult [api-reference.md](api-reference.md) for complete listing*