PhiaUi.Components.NativeSelect (phia_ui v0.1.17)

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"
/>

Summary

Functions

native_select(assigns)

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

Functions

native_select(assigns)

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.