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

<.dm_input field={@form[:email]} type="email" />
<.dm_input name="my-input" errors={["oh no!"]} />

Attributes

• field_class (:any) - additional CSS classes for the field wrapper. Defaults to nil.
• id (:any) - HTML id attribute. Defaults to nil.
• class (:any) - additional CSS classes for the outer wrapper. Defaults to nil.
• classic (:boolean) - use classic input styling instead of modern. Defaults to false.
• name (:any) - HTML name attribute for form submission.
• label (:string) - text label displayed above the input. Defaults to nil.
• label_class (:any) - additional CSS classes for the label. Defaults to nil.
• value (:any) - the input value.
• color (:string) - the color variant of the input (primary, secondary, accent, info, success, warning, error). Defaults to nil.
• size (:string) - the size of the input (xs, sm, lg). Defaults to nil.
• variant (:string) - the input style variant (ghost, filled, bordered). Defaults to "bordered". Must be one of "ghost", "filled", "bordered", or nil.
• type (:string) - the input type. Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "radio", "search", "select", "tel", "text", "textarea", "time", "url", "week", "checkbox_group", "radio_group", "toggle", "range_slider", "rating", "datepicker", "timepicker", "color_picker", "switch", "search_with_suggestions", "file_upload", "rich_text", "tags", "slider_range", or "password_strength".
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• errors (:list) - list of error messages to display. Defaults to [].
• helper (:string) - helper text displayed below the input. Defaults to nil.
• checked (:boolean) - the checked flag for checkbox inputs.
• prompt (:string) - the prompt for select inputs. Defaults to nil.
• options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
• multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
• horizontal (:boolean) - horizontal layout (label beside input). Defaults to false.
• state (:string) - validation state (applies form-group-success/warning). Defaults to nil. Must be one of nil, "success", or "warning".
• swatches (:list) - list of color swatches for color_picker type. Defaults to nil.
• suggestions (:list) - list of suggestion strings for search_with_suggestions type. Defaults to [].
• phx_target (:any) - the phx-target for events (for use in LiveComponents). Defaults to nil.
• drop_text (:string) - text shown in the file_upload drop zone. Defaults to "Drop files here or click to browse".
• choose_files_text (:string) - text for the file_upload browse button. Defaults to "Choose Files".
• add_tag_placeholder (:string) - placeholder for the tags input field. Defaults to "Add tag...".
• password_hint_weak (:string) - hint text shown when password strength is weak. Defaults to "• Add uppercase letters, numbers, and special characters".
• password_hint_medium (:string) - hint text shown when password strength is medium. Defaults to "• Add more special characters or increase length".
• password_hint_strong (:string) - hint text shown when password strength is strong. Defaults to "• Strong password!".
• password_strength_label (:string) - accessible label for the password strength progressbar (i18n). Defaults to "Password strength".
• strength_label_weak (:string) - visible label for weak password strength (i18n). Defaults to "Weak".
• strength_label_medium (:string) - visible label for medium password strength (i18n). Defaults to "Medium".
• strength_label_strong (:string) - visible label for strong password strength (i18n). Defaults to "Strong".
• remove_file_label (:string) - accessible label for the remove file button in file_upload type. Defaults to "Remove file".
• toolbar_label (:string) - accessible label for the rich_text toolbar. Defaults to "Text formatting".
• bold_label (:string) - accessible label for the bold button. Defaults to "Bold".
• italic_label (:string) - accessible label for the italic button. Defaults to "Italic".
• underline_label (:string) - accessible label for the underline button. Defaults to "Underline".
• bulleted_list_label (:string) - accessible label for the bulleted list button. Defaults to "Bulleted list".
• numbered_list_label (:string) - accessible label for the numbered list button. Defaults to "Numbered list".
• insert_link_label (:string) - accessible label for the insert link button. Defaults to "Insert link".
• toggle_password_label (:string) - accessible label for the password visibility toggle. Defaults to "Toggle password visibility".
• rating_group_label (:string) - accessible label template for the rating group (i18n). Use {label} for the field label. Defaults to "{label} rating".
• rating_item_label (:string) - accessible label template for each rating item (i18n). Use {index} and {max}. Defaults to "Rate {index} out of {max}".
• remove_tag_label (:string) - accessible label template for tag removal buttons (i18n). Use {tag} for the tag value. Defaults to "Remove tag {tag}".
• select_color_label (:string) - accessible label template for color swatch buttons (i18n). Use {color} for the color value. Defaults to "Select color {color}".
• tags_group_label (:string) - accessible label template for the tags input group (i18n). Use {label} for the field label. Defaults to "{label} tags".
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].