BitstylesPhoenix.Form (bitstyles_phoenix v0.3.0) View Source
Form-related UI components. The various form helpers here follow the interface provided by HTML — inputs, selects, and textareas.
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.
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes
Renders <select>
elements, with the associated <label>
s, and any errors for that field. As with the select
form helper in Phoenix.HTML.Form
, this expects the form, field, and options as first parameters.
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes
Renders <textarea>
elements, with the associated <label>
s, and any errors for that field. As with the various form helpers in Phoenix.HTML.Form
, this expects the form & field as first parameters.
This is an alias for ui_input, as we’re matching the HTML elements, which present a different interface to that presented by the phoenix functions (i.e. in HTML we have <textarea>, not <input type="textarea">)
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes
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.
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes:
form
— the form object this input is being rendered inside
field
— the atom for the field you’re rendering
opts[:type]
— the type of the input required, analogous to the input types in the HTML standard
opts[:e2e_classname]
— A classname that will be applied to the input for testing purposes, only on integration env
opts[:label]
— Override the default text to be used in the <label>
opts[:hidden_label]
— The label element will be visually hidden, but still present in the DOM
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.
Examples
iex> ui_input(f, :field)
~s(<label for="field">Field</label>
<input id="field" name="field" type="text">)
iex> ui_input(f, :email_or_name, type: :search, placeholder: "Email or Name search", autofocus: true)
~s(<label for="email_or_number_or_name">Email or name</label>
<input id="email_or_number_or_name" name="email_or_name" placeholder="Email or Name search" type="search" autofocus="">)
iex> ui_input(f, :file, type: :file, accept: "application/pdf")
~s(<label for="file">File</label>
<input accept="application/pdf" id="file" name="user[file]" type="file">)
iex> ui_input(f, :search_term, type: :search, hidden_label: true)
~s(<label for="search_term" class="u-sr-only">Search</label>
<input id="search_term" name="search_term" type="search">)
Renders <select>
elements, with the associated <label>
s, and any errors for that field. As with the select
form helper in Phoenix.HTML.Form
, this expects the form, field, and options as first parameters.
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes:
form
— the form object this input is being rendered inside
field
— the atom for the field you’re rendering
options
— the options to be rendered in this select element
opts[:e2e_classname]
— A classname that will be applied to the input for testing purposes, only on integration env
opts[:label]
— Override the default text to be used in the <label>
See the bitstyles select docs for examples of textareas and labels in use.
Examples
iex> ui_select(f, :week, 1..2, label: "Week", e2e_classname: "e2e-filters-week-week")
~s(<label for="filters_week">Week</label>
<select class="e2e-filters-week-week" id="filters_week" name="filters[week]"><option value="1">1</option><option value="2">2</option></select>)
iex> ui_select(f, :week, 1..2, label: "Week", hidden_label: true)
~s(<label for="filters_week" class="u-sr-only">Week</label>
<select id="filters_week" name="filters[week]"><option value="1">1</option><option value="2">2</option></select>)
Renders <textarea>
elements, with the associated <label>
s, and any errors for that field. As with the various form helpers in Phoenix.HTML.Form
, this expects the form & field as first parameters.
This is an alias for ui_input, as we’re matching the HTML elements, which present a different interface to that presented by the phoenix functions (i.e. in HTML we have <textarea>, not <input type="textarea">)
opts
will be passed on to the respective underlying Phoenix form helper, with the following additional notes:
form
— the form object this input is being rendered inside
field
— the atom for the field you’re rendering
opts[:e2e_classname]
— A classname that will be applied to the input for testing purposes, only on integration env
opts[:label]
— Override the default text to be used in the <label>
See the bitstyles textarea docs for examples of textareas and labels in use.
Examples
iex> ui_textarea(f, :address)
~s(<label for="user_address">Address</label>
<textarea id="user_address" name="user[address]"></textarea>)
iex> ui_textarea(f, :stringified_metadata, label: "Metadata", value: "Value here", rows: 10, style: "height: auto;")
~s(<label for="user_stringified_metadata">Metadata</label>
<textarea id="user_stringified_metadata" name="user[stringified_metadata]" rows="10" style="height: auto;"></textarea>)
iex> ui_textarea(f, :address, hidden_label: true)
~s(<label for="user_address" class="u-sr-only">Metadata</label>
<textarea id="user_address" name="user[address]"></textarea>)