Renders an input with label and error messages. If you just want an input, check out input.ex

A %Phoenix.HTML.FormField{} and type may be passed to the field to build input names and error messages, or all the attributes and errors may be passed explicitly.

Examples

<.field field={@form[:email]} type="email" />
<.field label="Name" value="" name="name" errors={["oh no!"]} />

Attributes

• id (:any) - the id of the input. If not passed, it will be generated automatically from the field. Defaults to nil.
• name (:any) - the name of the input. If not passed, it will be generated automatically from the field.
• label (:string) - the label for the input. If not passed, it will be generated automatically from the field.
• value (:any) - the value of the input. If not passed, it will be generated automatically from the field.
• type (:string) - the type of input. Defaults to "text". Must be one of "checkbox", "checkbox-group", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "radio-group", "radio-card", "search", "select", "switch", "tel", "text", "textarea", "time", "url", or "week".
• size (:string) - the size of the switch (xs, sm, md, lg or xl) or radio card (sm, md or lg). Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
• variant (:any) - outline, classic - used by radio-card. Defaults to "outline".
• viewable (:boolean) - If true, adds a toggle to show/hide the password text. Defaults to false.
• copyable (:boolean) - If true, adds a copy button to the field and disables the input. Defaults to false.
• copy_icon (:string) - Icon name for the copy button. Defaults to "hero-clipboard-document-solid".
• copied_icon (:string) - Icon name shown after copying. Defaults to "hero-clipboard-document-check-solid".
• clearable (:boolean) - If true, adds a clear button to clear the field value. Defaults to false.
• no_margin (:boolean) - removes the margin from the field wrapper. Defaults to false.
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• errors (:list) - a list of errors to display. If not passed, it will be generated automatically from the field. Format is a list of strings. Defaults to [].
• checked (:any) - the checked flag for checkboxes and checkbox groups.
• 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.
• disabled_options (:list) - the options to disable in a checkbox group. Defaults to [].
• group_layout (:string) - the layout of the inputs in a group (checkbox-group or radio-group). Defaults to "row". Must be one of "row", or "col".
• empty_message (:string) - the message to display when there are no options available, for checkbox-group or radio-group. Defaults to nil.
• rows (:string) - rows for textarea. Defaults to "4".
• class (:any) - the class to add to the input. Defaults to nil.
• wrapper_class (:any) - the wrapper div classes. Defaults to nil.
• help_text (:string) - context/help for your field. Defaults to nil.
• label_class (:any) - extra CSS for your label. Defaults to nil.
• selected (:any) - the selected value for select inputs. Defaults to nil.
• required (:boolean) - is this field required? is passed to the input and adds an asterisk next to the label. Defaults to false.
• Global attributes are accepted. All other props go on the input. Supports all globals plus: ["autocomplete", "autocorrect", "autocapitalize", "disabled", "form", "max", "maxlength", "min", "minlength", "list", "pattern", "placeholder", "readonly", "required", "size", "step", "value", "name", "multiple", "prompt", "default", "year", "month", "day", "hour", "minute", "second", "builder", "options", "layout", "cols", "rows", "wrap", "checked", "accept"].

Generates a generic error message.

Slots

• inner_block (required)

Attributes

• class (:any) - extra classes for the help text. Defaults to nil.
• help_text (:string) - context/help for your field. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Renders a label.

Attributes

• for (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• required (:boolean) - Defaults to false.
• Global attributes are accepted.

Slots

• inner_block (required)

Attributes

• class (:any) - Defaults to nil.
• errors (:list) - Defaults to [].
• name (:string)
• no_margin (:boolean) - removes the margin from the field wrapper. Defaults to false.
• Global attributes are accepted.

Slots

• inner_block (required)