ValidatedField

Text or password field that validates on blur-style input using a rules array of functions returning true or an error message. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiValidatedField } from '@ziyarago/ui/vue'

Default

Vue
<UiValidatedField
  label="Email"
  icon="mail"
  placeholder="name@example.com"
  v-model="value"
 />

Password

Vue
<UiValidatedField label="Password" type="password" v-model="value" />

External error

Vue
<UiValidatedField
  label="Username"
  error="Username is already taken"
  v-model="value"
 />

Sizes

Vue
<UiValidatedField size="xs" label="Email" icon="mail" v-model="value" />

<UiValidatedField size="sm" label="Email" icon="mail" v-model="value" />

<UiValidatedField size="md" label="Email" icon="mail" v-model="value" />

<UiValidatedField size="lg" label="Email" icon="mail" v-model="value" />

<UiValidatedField size="xl" label="Email" icon="mail" v-model="value" />

API reference

TextField (or PasswordInput) with built-in validation rules. Use for simple client-side validation without a form library.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''Current value.
rules((value: string) => true | string)[]'[]'Validators run in order; return true when valid or an error message. The first failure is shown.
type'text' | 'password' | string'text'"password" renders PasswordInput, any other value is passed to TextField as the input type.
errorstring—External error. Takes priority over rules.
labelstring—Label shown above the control.
placeholderstring—Placeholder text.
hintstring—Helper text under the control. Hidden while error is set.
iconstring—Leading icon name (TextField only).
disabledbooleanfalseDisables the control.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new string on every keystroke.

Notes

  • Rules start running after the first edit, so an untouched field shows no error.
  • All other props are forwarded to TextField / PasswordInput.