Single Select

Default

User
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

Sizes

User
User
User
Role
User
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

Left Icon

User
User
User
Role
User
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

Right icon

User
User
User
Role
User
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

Both icons

User
User
User
Role
User
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

Disabled

User
User
User
Role
User
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

Hint text

User
User
User
Role
User
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

Error

User
User
User
Role
User
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

Use Error Tag

Male
State 
@user_changeset2 = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
@user = %MoonWeb.Pages.Tutorials.AddDataUsingForm.User{
  __meta__: #Ecto.Schema.Metadata<:built, "users">,
  id: nil,
  username: "johndoe",
  password: "verysecret123",
  name: "First Last",
  email: "[email protected]",
  phone: nil,
  country: nil,
  gender: "male",
  document_filename: nil,
  agrees_to_terms_of_service: true,
  agrees_to_marketing_emails: true,
  permissions: nil,
  role: nil
}

With search (data + changeset form)

User
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
id string Yes -
label string No -
options list Yes - Options for the select
value any No - Default selected value
disabled boolean No false Whether the component is disabled
size sm | md | lg | xl No 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 No - Css class for the dropdown
placeholder string No - String to display when there is no value selected
background_color string No gohan
hint_text_slot slot No - Inform message under select
has_error boolean No - If the component is in error mode
use_error_tag boolean No - Whether to use the built in ErrorTag in place of the hint slot
selected_value_class css_class No - Css class for the displayed selected value