BitstylesPhoenix.Components.Form (bitstyles_phoenix v0.2.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
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>
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>
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>)