Vuersatile Components

Appearance

On this page

InputText ​

Not so plain and not so simple input text.

Implements mixins ValidationsInputMixin and BasicInputMixin.

html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    :validations="['not-empty', 'email']"
                />
            </div>
        </div>
    </Form>
</Card>

Props ​

  • placeholder: text shown when nothing is written.
  • autocomplete: The autocomplete property specifies whether or not an input field should have autocomplete enabled. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
  • pattern: The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission.
  • icon: Icon which will show at the end of the input.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    :validations="['not-empty', 'email']"
                />
            </div>
        </div>
    </Form>
</Card>

  • iconVariant: in case you are using Font Awesome, which icon variant will be used (like fa-solid or fa-regular).

  • customError: in case we want to use our own error instead of Vuersatile validation errors.

This email is not considered safe
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    :validations="['not-empty', 'email']"
                    initialValue="[email protected]"
                    customError="This email is not considered safe"
                />
            </div>
        </div>
    </Form>
</Card>
  • inputType: HTML input type (text, tel, email, number).
  • customType: custom type for input (null or datetext).
  • readOnly: if input is read-only or not.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    readOnly
                    initialValue="[email protected]"
                    :validations="['not-empty', 'email']"
                />
            </div>
        </div>
    </Form>
</Card>

Emits ​

  • @input. Native event emit.
  • @inputField. Custom event emit.
  • @change. Native change emit.
  • @changeField. Custom change emit.