Multi Select
Multi Select
Multi Select with options as prop
State
@user_changeset = #Ecto.Changeset<
action: nil,
changes: %{permissions: [1, 2], role: 1},
errors: [],
data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
valid?: true
>
@latest_params = nil
Multi Select (prompt inside)
State
@user_changeset = #Ecto.Changeset<
action: nil,
changes: %{permissions: [1, 2], role: 1},
errors: [],
data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
valid?: true
>
@latest_params = nil
Multi Select (prompt inside with icon)
State
@user_changeset = #Ecto.Changeset<
action: nil,
changes: %{permissions: [1, 2], role: 1},
errors: [],
data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
valid?: true
>
@latest_params = nil
Small
Medium
Large
Xlarge
Disabled
State
@user_changeset = #Ecto.Changeset<
action: nil,
changes: %{permissions: [1, 2], role: 1},
errors: [],
data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
valid?: true
>
@latest_params = nil
With search (data + changeset form)
State
@user_changeset = #Ecto.Changeset<
action: nil,
changes: %{permissions: [1, 2], role: 1},
errors: [],
data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
valid?: true
>
@latest_params = nil
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| field | atom | Yes | - | Field for the underlying phoenix select component |
| size | - | No | - | TODO - size variant |
| options | list | Yes | - | Options for the select |
| prompt | string | No | - | Placeholder text |
| header | slot | No | - | TODO - header element on the options popup |
| footer | slot | No | - | TODO - footer element on the options popup |
| menu_width | number | No | - | TODO - Minimum width of the popup menu containing options |
| left | slot | No | - | TODO - Left content for selected option |
| hint | slot | No | - | TODO - Inform message under select, can be used for error message |
| items | slot | Yes | - | Content template for displaying each of the options |
| disabled | boolean | - | false | Whether the component is disabled |
| value | any | No | - | Default selected value |
| on_select | string | No | - | Name of the event handler function when an option is clicked |
| is_error | boolean | No | - | TODO - If the component is in error mode |