EssenceUI.Components.TextField (Essence UI v0.2.0)

Copy Markdown View Source

Themed text field with sizes, variants, and accent colors.

Supports size, variant, accent color, disabled/read-only states, and optional left/right slots.

Summary

Functions

text_field(assigns)

Attributes

  • color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
  • high_contrast (:boolean) - Whether to increase color contrast with the background.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • size (:string) - TextField size from 1 to 3. Controls height and paddings. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Visual style variant. One of 'surface', 'classic', or 'soft'. Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • type (:string) - Native input type. Defaults to "text". Must be one of "text", "email", "password", "search", "number", "date", "datetime-local", "time", "week", "month", "url", or "tel".
  • value (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • autocomplete (:string) - Defaults to nil.
  • autofocus (:boolean) - Defaults to false.
  • inputmode (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["id", "form", "required", "minlength", "maxlength", "min", "max", "step", "pattern", "aria-label", "aria-labelledby", "aria-describedby"].

Slots

  • slot - Optional adornment slot. Use :side => 'left' or 'right'. Accepts attributes:
    • side (:string) - Must be one of "left", or "right".