Created
March 5, 2024 10:30
-
-
Save lubien/7ba8e8c88dc0fa32263971c8b33b3c1c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@doc """ | |
Renders an input with label and error messages. | |
A `Phoenix.HTML.FormField` may be passed as argument, | |
which is used to retrieve the input name, id, and values. | |
Otherwise all attributes may be passed explicitly. | |
## Types | |
This function accepts all HTML input types, considering that: | |
* You may also set `type="select"` to render a `<select>` tag | |
* `type="checkbox"` is used exclusively to render boolean values | |
* For live file uploads, see `Phoenix.Component.live_file_input/1` | |
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | |
for more information. | |
## Examples | |
<.input field={@form[:email]} type="email" /> | |
<.input name="my-input" errors={["oh no!"]} /> | |
""" | |
attr :id, :any, default: nil | |
attr :name, :any | |
attr :label, :string, default: nil | |
attr :value, :any | |
attr :type, :string, | |
default: "text", | |
values: ~w(checkbox color date datetime-local email file hidden month number password | |
range radio search select tel text textarea time url week) | |
attr :field, Phoenix.HTML.FormField, | |
doc: "a form field struct retrieved from the form, for example: @form[:email]" | |
attr :errors, :list, default: [] | |
attr :checked, :boolean, doc: "the checked flag for checkbox inputs" | |
attr :prompt, :string, default: nil, doc: "the prompt for select inputs" | |
attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2" | |
attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs" | |
attr :rest, :global, | |
include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength | |
multiple pattern placeholder readonly required rows size step) | |
slot :inner_block | |
def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do | |
assigns | |
|> assign(field: nil, id: assigns.id || field.id) | |
|> assign(:errors, Enum.map(field.errors, &translate_error(&1))) | |
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end) | |
|> assign_new(:value, fn -> field.value end) | |
|> input() | |
end | |
def input(%{type: "checkbox"} = assigns) do | |
assigns = | |
assign_new(assigns, :checked, fn -> | |
Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value]) | |
end) | |
~H""" | |
<div phx-feedback-for={@name}> | |
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600"> | |
<input type="hidden" name={@name} value="false" /> | |
<input | |
type="checkbox" | |
id={@id} | |
name={@name} | |
value="true" | |
checked={@checked} | |
class="rounded border-zinc-300 text-zinc-900 focus:ring-0" | |
{@rest} | |
/> | |
<%= @label %> | |
</label> | |
<.error :for={msg <- @errors}><%= msg %></.error> | |
</div> | |
""" | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment