PhxShadcn

Native Select

Default native select (options attr) Open in playground 
<.native_select
  id="native-select-single-default"
  options={[{"Apple", "apple"}, {"Banana", "banana"}, {"Cherry", "cherry"}]}
  prompt="Select a fruit"
/>
Small size Open in playground 
<.native_select
  id="native-select-single-small"
  size="sm"
  options={[{"Apple", "apple"}, {"Banana", "banana"}]}
  prompt="Select a fruit"
/>
Disabled native select Open in playground 
<.native_select
  disabled
  id="native-select-single-disabled"
  options={[{"Apple", "apple"}]}
  prompt="Disabled"
/>
With option groups (inner_block) Open in playground 
<.native_select id="native-select-single-with-groups">
  <.native_select_option value="">Pick something</.native_select_option>
  <.native_select_optgroup label="Fruits">
    <.native_select_option value="apple">Apple</.native_select_option>
    <.native_select_option value="banana">Banana</.native_select_option>
  </.native_select_optgroup>
  <.native_select_optgroup label="Vegetables">
    <.native_select_option value="carrot">Carrot</.native_select_option>
    <.native_select_option value="spinach">Spinach</.native_select_option>
  </.native_select_optgroup>
</.native_select>