Single Select
Default
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
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
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
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
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
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
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
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
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)
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 |