Salad UI

Select

Ready to use select component with all required parts.

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
true
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-[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>