Salad UI

Select

Ready to use select component with all required parts.

A select component with default styling and behavior Open in playground 
<.select
  :let={select}
  id="select-single-default-select"
  name="fruit"
  on-value-changed="value_changed"
>
    <.select_trigger class="w-[180px]">
      <.select_value placeholder="Select a fruit" />
    </.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_item value="blueberry">Blueberry</.select_item>
        <.select_separator />
        <.select_item disabled value="grapes">Grapes</.select_item>
        <.select_item value="pineapple">Pineapple</.select_item>
      </.select_group>
    </.select_content>
</.select>
A select component with a pre-selected default value Open in playground 
<.select :let={select} id="select-single-with-default-value" name="fruit" value="banana">
    <.select_trigger class="w-[180px]">
      <.select_value />
    </.select_trigger>
    <.select_content>
      <.select_item value="apple">Apple</.select_item>
      <.select_item value="banana">Banana</.select_item>
      <.select_item value="orange">Orange</.select_item>
    </.select_content>
</.select>
A select component used within a form Open in playground 
<form phx-change="validate" phx-submit="save" class="space-y-4">
  <div>
    <label for="form-select" class="block text-sm font-medium text-gray-700 mb-1">
      Select a fruit
    </label>
    <.select :let={select} id="select-single-in-form" name="fruit">
        <.select_trigger class="min-w-64 w-full">
          <.select_value placeholder="Choose an option" />
        </.select_trigger>
        <.select_content>
          <.select_group>
            <.select_item value="apple">Apple</.select_item>
            <.select_item value="banana">Banana</.select_item>
            <.select_item value="blueberry">Blueberry</.select_item>
          </.select_group>
        </.select_content>
    </.select>
  </div>
  <.button type="submit">Submit</.button>
</form>