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>
Improve this page
Last Updated:
Contributors: Stefan Pfaffel