BitstylesPhoenix.Form.ui_input
You're seeing just the function
ui_input
, go back to BitstylesPhoenix.Form module for more information.
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>)