BitstylesPhoenix.Component.Form (bitstyles_phoenix v2.2.0) View Source

Components for rendering input elements.

Common attributes

All helpers in this module accept the following attributes.

  • form (required) - The form to render the input form.
  • field (required) - The name of the field for the input.
  • label - The text to be used as label. Defaults to Phoenix.HTML.Form.humanize/1.
  • label_opts - The options passed to the label element generated with Phoenix.HTML.Form.label/4.

See Phoenix.HTML.Form.form_for/4 or LiveView form component for details on how to render a form.

Link to this section Summary

Functions

Renders various types of <input> element, with the associated <label>s, and any errors for that field.

Renders a <select> element, with a <label> and any errors for that field.

Renders <textarea> elements, with the associated <label>s, and any errors for that field.

Component for rendering custom inputs together with a label and errors.

Component for rendering custom wrapped inputs in a label and with errors.

Link to this section Functions

Renders various types of <input> element, with the associated <label>s, and any errors for that field.

Attributes

  • type - The type of the input (see table below for available types). Defaults to type="text".
  • hidden_label - Only show the label for screen readers if set to true.
  • All options from above (see top level module doc).
  • All other attributes will be passed in as input options to the underlying input helpers from Phoenix.HTML.Form (see table below for used helpers). Defaults to maxlength="255" for email, text and password type. Set maxlength to false to prevent setting maxlength.

For reference which input helper is used check out the following mapping:

typeHelper
:checkboxPhoenix.HTML.Form.checkbox/3
:colorPhoenix.HTML.Form.color_input/3
:datePhoenix.HTML.Form.date_input/3
:datetime_localPhoenix.HTML.Form.datetime_local_input/3
:emailPhoenix.HTML.Form.email_input/3
:filePhoenix.HTML.Form.file_input/3
:numberPhoenix.HTML.Form.number_input/3
:passwordPhoenix.HTML.Form.password_input/3
:rangePhoenix.HTML.Form.range_input/3
:searchPhoenix.HTML.Form.search_input/3
:telephonePhoenix.HTML.Form.telephone_input/3
:textPhoenix.HTML.Form.text_input/3
:timePhoenix.HTML.Form.time_input/3
:urlPhoenix.HTML.Form.url_input/3

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> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:name} />
...> """
"""
<label for="user_name">
  Name
</label>
<input id="user_name" maxlength="255" name="user[name]" type="text"/>
"""

Text required field with label

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:name} required/>
...> """
"""
<label for="user_name">
  Name
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
<input id="user_name" maxlength="255" name="user[name]" required="required" type="text"/>
"""

Text field with error

iex> assigns=%{form: @form_with_errors}
...> render ~H"""
...> <.ui_input form={@form} field={:name} />
...> """
"""
<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> assigns=%{form: @form_with_errors}
...> render ~H"""
...> <.ui_input form={@form} field={:email} />
...> """
"""
<label for="user_email">
  Email
</label>
<input id="user_email" maxlength="255" name="user[email]" type="text"/>
<ul class="u-padding-xl-left">
  <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> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:name} hidden_label={true} />
...> """
"""
<label class="u-sr-only" for="user_name">
  Name
</label>
<input id="user_name" maxlength="255" name="user[name]" type="text"/>
"""

Text field with label (without maxlength)

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:name} maxlength={false}/>
...> """
"""
<label for="user_name">
  Name
</label>
<input id="user_name" name="user[name]" type="text"/>
"""

Text field with options

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input
...>   form={@form}
...>   field={:totp}
...>   label="Authentication code"
...>   label_opts={[class: "extra"]}
...>   placeholder="6-digit code"
...>   required={true}
...>   value=""
...>   inputmode="numeric"
...>   pattern="[0-9]*"
...>   autocomplete="one-time-code"
...>   maxlength={6} />
...> """
"""
<label class="extra" for="user_totp">
  Authentication code
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
<input autocomplete="one-time-code" id="user_totp" inputmode="numeric" maxlength="6" name="user[totp]" pattern="[0-9]*" placeholder="6-digit code" required="required" type="text" value=""/>
"""

Email field with label

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:email} type={:email} />
...> """
"""
<label for="user_email">
  Email
</label>
<input id="user_email" maxlength="255" name="user[email]" type="email"/>
"""

Search field with placholder

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input
...>    form={@form}
...>    field={:email_or_name}
...>    type={:search}
...>    placeholder="Search by email or name"
...>    autofocus={true} />
...> """
"""
<label for="user_email_or_name">
  Email or name
</label>
<input autofocus="autofocus" id="user_email_or_name" name="user[email_or_name]" placeholder="Search by email or name" type="search"/>
"""

File field for pdfs

iex> assigns=%{form: @form}
...> render ~H"""
...> <Phoenix.Component.form :let={form} for={@form} multipart>
...>   <.ui_input form={form} field={:file} type={:file} accept="application/pdf" />
...> </Phoenix.Component.form>
...> """
"""
<form enctype="multipart/form-data">
  <label for="user_file">
    File
  </label>
  <input accept="application/pdf" id="user_file" name="user[file]" type="file"/>
</form>
"""

Checkbox

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:accept} type={:checkbox} />
...> """
"""
<label for="user_accept">
  <input name="user[accept]" type="hidden" value="false"/>
  <input id="user_accept" name="user[accept]" type="checkbox" value="true"/>
  Accept
</label>
"""

Checkbox required

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:accept} type={:checkbox} required/>
...> """
"""
<label for="user_accept">
  <input name="user[accept]" type="hidden" value="false"/>
  <input id="user_accept" name="user[accept]" required="required" type="checkbox" value="true"/>
  Accept
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
"""

Checkbox with label class

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_input form={@form} field={:accept} type={:checkbox} label_opts={[class: "extra"]}/>
...> """
"""
<label class="extra" for="user_accept">
  <input name="user[accept]" type="hidden" value="false"/>
  <input id="user_accept" name="user[accept]" type="checkbox" value="true"/>
  Accept
</label>
"""

Renders a <select> element, with a <label> and any errors for that field.

Attributes

  • hidden_label - Only show the label for screen readers if set to true.
  • options - The options passed to Phoenix.HTML.Form.select/4.
  • All options from above (see top level module doc).
  • All other attributes will be passed in as input options to Phoenix.HTML.Form.select/4.

See the bitstyles select docs for examples of textareas and labels in use.

Select box

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} />
...> """
"""
<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 required

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} required />
...> """
"""
<label for="user_week">
  Week
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
<select id="user_week" name="user[week]" required="required">
  <option value="1">
    1
  </option>
  <option value="2">
    2
  </option>
</select>
"""

Select box without label

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} hidden_label/>
...> """
"""
<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> assigns=%{form: @form, options: [{"Ducks", "ducks"}, {"Cats", "cats"}]}
...> render ~H"""
...> <.ui_select form={@form} field={:preference} options={@options} label="What do you like best?" label_opts={[class: "extra"]}/>
...> """
"""
<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.

Attributes

  • hidden_label - Only show the label for screen readers if set to true.
  • All options from above (see top level module doc).
  • All other attributes will be passed in as input options to Phoenix.HTML.Form.textarea/3.

See the bitstyles textarea docs for examples of textareas and labels in use.

Textarea

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_textarea form={@form} field={:about_me} />
...> """
"""
<label for="user_about_me">
  About me
</label>
<textarea id="user_about_me" name="user[about_me]">
</textarea>
"""

Textarea

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_textarea form={@form} field={:about_me} required/>
...> """
"""
<label for="user_about_me">
  About me
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
<textarea id="user_about_me" name="user[about_me]" required="required">
</textarea>
"""

Textarea with options

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_textarea
...>   form={@form}
...>   field={:metadata}
...>   label="Metadata"
...>   label_opts={[class: "extra"]}
...>   value="Value here"
...>   rows={10}
...> />
...> """
"""
<label class="extra" for="user_metadata">
  Metadata
</label>
<textarea id="user_metadata" name="user[metadata]" rows="10">
  Value here
</textarea>
"""

Textarea with hidden label

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_textarea form={@form} field={:address} hidden_label/>
...> """
"""
<label class="u-sr-only" for="user_address">
  Address
</label>
<textarea id="user_address" name="user[address]">
</textarea>
"""

Textarea with error

iex> assigns=%{form: @form_with_errors}
...> render ~H"""
...> <.ui_textarea form={@form} field={:name} />
...> """
"""
<label for="user_name">
  Name
</label>
<textarea id="user_name" name="user[name]">
</textarea>
<span class="u-fg-warning" phx-feedback-for="user[name]">
  is too short
</span>
"""
Link to this function

ui_unwrapped_input(assigns)

View Source

Component for rendering custom inputs together with a label and errors.

Attributes

  • hidden_label - Only show the label for screen readers if set to true.
  • All options from above (see top level module doc).

    Custom inputs

iex> assigns=%{form: @form_with_errors}
...> render ~H"""
...> <.ui_unwrapped_input form={@form} field={:name} label="Custom">
...>   Custom content
...>   <input type="text" whatever="foo" />
...> </.ui_unwrapped_input>
...> """
"""
<label for="user_name">
  Custom
</label>
Custom content
<input type="text" whatever="foo"/>
<span class="u-fg-warning" phx-feedback-for="user[name]">
  is too short
</span>
"""
Link to this function

ui_wrapped_input(assigns)

View Source

Component for rendering custom wrapped inputs in a label and with errors.

Attributes

  • All options from above (see top level module doc).

    Custom wrapped inputs

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_wrapped_input form={@form} field={:name} label="Current name">
...>   <input type="checkbox" id="user_name" whatever="foo" />
...> </.ui_wrapped_input>
...> """
"""
<label for="user_name">
  <input type="checkbox" id="user_name" whatever="foo"/>
  Current name
</label>
"""