FormInput since v0.22.0 themeable
An input element wrapped inside a labelled form element.
The element supports the Vue.js v-model directive. On input the directive will be updated with the index of selected option.
Preview
Component Value:
Properties
Name
Type
Default
Value
allowedCharactersSupersetPattern
String
description
String
disabled
Boolean
false
format
String
id
String
invalid
Boolean
invalidMessage
String
label
String
modelValue
String
name
String
pattern
String
.*
patternUnicode
Boolean
false
placeholder
String
required
Boolean
true
showFormatHint
Boolean
false
showPatternHint
Boolean
true
type
String
text
Emits
Event
update:modelValue
Example
<template>
<FormInput
label="ZipCode"
description="Please enter a valid zip code"
pattern="[0-9]{5}"
format="85080" />
</template>
<script setup>
import { FormInput } from '@discue/ui-components'
</script>