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 toPhoenix.HTML.Form.humanize/1
.label_opts
- The options passed to the label element generated withPhoenix.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 totype="text"
.hidden_label
- Only show the label for screen readers if set totrue
.- 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 tomaxlength="255"
foremail
,text
andpassword
type. Set maxlength tofalse
to prevent setting maxlength.
For reference which input helper is used check out the following mapping:
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 totrue
.options
- The options passed toPhoenix.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 totrue
.- 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>
"""
Component for rendering custom inputs together with a label and errors.
Attributes
hidden_label
- Only show the label for screen readers if set totrue
.- 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>
"""
Component for rendering custom wrapped inputs in a label and with errors.
Attributes
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>
"""