Salad UI

Select

Ready to use select component with all required parts.

Component events

:on-value-changed - Fired when the selected value changes.
:on-open - Fired when the dropdown opens.
:on-close - Fired when the dropdown closes.

Server commands

"open" - Opens the select dropdown.
"close" - Closes the select dropdown.
"toggle" - Toggles the select dropdown.

A select component with default styling and behavior Open in playground

<.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 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 LiveView form with phx-change 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 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>

A multiple select that submits list params with a [] input name Open in playground

<.select
  id="select-single-multiple-select"
  name="skills"
  value={["elixir"]}
  multiple
  on-value-changed="value_changed"
>
    <.select_trigger class="w-[220px]">
      <.select_value placeholder="Select skills" />
    </.select_trigger>
    <.select_content>
      <.select_group>
        <.select_label>Skills</.select_label>
        <.select_item value="elixir">Elixir</.select_item>
        <.select_item value="phoenix">Phoenix</.select_item>
        <.select_item value="liveview">LiveView</.select_item>
      </.select_group>
    </.select_content>
</.select>