Dropdown

Dropdowns is a custom select component that allows users to make single or multiple selections.

An option that's been selected can represent a corresponding value in forms or be used to filter/sort content.containers as Popovers, Sidebars, Drawers, Dialogs etc.

Options

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With icons

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
  • Read
  • Write
  • Update
  • Delete
  • Nuclear war
State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With radio button

  • User
  • Editor
  • Admin
State
@radio_form_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
@latest_params = nil

With checkbox

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With Tabs

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>