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.