View Source Cheatsheet

styling-live_select-like-a-phoenix-core-component

Styling live_select like a Phoenix Core Component

Copy and paste this in your core_components.ex to get live a LiveSelect styled like a core component, with label and errors:

def live_select(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
  assigns = assign(assigns, :errors, Enum.map(field.errors, &translate_error(&1)))
  
  live_select_opts = assigns_to_attributes(assigns, [:errors, :label])
  
  ~H"""
  <div phx-feedback-for={@field.name}>
    <.label for={@field.id}><%= @label %></.label>
    <LiveSelect.live_select
      form={@field.form}
      field={@field.field}
      text_input_class={[
        "mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
        "text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
        "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
        "border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5",
        @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
      ]}
      {live_select_opts}
    />
  
    <.error :for={msg <- @errors}><%= msg %></.error>
  </div>
  """
end

then-use-it-like-this

Then use it like this:

<.live_select field={@form[:city]} label="City" phx-target={@myself} />

You can also pass any of the other LiveSelect options.