# Text Input

Your basic input field for single line text 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>

1
2
3
4
5
6

# 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;

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Properties

Inherited for all form inputs;

Property	Type	Default	Description
v-model	string	null	The v-model prop
disabled	boolean	false	Disable the control
name	string	null	The input name
placeholder	string	null	The input name
debounce	boolean	false	Set to true to debounce input (to wait for a user to stop typing)
description	string	null	The input description
rules	object	null	Validation rules (see form validation docs)
valid	boolean	null	Allows you to manually control validation state
validation-mode	string	'aggressive'	Validation mode, see validation docs for details.
supress-error	boolean	false	Allow you to turn of the error string being displayed by validation

Additonal properties specific to this component;

Property	Type	Default	Description
type	string	'text''	The input type

← Form Validation Masked Input →