Default value Select Input

Phoenix Forum Questions / Help
, , ,
1

Question: Is there a default value that a option can have in select component? I am using LiveView

 <.input field={@form[:theme]} value={"Roxo"} type="select"
                  options={[
                    {gettext("Vermelho Padrão"), "default_theme"}, {gettext("Roxo"), "purple_theme"}, {"Verde", "green_theme"}
                    ]} />
2

> GITHUB: core_components.ex
I took reference from this. I am not sure if .input is the best approach for what i wanted to do, then i am using select for this this case where i need default value :slight_smile:

3

Way out: <select id="theme" name="theme" class="" multiple > {Phoenix.HTML.Form.options_for_select([{"Roxo", "purple_theme"}, {"Vermelho Padrão", "default_theme"}], @theme )} </select>
I dont know how to make select have a dropdown menu as .input

Phoenix.HTML.Form

Found this at core_components.ex def input(%{type: "select"} = assigns) do ~H""" <div> <.label for={@id}>{@label}</.label> <select id={@id} name={@name} class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest} > <option :if={@prompt} value="">{@prompt}</option> {Phoenix.HTML.Form.options_for_select(@options, @value)} </select> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end

4

remove “multiple” from select and dropdown works: <select id="theme" name="theme" class=""> {Phoenix.HTML.Form.options_for_select([{"Roxo", "purple_theme"}, {"Vermelho Padrão", "default_theme"}], @theme )} </select>

5

other way around:

  <.form for={@form}  id="main-form" phx-submit="save" phx-change="validate"  class="space-y-6">
     <div >
       <label>@privacy_options</label>
       <.input field={@form[:theme]} type="select" options={@theme_options} />
    </div>
  </.form>
6

To set a default value, you do this in the form.

def mount(_params, _session, socket)
  changeset = User.changeset(user, %{theme: "Dark"})
  {:ok, assign(socket, form: to_form(changeset))}

If you are looking to set a default value that isn’t one of the options, you can add a prompt. Ie ‘Choose xxx’

<.input
  field={@form[:theme]}
  type="select"
  prompt="Choose a theme..."
  options={["Light", "Dark"]}
/>
2 Likes