BitstylesPhoenix.Form (bitstyles_phoenix v0.4.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

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