TextField

Single-line text input with label, leading icon, suffix and error state. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

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

Default

Vue
<UiTextField
  label="Full name"
  placeholder="As written in passport"
  v-model="value"
 />

With icon

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

States

Vue
<UiTextField label="Invalid" error v-model="value" icon="mail" />

<UiTextField label="Disabled" disabled v-model="value" />

<UiTextField label="Read only" readonly v-model="value" />

Sizes

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

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

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

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

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

API reference

Single-line text input with label, icon, suffix, hint and error. Use for any short free-text or typed value (email, url, number as text).

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''Current value.
labelstring—Label shown above the control.
placeholderstring—Placeholder text.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
typestring'text'Native input type: text, email, tel, url, number, date, etc.
iconstring—Leading icon name.
suffixVNode | string—Trailing content inside the field (unit, button, icon).
variantfilledunderlinedsolo—Alternative field style. Omit for the default outlined look.
densitycompactdefault'default'compact uses the small control height.
disabledbooleanfalseDisables the control.
readonlybooleanfalseMakes the input read-only.
requiredbooleanfalseAdds a red asterisk to the label and the native required attribute (browser validation inside a form).
namestring—Native name attribute of the input.
autocompletestring—Native autocomplete hint, for example "email" or "new-password".
minnumber | string—Native min for number, date and time types.
maxnumber | string—Native max for number, date and time types.
stepnumber | string—Native step for number, date and time types.
maxlengthnumber—Maximum number of characters.
minlengthnumber—Minimum number of characters (native validation).
inputmodestring—Virtual keyboard hint: numeric, decimal, tel, email, url, search or none.
patternstring—Native validation pattern.
spellcheckboolean—Enables or disables spell checking.
autofocusboolean—Focuses the input on mount.
autocapitalizestring—Native autocapitalize hint.
sizexssmmdlgxl'md'Control height, font and padding scale.

Slots

Vue: named slots. React: a prop with the same name; default is children.

prefixContent before the input (icon or text). Replaces the icon prop. React: prefix prop.
suffixContent after the input (button, unit). Same as the suffix prop. React: suffix prop.

Events

Vue: @name. React: onName.

changeCalled with the new string on every keystroke.
blurNative blur of the input (Vue @blur, React onBlur).
focusNative focus of the input.
keydownNative keydown of the input; modifiers like @keydown.enter work in Vue.
inputNative input event (after change), receives the Event.

Notes

  • Wrapped in a label, so clicking the label focuses the input.
  • Native attributes (name, autocomplete, min, max, step, maxlength, inputmode, pattern ...) and the blur, focus, keydown, keyup and paste listeners are forwarded to the inner input. id, class, style, aria-* and data-* land on the root label.