Multi Select

Multi Select

Read
Write
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
Permission
Read
Write
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
Permission
Read
Write
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

Read
Write
Permission
Read
Write

Medium

Read
Write
Permission
Read
Write

Large

Read
Write
Permission
Read
Write

Xlarge

Read
Write
Permission
Read
Write

Disabled

Read
Write
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
Permission
Read
Write
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