BitstylesPhoenix.Form (bitstyles_phoenix v0.6.0) View Source
Form-related UI components. The various form helpers here follow the interface provided by HTML — inputs, selects, and textareas.
All helpers accept the following options:
Options
:label
— Override the default text to be used in the<label>
:label_opts
— The options passed to the label element:hidden_label
— The label element will be visually hidden, but still present in the DOM:e2e_classname
— A classname that will be applied to the input for testing purposes, only on integration env
Link to this section Summary
Functions
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.
Renders <select>
elements, with the associated <label>
s, and any errors for that field. Uses the select
form helper in Phoenix.HTML.Form
.
Renders <textarea>
elements, with the associated <label>
s, and any errors for that field.
This is a shortcut for ui_input/3
with type: :textarea
, accepting the same options as above.
Link to this section Functions
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>)
Renders <select>
elements, with the associated <label>
s, and any errors for that field. Uses the select
form helper in Phoenix.HTML.Form
.
Options
- All options from above (see top level module doc).
- All other options will be passed to the underlying Phoenix form helper
See the bitstyles select docs for examples of textareas and labels in use.
Select box
iex> safe_to_string ui_select(@user_form, :week, 1..2)
~s(<label for="user_week">Week</label><select id="user_week" name="user[week]"><option value="1">1</option><option value="2">2</option></select>)
Select box without label
iex> safe_to_string ui_select(@user_form, :week, 1..2, hidden_label: true)
~s(<label class="u-sr-only" for="user_week">Week</label><select id="user_week" name="user[week]"><option value="1">1</option><option value="2">2</option></select>)
Select box with options
iex> safe_to_string ui_select(@user_form, :preference, [{"Ducks", "ducks"}, {"Cats", "cats"}], label: "What do you like best?", label_opts: [class: "extra"])
~s(<label class="extra" for="user_preference">What do you like best?</label><select id="user_preference" name="user[preference]"><option value="ducks">Ducks</option><option value="cats">Cats</option></select>)
Renders <textarea>
elements, with the associated <label>
s, and any errors for that field.
This is a shortcut for ui_input/3
with type: :textarea
, accepting the same options as above.
See the bitstyles textarea docs for examples of textareas and labels in use.
Textarea
iex> safe_to_string ui_textarea(@user_form, :about_me)
~s(<label for="user_about_me">About me</label><textarea id="user_about_me" name="user[about_me]">
</textarea>)
Textarea with options
iex> safe_to_string ui_textarea(@user_form, :metadata, label: "Metadata", value: "Value here", rows: 10, style: "height: auto;", label_opts: [class: "extra"])
~s(<label class="extra" for="user_metadata">Metadata</label><textarea id="user_metadata" name="user[metadata]" rows="10" style="height: auto;">
Value here</textarea>)
Textarea with hidden label
iex> safe_to_string ui_textarea(@user_form, :address, hidden_label: true)
~s(<label class="u-sr-only" for="user_address">Address</label><textarea id="user_address" name="user[address]">
</textarea>)