BitstylesPhoenix.Form.ui_input

You're seeing just the function ui_input, go back to BitstylesPhoenix.Form module for more information.
Link to this function

ui_input(form, field, opts \\ [])

View Source

Renders all types of <input> element, with the associated <label>s, and any errors for that field. Defaults to type="text", and maxlength="255". As with the various text_input, number_input helpers in Phoenix.HTML.Form, this expects the form & field as first parameters.

Options

  • :type — the type of the input (one of :color, :checkbox, :date, :datetime, :email, :file, :number, :password, :radio, :range, :search, :telephone, :text, :textarea, :time, :url)
  • All options from above (see top level module doc).
  • All other options will be passed to the underlying Phoenix form helper

See the bitstyles form docs for examples of inputs, selects, textareas, labels etc. in use.

See the bitstyles form docs for examples of form layouts.

Text field with label

iex> safe_to_string ui_input(@user_form, :name)
~s(<label for="user_name">Name</label><input id="user_name" maxlength="255" name="user[name]" type="text">)

Text field with error

iex> safe_to_string ui_input(@error_form, :name)
~s(<label for="user_name">Name</label><input id="user_name" maxlength="255" name="user[name]" type="text"><span class="u-fg--warning" phx-feedback-for="user_name">is too short</span>)

Text field with multiple errors

iex> safe_to_string ui_input(@error_form, :email)
~s(<label for="user_email">Email</label><input id="user_email" maxlength="255" name="user[email]" type="text"><ul class="u-padding-l-left u-fg--warning">
  <li><span class="u-fg--warning" phx-feedback-for="user_email">is invalid</span></li>
  <li><span class="u-fg--warning" phx-feedback-for="user_email">must end with @bitcrowd.net</span></li>
</ul>
)

Text field with hidden label

iex> safe_to_string ui_input(@user_form, :name, hidden_label: true)
~s(<label class="u-sr-only" for="user_name">Name</label><input id="user_name" maxlength="255" name="user[name]" type="text">)

Text field with options

iex> safe_to_string ui_input @user_form, :totp, label: "Authentication code", placeholder: "6-digit code", required: true, value: "", inputmode: "numeric", pattern: "[0-9]*", autocomplete: "one-time-code", maxlength: 6, label_opts: [class: "extra"]
~s(<label class="extra" for="user_totp">Authentication code</label><input autocomplete="one-time-code" id="user_totp" inputmode="numeric" maxlength="6" name="user[totp]" pattern="[0-9]*" placeholder="6-digit code" type="text" value="" required>)

Email field with label

iex> safe_to_string ui_input(@user_form, :email, type: :email)
~s(<label for="user_email">Email</label><input id="user_email" maxlength="255" name="user[email]" type="email">)

Search field with placholder

iex> safe_to_string ui_input(@user_form, :email_or_name, type: :search, placeholder: "Search by email or name", autofocus: true)
~s(<label for="user_email_or_name">Email or name</label><input id="user_email_or_name" name="user[email_or_name]" placeholder="Search by email or name" type="search" autofocus>)

File field for pdfs

iex> safe_to_string ui_input(@file_form, :file, type: :file, accept: "application/pdf")
~s(<label for="user_file">File</label><input accept="application/pdf" id="user_file" name="user[file]" type="file">)

Checkbox

iex> safe_to_string ui_input(@user_form, :accept, type: :checkbox)
~s(<label><input name="user[accept]" type="hidden" value="false"><input id="user_accept" name="user[accept]" type="checkbox" value="true">Accept</label>)

Radio

iex> safe_to_string ui_input(@user_form, :option, type: :radio, value: "one", label: "One")
~s(<label><input id="user_option_one" name="user[option]" type="radio" value="one">One</label>)