LineaUI.Components.InputGroup (linea_ui v0.1.1)

Copy Markdown View Source

Joins inputs, addons, selects and buttons into one row with shared borders, as LineOne's input groups do. Only the outer ends keep their rounded corners.

<.input_group>
  <.input_group_addon>@</.input_group_addon>
  <.input name="username" placeholder="Username" />
</.input_group>

<.input_group label="Price">
  <.input_group_addon variant="filled">$</.input_group_addon>
  <.input name="price" placeholder="Enter price" />
  <.input_group_addon variant="filled">.00</.input_group_addon>
</.input_group>

<.input_group shape="pill">
  <select class="form-select …">…</select>
  <.input name="price" placeholder="Price" />
  <.button>Purchase</.button>
</.input_group>

Summary

Functions

input_group(assigns)

Renders the row. label adds a caption above it.

input_group_addon(assigns)

A text or icon box at either end (or between the inputs) of an input_group.

Functions

input_group(assigns)

Renders the row. label adds a caption above it.

Attributes

  • shape (:string) - Defaults to "rounded". Must be one of "rounded", or "pill".
  • label (:string) - The caption. Defaults to nil.
  • label_class (:any) - Classes of the caption text. Defaults to nil.
  • wrapper_class (:any) - Classes of the outer block (grid placement, spacing). Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

input_group_addon(assigns)

A text or icon box at either end (or between the inputs) of an input_group.

Attributes

  • variant (:string) - Defaults to "outline". Must be one of "outline", or "filled".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)