SaladUI.Select (SaladUI v1.0.0)

Implement of select components from https://ui.shadcn.com/docs/components/select

Examples:

<form>
   <.select default="banana" id="fruit-select">
      <.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>

  <.button type="submit">Submit</.button>
</form>

Component events

:on-value-changed - Maps the value-changed event. Fired when the selected value changes.
:on-open - Maps the open event. Fired when the select dropdown enters open state.
:on-close - Maps the close event. Fired when the select dropdown enters closed state.

Server commands

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

Changing the selected value from the server is done through the controlled value assign rather than SaladUI.LiveView.send_command/4.

Summary

Functions

select(assigns)

Ready to use select component with all required parts.

select_content(assigns)

select_group(assigns)

select_item(assigns)

select_label(assigns)

select_separator(assigns)

select_trigger(assigns)

select_value(assigns)

Functions

select(assigns)

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.

Attributes

id (:string) - Defaults to nil.
name (:any) - Defaults to nil.
value (:any) - The value of the select. Defaults to nil.
default-value (:any) - The default value of the select. Defaults to nil.
multiple (:boolean) - Allow multiple selection. Defaults to false.
use-portal (:boolean) - Whether to render the content in a portal. Defaults to false.
portal-container (:string) - CSS selector for the portal container. Defaults to nil.
on-value-changed (:any) - Handler for value changed event. Defaults to nil.
on-open (:any) - Handler for select open event. Defaults to nil.
on-close (:any) - Handler for select closed event. Defaults to nil.
field (Phoenix.HTML.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. Defaults to nil.
placeholder (:string) - The placeholder text when no value is selected. Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

select_content(assigns)

Attributes

class (:string) - Defaults to nil.
side (:string) - Defaults to "bottom". Must be one of "top", or "bottom".
Global attributes are accepted.

Slots

inner_block (required)

select_group(assigns)

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

select_item(assigns)

Attributes

value (:string) (required)
disabled (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

select_label(assigns)

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

select_separator(assigns)

select_trigger(assigns)

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

select_value(assigns)

Attributes

placeholder (:string) - Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.