Single Select

Default

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

@latest_params = nil

Sizes

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

@latest_params = nil

Left Icon

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

@latest_params = nil

Right icon

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

@latest_params = nil

Both icons

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

@latest_params = nil

Disabled

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

@latest_params = nil

Hint text

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

@latest_params = nil

Error

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

@latest_params = nil

Use Error Tag

Male
State
@user_changeset2 = #Ecto.Changeset<action: nil, changes: %{}, errors: [],
 data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>, valid?: true>
@user = %MoonWeb.Pages.Tutorials.AddDataUsingForm.User{
  __meta__: #Ecto.Schema.Metadata<:built, "users">,
  agrees_to_marketing_emails: true,
  agrees_to_terms_of_service: true,
  country: nil,
  document_filename: nil,
  email: "[email protected]",
  gender: "male",
  id: nil,
  name: "First Last",
  password: "verysecret123",
  permissions: [1, 2],
  phone: nil,
  role: 1,
  username: "johndoe"
}
Props
Name Type Required Default Description
id string true -
label string false -
options list true - Options for the select
value any false - Default selected value
disabled boolean false false Whether the component is disabled
size sm | md | lg | xl false md Size variant
popover_placement top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end - bottom-start Location of where the dropdown appears
popover_class string false - Css class for the dropdown
placeholder string false - String to display when there is no value selected
background_color string false gohan
hint_text_slot slot false - Inform message under select
has_error boolean false - If the component is in error mode
use_error_tag boolean false - Whether to use the built in ErrorTag in place of the hint slot
selected_value_class css_class false - Css class for the displayed selected value