DevactionUI.InputGroup (devaction_ui v0.1.0)

Copy Markdown View Source

A text field with what the canvas puts around it: an icon at the start, an action at the end (show the password, clear, copy) and add-ons on either side (R$, https://, .devaction.app). The frame carries the focus ring, the error and the disabled look, so the field inside stays a plain <input>.

The icon, the action and the add-ons are slots: the library knows no icon set. The error is whatever the caller says with invalid, and loading swaps the end for a spinner.

Summary

Functions

The button at the end of an input_group/1: show the password, clear the field, copy the value.

Functions

input_action(assigns)

The button at the end of an input_group/1: show the password, clear the field, copy the value.

Attributes

  • label (:string) (required) - what pressing it does, read by screen readers.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the icon.

input_group(assigns)

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • type (:string) - Defaults to "text".
  • size (:atom) - 36, 44 or 52 px high. Defaults to :md. Must be one of :sm, :md, or :lg.
  • invalid (:boolean) - Defaults to false.
  • loading (:boolean) - swaps the action for a spinner. Defaults to false.
  • loading_label (:string) - what is happening, read by screen readers. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["placeholder", "disabled", "readonly", "maxlength", "inputmode", "autocomplete", "required", "min", "max", "step"].

Slots

  • icon - drawn before the text, muted.
  • action - a button at the end: show the password, clear, copy.
  • prefix - an add-on glued to the start: R$, https://.
  • suffix - an add-on glued to the end: por marco, .devaction.app.
  • hint - a small key cap or text inside the field, before the action.