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".
• size (:string) - the size of the switch (xs, sm, md, lg or xl) or radio card (sm, md or lg). Defaults to "md".
• 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.
• 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".
• 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)