formulator v0.4.0 Formulator View Source

Link to this section Summary

Functions

Returns an html input with an associated label. If there are errors associated with the field, it will also output a span tag with the errors.

Link to this section Functions

Link to this function

build_label(form, field, label_text) View Source

Link to this function

input(form, field, options \\ []) View Source
input(Phoenix.HTML.Form.t(), atom(), []) :: binary()

Returns an html input with an associated label. If there are errors associated with the field, it will also output a span tag with the errors.

Options

  • :label - When given a keyword list, the keyword text is extracted to use as the label text. All other options are passed along to the label. When given false, does not create a label tag. Instead, an aria-label attribute is added to the input to improve accessibility.

  • :validate - Defaults to application config. When provided a form created with an Ecto changeset that contains validations, then Formulator will add HTML5 validation attributes (except regex).

  • :validate_regex - Defaults to application config. Like option :validate, except this will add a pattern HTML5 validation. This should work with most simple regex patterns, but the browser's regex engine may differ from Erlang's.

  • :wrapper_class - This allows you to add a class to the div that wraps the input and label. This can also be set in your config: config :formulator, wrapper_class: "input-wrapper"

Examples

Basic input:

<%= input form, :name %>
#=> <div>
#=>   <label for="user_name">Name</label>
#=>   <input id="user_name" name="user[name]" type="text" value="">
#=> </div>

Without a label:

<%= input form, :name, label: false %>
#=> <div>
#=>   <input id="user_name" name="user[name]" aria-label="name" type="text" value="">
#=> </div>

Passing other options:

<%= input form, :name, label: [class: "control-label"] %>
#=> <div>
#=>   <label class="control-label" for="user_name">Name</label>
#=>   <input id="user_name" type="text" name="user[name]" value="">
#=> </div>

Using different input types:

<%= input form, :email_address,
    as: :email,
    placeholder: "your@email.com",
    class: "my-email-class",
    label: [class: "my-email-label-class"] %>
#=> <div>
#=>   <label
       class="my-email-label-class"
       for="user_email_address">Email Address</label>
#=>   <input
       id="user_email_address"
       type="email"
       name="user[email_address]"
       placeholder: "your@email.com"
       value=""
       class="my-email-class">
#=> </div>

Or a number input:

<%= input form, :count, as: :number %>
#=> <div>
#=>   <label for="asset_count">Count</label>
#=>   <input id="asset_count" type="number" name="asset[count]" value="">
#=> <div>

If your form is using a changeset with validations (eg, with Ecto and phoenix_ecto), then Formulator will add HTML5 validation attributes:

<%= input form, :email, as: :email %>
#=> <div>
#=>   <label for="user_email">Email</label>
#=>   <input id="user_email" type="email" name="user[email]" required="required" pattern=".+@.+" %>
#=> <div>

If you would rather not add HTML5 validation attributes, you can opt out by supplying validate: false:

<%= input form, :email, as: :email, validate: false %>
#=> <div>
#=>   <label for="user_email">Email</label>
#=>   <input id="user_email" type="email" name="user[email]" %>
#=> </div>

You may want HTML5 validations, but the browser's regex engine is not working with Elixir's regex engine. You can opt-out of regex validation with validate_regex: false:

<%= input form, :email, as: :email, validate_regex: false %>
#=> <div>
#=>   <label for="user_email">Email</label>
#=>   <input id="user_email" type="email" name="user[email]" required="required" %>
#=> </div>