PhxShadcn

Select

Basic select Open in playground 
<.select id="select-single-default">
  <.select_trigger>
    <.select_value placeholder="Pick a fruit" />
  </.select_trigger>
  <.select_content>
    <.select_item value="apple">Apple</.select_item>
    <.select_item value="banana">Banana</.select_item>
    <.select_item value="cherry">Cherry</.select_item>
    <.select_item value="grape">Grape</.select_item>
    <.select_item value="pineapple">Pineapple</.select_item>
  </.select_content>
</.select>
Grouped options with labels and separators Open in playground 
<.select id="select-single-with-groups">
  <.select_trigger class="w-[200px]">
    <.select_value placeholder="Select a food" />
  </.select_trigger>
  <.select_content>
    <.select_group>
      <.select_label>Fruits</.select_label>
      <.select_item value="apple">Apple</.select_item>
      <.select_item value="banana">Banana</.select_item>
    </.select_group>
    <.select_separator />
    <.select_group>
      <.select_label>Vegetables</.select_label>
      <.select_item value="carrot">Carrot</.select_item>
      <.select_item value="broccoli">Broccoli</.select_item>
    </.select_group>
  </.select_content>
</.select>
Long list showing overflow scroll Open in playground 
<.select id="select-single-scrollable">
  <.select_trigger class="w-[240px]">
    <.select_value placeholder="Select timezone" />
  </.select_trigger>
  <.select_content>
    <.select_item value="est">Eastern (EST)</.select_item>
    <.select_item value="cst">Central (CST)</.select_item>
    <.select_item value="mst">Mountain (MST)</.select_item>
    <.select_item value="pst">Pacific (PST)</.select_item>
    <.select_item value="gmt">Greenwich (GMT)</.select_item>
    <.select_item value="cet">Central Europe (CET)</.select_item>
    <.select_item value="eet">Eastern Europe (EET)</.select_item>
    <.select_item value="ist">India (IST)</.select_item>
    <.select_item value="jst">Japan (JST)</.select_item>
    <.select_item value="aest">Australia East (AEST)</.select_item>
    <.select_item value="nzst">New Zealand (NZST)</.select_item>
  </.select_content>
</.select>
Mix of enabled and disabled items Open in playground 
<.select id="select-single-disabled">
  <.select_trigger class="w-[200px]">
    <.select_value placeholder="Select a fruit" />
  </.select_trigger>
  <.select_content>
    <.select_item value="apple">Apple</.select_item>
    <.select_item value="banana" disabled>Banana (sold out)</.select_item>
    <.select_item value="cherry">Cherry</.select_item>
    <.select_item value="grape" disabled>Grape (sold out)</.select_item>
  </.select_content>
</.select>
Small trigger size Open in playground 
<.select id="select-single-small">
  <.select_trigger size="sm">
    <.select_value placeholder="Small" />
  </.select_trigger>
  <.select_content>
    <.select_item value="a">Option A</.select_item>
    <.select_item value="b">Option B</.select_item>
    <.select_item value="c">Option C</.select_item>
  </.select_content>
</.select>