InputText

Basic Usage

Text Input

<script setup>
import { InputText } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const text = useModel('')
</script>

<template>
    <InputText v-model="text" label="Text Input"/>
</template>

Props

Placeholder

placeholder: string

<InputText placeholder="Text Input"/>

Max

max: string

The maximum string length that can be entered into the text input.

<InputText max="10" placeholder="Up to 10 characters"/>

Text align

text-align: ('left' | 'center' | 'right') = 'left'

<InputText text-align="left" placeholder="Left"/>
<InputText text-align="center" placeholder="Center"/>
<InputText text-align="right" placeholder="Right"/>

Type

type: ('text' | 'password') = 'text'

<InputText type='text' placeholder="Username"/>
<InputText type='password' placeholder="Password"/>

Autoselect

boolean

Selects InputText's text when focused.

<InputText value="Focus me!" autoselect/>

Prefix and Suffix

prefix: string

suffix: string

<InputText prefix="Prefix" suffix="Suffix"/>

Prefix

Suffix

Icons

icon[-left]: string

icon-right: string

<InputText icon="person" icon-right="lock"/>
<!-- or -->
<InputText icon-left="person" icon-right="lock"/>

personlock

Side Buttons

btn-before: object

btn-after: object

The btn-before and btn-after props receive objects representing the props for Btn components to be displayed before and after the input field area, respectively.

The following Btn props are ignored from the btn-before and btn-after props, and are rather taken from the InputField's props:

• theme
• size
• radius
• spacing

The Btn disabled prop is bound to the InputField disabled prop. That is, both btn-before and btn-after accept a disabled prop, but if the InputField is disabled, then the side buttons will also get disabled.

<script setup>
const btnBeforeProps = {
    icon: 'bolt'
}
const btnAfterProps = {
    icon: 'science'
}
</script>

<template>
    <InputText :btn-before="btnBeforeProps" :btn-after="btnAfterProps"/>
</template>

Float label

float-label: boolean

<InputText label="Text Input" float-label/>

​

Text Input

NOTE

float-label only works if the placeholder, description, prefix, and icon[-left] props are unset.

Space evenly

boolean

When set to true, InputText's value is trimmed and consecutive whitespace characters (/\s+/) are replaced with a single space character (" ") when the Enter key is pressed or the element loses focus.

<InputText space-evenly/>

Underline

underline: boolean

Theme

theme: theme = 'brand'

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'

Spacing

spacing: ('compact' | 'expanded') = ''

Disabled

disabled: boolean

Enter validation

prevent-enter-validation: boolean

By default, InputText's is automatically validated when the keydown event is fired with the 'Enter' key. However, validation on enter-key press, is disabled if the underlying input element belongs to a form element, or if the prevent-enter-validation prop is set to true.

Elements

element	tag	description
input	<input>	InputText's underlying input element.

Anatomy

<div.form-field.input-text/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.input-text-outer/>

<Btn.btn/>

<div.input-text-wrapper/>

<Icon.icon/>

<p/>

<input/>

<label/>

<p/>

<Icon.icon/>

<Btn.btn/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
value	string	''
placeholder	string	''
max	string
text-align	'left' | 'center' | 'right'	'left'
type	'text' | 'password'	'text'
autoselect	boolean
prefix	string
suffix	string
icon	string
icon-left	string
icon-right	string
btn-before	object
btn-after	object
spaceEvenly	boolean
underline	boolean
disabled	boolean
label	string
hint	string
description	string
help	string
showErrros	boolean
floatLabel	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''
validator	Function
eagerValidation	boolean
elements	object
preventEnterValidation	boolean
validationDelay	number	300
validationCooldown	number	350

Configuration options

InputText's configuration options allow to overwrite some InputText props' default values and may be overwritten under the inputText root-level configuration option.

inputText.<option>	type	default	global
underline	boolean
validationDelay	number		✅
validationCooldown	number		✅
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅