BitstylesPhoenix.Component.Form.ui_textarea

You're seeing just the function ui_textarea, go back to BitstylesPhoenix.Component.Form module for more information.

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