Form Input

Basic Usage

A basic text field

You entered:

<us-form-group label="A basic text field">
    <us-form-input
        name="text-input"
        v-model="currentValue"
    />
</us-form-group>

Input Type

<us-form-input> defaults to a text input, but you can set the type prop to one of the supported native browser HTML5 types: text, password, email, number, url, tel, search, date, datetime, datetime-local, month, week, time, range, or color.

Type: text

Type: password

Type: email

Type: number

Type: url

Type: tel

Type: search

Type: date

Type: datetime

Type: datetime-local

Type: month

Type: week

Type: time

Type: range

Type: color

Validation

You can make use of built-in validation, for example;

A basic text field

Prestine

You entered:

<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
    <us-form-group label="A basic text field">
        <us-form-input
            name="text-input2"
            v-model="currentValue"
            :rules="{required:true}"
        />
    </us-form-group>
    <us-button type="submit" variant="primary">Submit</us-button>
    <us-tag variant="danger" v-if="isValid === false">Invalid</us-tag>
    <us-tag variant="success" v-else-if="isValid === true">Valid</us-tag>
    <us-tag variant="dark" v-if="isDirty === true">Dirty</us-tag>
    <us-tag variant="light" v-else-if="isDirty === false">Prestine</us-tag>
</us-form>