input

Documentation

Overview

Package input provides a w-input custom element for wings.

Features:

• Full label/field/feedback anatomy with independent ::part() surfaces
• Surface form controlled by the active Material skin (outlined by default)
• Three sizes: sm, md, lg
• Named slots: label (rich label), prefix (left icon/text), suffix (right icon/text), helper (rich helper text), error (rich error content)
• Clearable mode: shows a × button when the field has a value
• Required indicator (*) via required="true"
• Character count via maxlength attribute
• Host state attributes for CSS hooks: [data-focused], [data-has-value], [data-empty], [data-invalid], [disabled], [size]
• Fires @input on every keystroke; @change when the field is left (native semantics); @clear when the × button is clicked
• Form-associated: participates in a wrapping native <form> — validity (required/type/maxlength + bound Validator) gates form.checkValidity() and submission, and the value is submitted under the host's name attribute

Usage in parent template

<w-input label="Email" type="email" placeholder="you@example.com"
         helper="We'll never share your email."
         required="true" clearable="true"
         @change="on_email_change">
</w-input>

<!-- icon prefix via slot -->
<w-input label="Search">
  <svg slot="prefix">…</svg>
</w-input>

<!-- mark invalid from parent -->
<w-input error="Invalid email format" *invalid="{{form_invalid}}">
</w-input>

Attributes (all observed; re-syncs template on change)

• type — text (default) | email | password | search | number | tel | url
• label — label text (also activates the label zone); use slot="label" for HTML
• placeholder — placeholder text
• value — initial value; kept in sync via two-way binding
• helper — helper text below field; use slot="helper" for HTML
• error — error message below field; use slot="error" for HTML
• maxlength — max characters; enables character count display
• size — sm | md (default) | lg
• required — "true" to show the required mark (*)
• clearable — "true" to show the × button when field has a value
• disabled — standard HTML (reflected to inner <input>)

Events fired to parent

@input   — fires on every keystroke; args[0] = current string value
@change  — fires when the user leaves the field (blur), after the two-way
           write-back, so a bound FieldCodec/Validator has already run;
           args[0] = current string value
@clear   — fires when the × clear button is clicked

Native form participation

w-input is a form-associated custom element. Inside a <form>, an invalid field (native constraints or a bound wings.Validator) blocks form.checkValidity()/reportValidity() and submission; give the host a name attribute and the value is included in the submitted form data. form.reset() restores the field to its default value (the initial `value` attribute) and clears validation, and an ancestor <fieldset disabled> disables the field (via formReset/formDisabled lifecycle callbacks).

CSS Customisation

Input implements wings.Customizable. CSS is split into two parts:

• "Vars" — CSS custom properties (empty by default).
• "Design" — Layout and structure rules.

Key tokens consumed: --wings-input-bg, --wings-input-color, --wings-input-placeholder-color, --wings-input-border, --wings-input-border-focus, --wings-input-border-error, --wings-input-label-color, --wings-input-label-color-focus, --wings-input-label-color-error, --wings-input-helper-color, --wings-input-error-color, --wings-input-count-color, --wings-input-clear-color, --wings-input-prefix-color, --wings-input-disabled-opacity, --wings-remover-hover-bg, --wings-remover-hover-color, --wings-radius-md, --wings-border, --wings-border-focus, --wings-surface, --wings-text, --wings-text-muted, --wings-text-light, --wings-focus-ring, --wings-transition-fast.

Material tokens (set by the active Material skin): --wings-input-material-border-top/right/bottom/left, --wings-input-material-radius, --wings-input-material-bg, --wings-input-material-padding-x, --wings-input-material-focus-shadow, --wings-input-material-focus-shadow-error.

Key parts exposed: ::part(root), ::part(label-wrap), ::part(label), ::part(required-mark), ::part(field), ::part(prefix), ::part(input), ::part(suffix), ::part(clear-btn), ::part(feedback), ::part(helper), ::part(error), ::part(count).

Host hooks (set by this widget for external CSS):

[data-focused]   — present while the inner <input> has focus
[data-has-value] — present while value is non-empty
[data-empty]     — present while value is empty
[data-invalid]   — present when the error attribute is non-empty
[size]           — "sm" | "md" | "lg" (default "md")

Floating label example (external CSS only, no Go changes needed):

w-input[data-focused]::part(label),
w-input[data-has-value]::part(label) {
  transform: translateY(-1.5em) scale(0.8);
  color: var(--wings-primary);
}

Index

• Variables
• type Input
  • func New() *Input
  • func (in *Input) InitData() map[string]any
  • func (in *Input) ListCSS() []wings.CSSPart
  • func (in *Input) Render(obj *wings.PranaObj)
  • func (in *Input) ReplaceCSS(key string, content string)

Variables

var G goose.Alert

G is the logger for this module.

Types

type Input

type Input struct{}

Input implements wings.PranaMod and wings.Customizable for the w-input custom element.

func New

func New() *Input

New creates a new Input instance.

func (*Input) InitData

func (in *Input) InitData() map[string]any

func (*Input) ListCSS

func (in *Input) ListCSS() []wings.CSSPart

ListCSS returns the named CSS parts in order.

func (*Input) Render

func (in *Input) Render(obj *wings.PranaObj)

func (*Input) ReplaceCSS

func (in *Input) ReplaceCSS(key string, content string)

ReplaceCSS replaces the CSS part identified by key and updates all live instances via wings.Update.