LineaUI.Components.Textarea (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's textareas: outlined or filled, fixed or resizable, and framed with a header or a footer (a title input, a toolbar, a submit button).

<.textarea name="bio" placeholder="Enter Text" />
<.textarea field={@form[:bio]} label="Bio" variant="filled" resizable />

<.textarea name="post" rows={5} placeholder="Write the post">
  <:header>
    <.input name="title" variant="plain" class="p-3 text-lg font-medium" placeholder="Title" />
  </:header>
  <:footer>
    <span>…toolbar…</span>
    <.button color="primary" size="sm">Save Post</.button>
  </:footer>
</.textarea>

Summary

Functions

textarea(assigns)

Renders a <textarea>. With a header or footer slot it sits, borderless, inside a bordered frame that lights up while it has focus.

Functions

textarea(assigns)

Renders a <textarea>. With a header or footer slot it sits, borderless, inside a bordered frame that lights up while it has focus.

Attributes

  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • id (:string) - Defaults to the field's id.
  • name (:string) - Defaults to the field's name.
  • value (:any)
  • rows (:integer) - Defaults to 4.
  • variant (:string) - Defaults to "outlined". Must be one of "outlined", "filled", or "plain".
  • resizable (:boolean) - Defaults to false.
  • state (:string) - Defaults to nil.Must be one of nil, "success", or "error".
  • label (:string) - The caption. Defaults to nil.
  • label_class (:any) - Classes of the caption text. Defaults to nil.
  • help (:string) - The small line under the control. Defaults to nil.
  • errors (:list) - Messages to show; field adds its own once the input was used. Defaults to [].
  • disabled (:boolean) - Defaults to false.
  • wrapper_class (:any) - Classes of the outer block (grid placement, spacing). Defaults to nil.
  • frame_class (:any) - Classes of the frame drawn around header/footer. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "autofocus", "cols", "form", "maxlength", "minlength", "placeholder", "readonly", "required", "wrap"].

Slots

  • header - Content above the text, laid out as a row.
  • footer - Content below the text, laid out as a row with space between.