Input

Accessible form text field with label, helper, prefix/suffix addons, password toggle, and validation states.

<x-input>

Standard Input with Helper

Label + input + optional helper text. Uses .vui-field wrapper for consistent spacing.

Full Name *

Enter your official name as it appears on your ID.

<x-input name="name" label="Full Name" placeholder="Jane Doe" :required="true"
    helper="Enter your official name as it appears on your ID." />

Adds .vui-input-error border and a red helper message for failed validation.

Email Address

Please enter a valid email address.

<x-input name="email" type="email" label="Email Address"
    value="not-an-email" error="Please enter a valid email address." />

Attach a static text prefix (e.g. a domain) flush to the input field.

Repository URL

github.com/

<x-input name="repo" label="Repository URL" prefix="github.com/" placeholder="username/repo" />

Eye-icon button to show/hide plain text. Zero JS library required.

Password

<x-input name="password" type="password" label="Password" :toggle-visible="true" />