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

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>)
Link to this function

ui_select(form, field, options, opts \\ [])

View Source

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>)
Link to this function

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

View Source

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>)