Salad UI
- 1.3.0

Select

Ready to use select component with all required parts.

Read more Read less

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.
Attribute Type Documentation Default Value
id :string
name :any
value :any

The value of the select
default-value :any

The default value of the select
multiple :boolean

Allow multiple selection
false
use-portal :boolean

Whether to render the content in a portal
false
portal-container :string

CSS selector for the portal container
on-value-changed :any

Handler for value changed event
on-open :any

Handler for select open event
on-close :any

Handler for select closed event
field %FormField{}

a form field struct retrieved from the form, for example: @form[:email]
label :string

The display label of the select value. If not provided, the value will be used.
placeholder :string

The placeholder text when no value is selected.
class :string
rest :global
Required inner_block * :slot 
<.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>